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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Mit der Farbauswahl können Sie color- und *-color-Deklarationen über eine grafische Benutzeroberfläche ändern und mit einem Klick Nicht-HD- und HD-Farben erstellen, konvertieren und debuggen.

Eine ausführliche Beschreibung der neuen Farbräume finden Sie im High Definition CSS Color Guide.

Farbauswahl öffnen und Farben ändern

Mit der Farbauswahl können Sie Farbwerte mit einem Klick ändern:

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

  2. Suchen Sie im Bereich Stile nach der color- oder *-color-Deklaration, die Sie ändern möchten.

    Links neben jedem color- oder *-color-Wert befindet sich ein kleines quadratisches Symbol mit einer Vorschau der jeweiligen Farbe.

    Farbvorschau.

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

Der berechnete Wert von color-mix().

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

Elemente der Farbauswahl

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

Die Farbauswahl mit Anmerkungen.

  1. Schattierungen:
  2. Pipette: Farbe mit der Pipette auswählen
  3. In Zwischenablage kopieren Kopieren Sie den Anzeigewert in die Zwischenablage.
  4. Anzeigewert 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 Farbe des Quadrats zu ändern.
  7. Gamut-Grenze: 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 können Sie zwischen HD und Nicht-HD unterscheiden.
  8. Farbkreis: Ziehen Sie den Kreis über die Schattierungen, um den Anzeigewert zu ändern.
  9. Schieberegler für den Farbton
  10. Schieberegler für die Deckkraft:
  11. Schaltfläche zum Wechseln des angezeigten Werts Wählen Sie einen Farbraum aus der Drop-down-Liste aus. Weitere Informationen
  12. Kontrastverhältnis erweitern: Öffnet den entsprechenden Bereich, in dem Sie den Kontrast anpassen können.

  13. Farbpaletten-Umschalter: Klicken Sie darauf, um zwischen folgenden Optionen zu wechseln:

    • Material-Designpalette
    • Benutzerdefinierte Palette. Wenn Sie die aktuelle Farbe manuell in diese Palette einfügen möchten, klicken Sie auf Hinzufügen.
    • CSS-Variablen-Palette. Hier werden alle benutzerdefinierten CSS-Variablen (mit -- angehängt) auf Ihrer Seite aufgeführt.
    • Palette Seitenfarben Um diese Palette zu generieren, sucht DevTools nach allen Farben in Ihren Stylesheets.

Farbraum auswählen

So wählen Sie einen Farbraum aus:

  1. Umschalttaste gedrückt halten und auf das Vorschausymbol neben einem Farbwert klicken. Ein Drop-down-Menü wird geöffnet.

    Das Drop-down-Menü mit allen unterstützten Farbräumen.

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

    Oder einen der neuen Bereiche:

    Oder ein Bereich, der durch die Funktion color(<color_space> X X X) definiert wird.

Farben konvertieren

Wenn Sie mit der Schaltfläche für Anzeigewerte zwischen Farbräumen wechseln, werden die Werte in DevTools automatisch konvertiert.

Bewegen Sie den Mauszeiger auf das Symbol, um den ursprünglichen Wert zu sehen.

Ein Warnsymbol, das auf ein Gamut-Clipping hinweist, und eine Kurzinfo mit dem Originalwert.

Im nächsten Video sehen Sie Conversions in Aktion.

Kontrast korrigieren

So beheben Sie ein Kontrastproblem für eine color-Erklärung:

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

  3. Vorgeschlagene Farbe verwenden, die einer Richtlinie entspricht:

    • Klicken Sie neben der Richtlinie auf Vorgeschlagene Farbe verwenden.
    • Ziehen Sie in der Vorschau Schatten oben den Farbkreis unter die entsprechende Linie.

Der maximierte Abschnitt zum Kontrastverhältnis mit APCA-Richtlinien.

Standardmäßig schlägt die Farbauswahl Werte vor, die APCA-konform sind.

Alternativ können Sie festlegen, dass Werte vorgeschlagen werden, die den WebAIM-Richtlinien entsprechen. Entfernen Sie in Einstellungen. Einstellungen > Einstellungen > Elemente das Häkchen aus dem Kästchen Kästchen. Erweiterter Algorithmus für wahrnehmbaren Kontrast (Advanced Perceptual Contrast Algorithm, APCA)….

Wenn Sie eine Liste aller Kontrastprobleme auf einmal erhalten möchten, folgen Sie der Anleitung unter Website lesbarer gestalten.

Mit der Pipette eine Farbe an einer beliebigen Stelle auswählen

Mit der Pipette Pipette können Sie Farben sowohl von der Seite als auch von einer beliebigen Stelle auf dem Bildschirm auswählen.

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

  1. Öffnen Sie die Farbauswahl und führen Sie einen der folgenden Schritte aus:
    • Klicken Sie auf Pipette.
    • Drücken Sie C, um die Pipette zu aktivieren. Drücken Sie die Esc-Taste, um die Funktion zu deaktivieren.
  2. Wenn die Pipette aktiv ist, bewegen Sie den Mauszeiger auf die Zielfarbe und klicken Sie, um sie auszuwählen.

Mit der Pipette können Sie eine beliebige Stelle auf dem Bildschirm auswählen.

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