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.

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.

   

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

   

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.

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

Następny film pokazuje konwersje w praktyce.

Popraw kontrast

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.

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

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.