Mit der Farbauswahl HD- und Nicht-HD-Farben prüfen und debuggen

Jecelyn Yeen

Twitter GitHub Startseite

Sofia Emelianova

GitHub

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.

Wichtiger Hinweis:In diesem Video sehen Sie die Chrome-Entwicklertools vor Version 112. In späteren Versionen unterstützt der Bereich Styles 12 neue Farbräume und sieben neue Farbbereiche aus der Spezifikation CSS-Farbstufe 4 und die Funktion color-mix() aus CSS-Farbstufe 5.

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:

1. Wählen Sie ein Element im Steuerfeld Elemente aus.

2. 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.

   

   Hinweis:In diesem Beispiel werden zwei sich kreuzende Kreise neben der color-mix()-Funktion gezeigt: . Die Schnittmenge ist eine Vorschau der resultierenden Farbe.

Den berechneten Wert können Sie im Bereich Computed prüfen.

1. Klicken Sie neben einer Farbe auf das Vorschauquadrat, um die Farbauswahl zu öffnen.
2. 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:

1. Schattierungen:
2. Opfer: Weitere Informationen finden Sie unter Farbe überall mit der Pipette ausprobieren.
3. In Zwischenablage kopieren: Kopieren Sie den Anzeigewert in die Zwischenablage.
4. Wert anzeigen: Argumente des ausgewählten Farbraums.
5. Kontrastverhältnis: Nur für color Werte verfügbar. Das ist die Differenz zwischen color und background-color.
6. Farbpalette: Klicken Sie auf ein Quadrat, um die Farbe in die des Quadrats zu ändern.
7. 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.
8. Farbkreis: Ziehen Sie diesen Kreis über die Schattierungen, um den Anzeigewert zu ändern.
9. Farbton-Schieberegler:
10. Schieberegler für Deckkraft:
11. Anzeigewertauswahl: Wählen Sie in der Drop-down-Liste einen Farbraum aus. Weitere Informationen finden Sie unter Farben konvertieren.
    Hinweis:Wenn Sie das Drop-down-Menü direkt öffnen möchten, halten Sie die Umschalttaste gedrückt und klicken Sie neben dem Farbwert auf das Symbol für die Farbvorschau.
12. Kontrastverhältnis maximieren: Öffnet den entsprechenden Bereich, in dem Sie Kontrast korrigieren können.

13. 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:

1. Klicken Sie bei gedrückter Umschalttaste auf das Vorschausymbol neben einem Farbwert. Eine Drop-down-Liste wird geöffnet.

   Hinweis:Alternativ können Sie in der Farbauswahl auf Wertewechsel klicken.

   

2. Wählen Sie einen der folgenden Farbräume aus:

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   Oder in einem der neuen Gruppenbereiche:

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   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.

Achtung:Bei der Umwandlung von HD in nicht-HD schneidet DevTools Gamuts zu, damit sie in die Lücken passen, und markiert abgeschnittene Werte mit -Warnsymbolen.

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

Wichtiger Hinweis:Mit der Farbauswahl werden Kontrastverhältnisse nur für die color-Werte und relativ zu den jeweiligen background-color-Werten berechnet. Daher haben nur die color-Werte einen Abschnitt mit dem Kontrastverhältnis.

So beheben Sie ein Kontrastproblem für eine color-Deklaration:

1. Öffnen Sie die Farbauswahl neben dem Wert color.
2. Maximieren Sie den Abschnitt Kontrastverhältnis .

3. 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.

Hinweis:In der Farbauswahl wird standardmäßig vorgeschlagen, die WebAIM-Richtlinien einzuhalten. Alternativ können Sie auch festlegen, dass Werte vorgeschlagen werden, die APCA-konform sind: Klicken Sie unter Einstellungen > Tests auf das Kästchen Neuen erweiterten Algorithmus für Wahrnehmungskontrast (Advanced Perceptual Contrast Algorithm, APCA) aktivieren

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:

1. Ö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.
2. Bewegen Sie den Mauszeiger auf die Zielfarbe, wenn die Eyedropper aktiviert ist, und klicken Sie auf die gewünschte Farbe.

Hinweis:Die Eyedropper erfasst Farben nur im sRGB-Farbraum. Wenn Sie Samples außerhalb dieses Bereichs durchführen, wird die Farbe mithilfe der Puppe auf die am nächsten liegende Farbe zugeschnitten. Weitere Informationen finden Sie unter Farben konvertieren.

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.