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

Jecelyn Yeen

Sofia Emelianova

Die Farbauswahl bietet eine Benutzeroberfläche zum Ändern der color- und *-color-Deklarationen und ermöglicht das Erstellen, Konvertieren und Debuggen von Nicht-HD- und HD-Farben mit nur einem Klick.

Wichtiger Hinweis:In diesem Video wird die Chrome-Entwicklertools-Version 112 gezeigt. In neueren Versionen unterstützt der Bereich Styles 12 neue Farbräume und 7 neue Farbräume aus der Spezifikation CSS Color Level 4 sowie die Funktion color-mix() aus CSS Color Level 5.

Ausführliche Informationen zu den neuen Farbräumen finden Sie im CSS-Farbleitfaden für High Definition.

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 Stile nach der 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 sehen Sie zwei sich überschneidende Kreise neben der Funktion color-mix(): . Die Schnittmenge ist eine Vorschau der resultierenden Farbe.

Verwenden Sie den Bereich Berechnet, um den berechneten Wert zu überprüfen.

1. Klicken Sie auf das Vorschauquadrat neben einer Farbe, um die Farbauswahl zu öffnen.
2. Um die Farbe zu ändern, verwenden Sie eines der UI-Elemente der Farbauswahl.

Farbauswahl-Elemente

Nachfolgend finden Sie eine Beschreibung der einzelnen UI-Elemente der Farbauswahl:

1. Schattierungen:
2. Pipette: Weitere Informationen finden Sie unter Mit der Pipette überall eine Farbe verwenden.
3. In Zwischenablage kopieren: Kopieren Sie den Anzeigewert in die Zwischenablage.
4. Wert anzeigen: Argumente für den ausgewählten Farbraum.
5. Kontrastverhältnis: Nur für color-Werte verfügbar. Es ist der Unterschied 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 produzieren. Anhand der Linie kannst du zwischen HD und Nicht-HD unterscheiden.
8. Farbkreis: Ziehen Sie diesen Kreis über die Farbtöne, um den Anzeigewert zu ändern.
9. Schieberegler für Farbton:
10. Schieberegler für Deckkraft:
11. Werte wechseln: 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 erhöhen: Öffnet den entsprechenden Bereich für die Option Kontrast fixieren.

13. Farbpalettenauswahl: Klicken Sie darauf, um zwischen folgenden Optionen zu wechseln:

    • Material Design-Palette:
    • Benutzerdefinierte Palette: Klicken Sie auf , um die aktuelle Farbe manuell zu dieser Palette hinzuzufügen.
    • CSS-Variablen ausgewählt werden. Listet alle benutzerdefinierten CSS-Variablen auf Ihrer Seite auf, denen -- angehängt ist.
    • Palette für Seitenfarben: Zum Erstellen dieser Palette sucht DevTools nach allen Farben in Ihren 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 Anzeigewert wechseln 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 einen 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 von der Funktion color(<color_space> X X X) definiertes Leerzeichen.

Farben konvertieren

Wenn Sie mit der Auswahl für Anzeigewerte zwischen Farbräumen wechseln, konvertiert die Entwicklertools die Werte automatisch.

Achtung:Bei der Konvertierung von HD in Nicht-HD werden in den Entwicklertools alle Bereiche an den Bereich angepasst und die abgeschnittenen Werte mit Warnsymbolen markiert.

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 die Kontrastverhältnisse nur für die color-Werte relativ zu den jeweiligen background-color-Werten berechnet. Daher haben nur die color-Werte die Abschnitte Kontrastverhältnis.

So beheben Sie ein Kontrastproblem in einer color-Deklaration:

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

3. Verwenden Sie die vorgeschlagene Farbe, die einer Richtlinie entspricht:

   • Klicke neben der Richtlinie auf .
   • Ziehen Sie in der Vorschau Schattierungen oben den Kreis Farbe unter die entsprechende Linie.

Hinweis:Standardmäßig schlägt die Farbauswahl vor, die WebAIM-Richtlinien zu befolgen. Alternativ können Sie Werte vorschlagen, die mit APCA kompatibel sind: Klicken Sie unter Einstellungen > Tests auf das Kästchen Neuen Advanced Perceptual Contrast Algorithm (APCA) aktivieren

.

Wenn Sie eine Liste aller Kontrastprobleme auf einmal abrufen möchten, folgen Sie der Anleitung Website lesbarer machen.

Mit der Pipette überall eine Farbe ausprobieren

Mit der Pipette können Farben sowohl von der Seite als auch von überall auf dem Bildschirm verwendet werden.

So wählen Sie an einer beliebigen Stelle auf dem Bildschirm eine Farbe aus:

1. Öffnen Sie die Farbauswahl und führen Sie einen der folgenden Schritte aus:
   • Klicken Sie auf .
   • Drücken Sie C, um die Pipette zu aktivieren. Zum Deaktivieren drücken Sie die Esc-Taste.
2. Bewegen Sie bei aktiver Pipette den Mauszeiger auf die Zielfarbe und klicken Sie, um die Stichprobe zu erstellen.

Hinweis:Mit der Pipette werden nur Farben im sRGB-Farbraum entnommen. Wenn du außerhalb dieses Bereichs nimmst, wird die Farbe mit der Pipette auf die nächstgelegene entfernt. Weitere Informationen finden Sie unter Farben konvertieren.

In diesem Beispiel ist in der Farbauswahl der aktuelle Farbwert rgb(224 255 255 / 15%) zu sehen. Diese Farbe ändert sich zu Pink, sobald Sie außerhalb von Chrome klicken.