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.

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.

   

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

   

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.

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

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.

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.