Die Farbauswahl bietet eine grafische Benutzeroberfläche zum Ändern von color
- und *-color
-Deklarationen und ermöglicht das Erstellen, Konvertieren und Debuggen von Nicht-HD- und HD-Farben mit einem Klick.
Ausführliche Informationen zu den neuen Farbräumen finden Sie im High Definition CSS Color Guide (in englischer Sprache).
Farbauswahl öffnen und Farben ändern
Verwenden Sie die Farbauswahl, um Farbwerte mit einem Klick zu ändern:
- Wählen Sie ein Element im Steuerfeld Elemente aus.
Suchen Sie im Bereich Styles die Deklaration
color
oder*-color
, die Sie ändern möchten.Links neben jedem
color
- oder*-color
-Wert befindet sich ein kleines quadratisches Symbol mit einer Vorschau der jeweiligen Farbe.
Den berechneten Wert können Sie im Bereich Computed prüfen.
- Klicken Sie neben einer Farbe auf das Vorschauquadrat, um die Farbauswahl zu öffnen.
- Verwenden Sie zum Ändern der Farbe eines der UI-Elemente der Farbauswahl.
Farbauswahl-Elemente
Im Folgenden finden Sie eine Beschreibung der einzelnen UI-Elemente des Farbauswahl-Tools:
- Schattierungen:
- Opfer: Weitere Informationen finden Sie unter Farbe überall mit der Pipette ausprobieren.
- In Zwischenablage kopieren: Kopieren Sie den Anzeigewert in die Zwischenablage.
- Wert anzeigen: Argumente des ausgewählten Farbraums.
- Kontrastverhältnis: Nur für
color
Werte verfügbar. Das ist die Differenz zwischencolor
undbackground-color
. - Farbpalette: Klicken Sie auf ein Quadrat, um die Farbe in die des Quadrats zu ändern.
- Gamutgrenze. Diese Zeile ist nur für die neuen Farbräume und die Funktion
color()
verfügbar. Sie können sowohl HD- als auch Nicht-HD-Farben erzeugen. Anhand der Linie kannst du zwischen HD und Nicht-HD unterscheiden. - Farbkreis: Ziehen Sie diesen Kreis über die Schattierungen, um den Anzeigewert zu ändern.
- Farbton-Schieberegler:
- Schieberegler für Deckkraft:
- Anzeigewertauswahl: Wählen Sie in der Drop-down-Liste einen Farbraum aus. Weitere Informationen finden Sie unter Farben konvertieren.
- Kontrastverhältnis maximieren: Öffnet den entsprechenden Bereich, in dem Sie Kontrast korrigieren können.
Farbpalettenwechsler: Klicken Sie darauf, um zwischen folgenden Optionen zu wechseln:
- Material Design-Palette:
- Benutzerdefinierte Palette: Wenn Sie die aktuelle Farbe manuell zu dieser Palette hinzufügen möchten, klicken Sie auf .
- CSS-Variablen. Listet alle benutzerdefinierten CSS-Variablen (mit
--
angehängt) auf Ihrer Seite auf. - Seitenfarben. Um diese Palette zu erstellen, sucht die Entwicklertools nach allen Farben in deinen Stylesheets.
Farbraum auswählen
So wählen Sie einen Farbraum aus:
Klicken Sie bei gedrückter Umschalttaste auf das Vorschausymbol neben einem Farbwert. Eine Drop-down-Liste wird geöffnet.
Wählen Sie einen der folgenden Farbräume aus:
Oder in einem der neuen Gruppenbereiche:
Oder ein durch die Funktion
color(<color_space> X X X)
definiertes Leerzeichen.
Farben konvertieren
Wenn Sie mit der Funktion zum Wechseln von Werten zwischen Farbräumen wechseln, werden die Werte in den Entwicklertools automatisch konvertiert.
Bewegen Sie den Mauszeiger auf das Symbol, um den ursprünglichen Wert zu sehen.
Im nächsten Video sehen Sie Conversions in Aktion.
Kontrast korrigieren
So beheben Sie ein Kontrastproblem für eine color
-Deklaration:
- Öffnen Sie die Farbauswahl neben dem Wert
color
. - Maximieren Sie den Abschnitt Kontrastverhältnis .
Verwenden Sie die vorgeschlagene Farbe, die einer Richtlinie entspricht:
- Klicken Sie neben der Richtlinie auf .
- Ziehen Sie in der Vorschau Schattierungen oben den Farbkreis unter die entsprechende Linie.
Eine Liste aller Kontrastprobleme auf einmal erhalten Sie unter Lesbarkeit von Websites optimieren.
Mit der Pipette können Sie überall Farben erforschen
Die Eyedropper von kann Farben sowohl auf der Seite als auch von überall auf dem Bildschirm erfassen.
So wählen Sie eine Farbe an einer beliebigen Stelle auf dem Bildschirm aus:
- Öffnen Sie die Farbauswahl und führen Sie einen der folgenden Schritte aus:
- Klicken Sie auf .
- Drücken Sie C, um die Eyedropper zu aktivieren. Zum Deaktivieren drücken Sie Esc.
- Bewegen Sie den Mauszeiger auf die Zielfarbe, wenn die Eyedropper aktiviert ist, und klicken Sie auf die gewünschte Farbe.
In diesem Beispiel zeigt die Farbauswahl den aktuellen Farbwert rgb(224 255 255 / 15%)
an. Diese Farbe wechselt zu Pink, wenn Sie außerhalb von Chrome klicken.