Sprawdzanie i debugowanie kolorów HD i innych niż HD za pomocą selektora kolorów

Jecelyn Yeen

Sofia Emelianova

Selektor kolorów zawiera interfejs GUI, który służy do zmieniania deklaracji color i *-color oraz pozwala jednym kliknięciem tworzyć, konwertować i debugować kolory inne niż HD i HD.

Ważne: w tym filmie pokazano wersję Narzędzi deweloperskich Chrome starszą niż 112. W nowszych wersjach panel Style obsługuje 12 nowych przestrzeni kolorów i 7 nowych zakresów kolorów ze specyfikacji CSS Color Level 4 oraz funkcję color-mix() z CSS Color Level 5.

Szczegółowe informacje o nowych przestrzeniach kolorów znajdziesz w przewodniku po kolorach w CSS w wysokiej rozdzielczości w CSS.

Otwórz selektor kolorów i zmień kolory

Aby zmienić wartości kolorów jednym kliknięciem, użyj selektora kolorów:

1. Wybierz element w panelu Elementy.

2. W panelu Style znajdź deklarację color lub *-color, którą chcesz zmienić.

   Po lewej stronie wartości color i *-color znajduje się mała kwadratowa ikona z podglądem danego koloru.

   

   Uwaga: w tym przykładzie są pokazane 2 przecięte okręgi obok funkcji color-mix(): . Przecięcie to podgląd wynikowego koloru.

Aby sprawdzić obliczoną wartość, skorzystaj z panelu Obliczone.

1. Kliknij kwadrat podglądu obok koloru, by otworzyć selektor kolorów.
2. Kolor możesz zmienić za pomocą dowolnych elementów interfejsu selektora kolorów.

Elementy selektora kolorów

Oto opisy poszczególnych elementów interfejsu selektora kolorów:

1. Cienie.
2. Zakraplacz. Zobacz Sprawdzanie koloru w dowolnym miejscu za pomocą zakraplacza.
3. Kopiuj do schowka Skopiuj do schowka opcję Wyświetlana wartość.
4. Wyświetlana wartość. Argumenty wybranej przestrzeni kolorów.
5. Współczynnik kontrastu. Dostępne tylko dla wartości color. To różnica między color a background-color.
6. Paleta kolorów. Kliknij kwadrat, aby zmienić jego kolor na kwadrat.
7. Granica Gamut. Ten wiersz jest dostępny tylko w przypadku nowych przestrzeni kolorów i funkcji color(). Umożliwiają nagrywanie kolorów zarówno w HD, jak i innych niż HD. Pozwala odróżnić treści HD i inne niż HD.
8. Koło kolorów. Przeciągnij to okrąg po obszarach odcieni, aby zmienić wyświetlaną wartość.
9. Suwak odcienia.
10. Suwak przezroczystości.
11. Przełączanie wartości wyświetlanych. Wybierz przestrzeń kolorów z listy. Zobacz Konwertowanie kolorów.
    Uwaga: aby bezpośrednio otworzyć menu, możesz przytrzymać klawisz Shift i kliknąć ikonę podglądu koloru obok wartości koloru.
12. Zwiększ współczynnik kontrastu. Otwiera odpowiednią sekcję, w której możesz Popraw kontrast.

13. Przełącznik palety kolorów. Kliknij ją, aby przełączyć się między tymi opcjami:

    • Paleta Material Design.
    • Paleta Niestandardowa. Aby ręcznie dodać bieżący kolor do tej palety, kliknij .
    • Paleta Zmienne CSS. Zawiera listę wszystkich niestandardowych zmiennych CSS (dołączonych ciągiem --) na Twojej stronie.
    • Paleta Kolory strony. Aby wygenerować tę paletę, Narzędzia deweloperskie szukają wszystkich kolorów w arkuszach stylów.

Wybierz przestrzeń kolorów

Aby wybrać przestrzeń kolorów:

1. Kliknij z naciśniętym klawiszem Shift ikonę podglądu obok wartości koloru. Wyświetli się lista.

   Uwaga: możesz też kliknąć przełącznik wartości wyświetlanych w selektorze kolorów.

   

2. Wybierz jedną z tych przestrzeni kolorów:

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

   Lub jedno z nowych pokoi:

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

   Lub spację zdefiniowaną przez funkcję color(<color_space> X X X).

Przekonwertuj kolory

Gdy przełączasz się między przestrzeniami kolorów za pomocą przełącznika wartości wyświetlanych, Narzędzia deweloperskie automatycznie konwertują wartości.

Uwaga: w przypadku konwertowania treści z HD na inne niż HD Narzędzia deweloperskie przycinają zakres kolorów, aby dopasować go do miejsca, i oznaczały obcięte wartości ikonami ostrzeżeń .

Najedź na tę ikonę, aby zobaczyć pierwotną wartość.

Następny film pokazuje konwersje w praktyce.

Popraw kontrast

Ważne: selektor kolorów oblicza współczynniki kontrastu tylko dla wartości color i względem odpowiednich wartości background-color. Dlatego tylko wartości color zawierają sekcje Współczynnik kontrastu.

Aby rozwiązać problem z kontrastem w deklaracji color:

1. Otwórz selektor kolorów obok wartości color.
2. Rozwiń sekcję Współczynnik kontrastu .

3. Użyj sugerowanego koloru, który jest zgodny ze wskazówkami:

   • Kliknij obok prowadnicy.
   • W podglądzie Cienie u góry przeciągnij okrąg kolorów poniżej odpowiedniej linii.

Uwaga: domyślnie selektor kolorów sugeruje przestrzeganie wytycznych WebAIM. Możesz też skonfigurować go tak, aby sugerował wartości zgodne z APCA: W Ustawieniach > Eksperymenty zaznacz Włącz nowy algorytm zaawansowanego percepcji percepcyjnej (APCA)...

Aby wyświetlić listę wszystkich problemów z kontrastem naraz, postępuj zgodnie z instrukcjami z przewodnika Tworzenie bardziej czytelnej witryny.

Pomiar koloru z dowolnego miejsca za pomocą zakraplacza

Zakraplacz może próbkować kolory zarówno ze strony, jak i z dowolnego miejsca na ekranie.

Aby wybrać kolor z dowolnego miejsca na ekranie:

1. Otwórz selektor kolorów i wykonaj jedną z tych czynności:
   • Kliknij przycisk .
   • Naciśnij C, aby aktywować Zakraplacz. Aby dezaktywować, naciśnij Escape.
2. Gdy jest włączona opcja Zakraplacz, najedź kursorem na kolor docelowy i kliknij, aby pobrać próbkę.

Uwaga: zakraplacz pokazuje kolory tylko w przestrzeni kolorów sRGB. Jeśli używasz próbki poza tą przestrzenią, Zakraplacz przypina najbliższy kolor. Zobacz Konwertowanie kolorów.

W tym przykładzie selektor kolorów pokazuje bieżącą wartość koloru rgb(224 255 255 / 15%). Ten kolor zmienia się na różowy, gdy klikniesz poza Chrome.