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

Jecelyn Yeen

Twitter GitHub Strona główna

Sofia Emelianova

GitHub

Selektor kolorów zawiera interfejs GUI do zmiany deklaracji color i *-color. Umożliwia też tworzenie, konwertowanie i debugowanie kolorów innych niż HD i HD jednym kliknięciem.

Ważne: ten film przedstawia Narzędzia deweloperskie w Chrome w wersji starszej niż 112. W nowszych wersjach panel Style obsługuje 12 nowych przestrzeni kolorów i 7 nowych przestrzeni kolorów ze specyfikacji poziomu kolorów CSS 4 oraz funkcję color-mix() z poziomu kolorów CSS 5.

Aby dowiedzieć się więcej o nowych przestrzeniach kolorów, zapoznaj się z Przewodnikiem po kolorach CSS w wysokiej rozdzielczości.

Otwórz selektor kolorów i zmień kolory

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

1. W panelu Elementy wybierz element.

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

   Po lewej stronie każdej wartości color lub *-color znajduje się mała kwadratowa ikona z podglądem tego koloru.

   

   Uwaga: ten przykład pokazuje 2 przecięte okręgi obok funkcji color-mix(): . Skrzyżowanie jest podglądem wynikowego koloru.

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

1. Kliknij kwadrat podglądu obok koloru, aby otworzyć selektor kolorów.
2. Aby zmienić kolor, użyj dowolnego elementu interfejsu selektora kolorów.

Elementy selektora kolorów

Poniżej znajdziesz opis poszczególnych elementów interfejsu selektora kolorów:

1. Cienie.
2. Zakraplacz. Przeczytaj artykuł Próbkowanie koloru w dowolnym miejscu za pomocą zakraplacza.
3. Kopiuj do schowka. Skopiuj do schowka Wartość wyświetlaną.
4. Wyświetlana wartość. Argumenty wybranej przestrzeni kolorów.
5. Współczynnik kontrastu. Dostępne tylko dla wartości color. Jest różnicą między color a background-color.
6. Paleta kolorów. Kliknij kwadrat, aby zmienić jego kolor na jego kolor.
7. Granica Gamut Ta linia jest dostępna tylko w przypadku nowych przestrzeni kolorów i funkcji color(). Mogą odtwarzać zarówno kolory HD, jak i inne niż HD. Ta linia pozwala odróżnić jakość od HD.
8. Kolor kołowy. Aby zmienić wyświetlaną wartość, przeciągnij to kółko na cienie.
9. Suwak barw.
10. Suwak przezroczystości.
11. Przełącznik wartości wyświetlania. Wybierz przestrzeń kolorów z listy. Zobacz Konwertowanie kolorów.
    Uwaga: możesz też otworzyć menu bezpośrednio, przytrzymując Shift i klikając ikonę podglądu koloru obok wartości koloru.
12. Zwiększ współczynnik kontrastu. Otwiera odpowiednią sekcję, w której można użyć opcji Popraw kontrast.

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

    • Paleta Material Design.
    • Paleta Niestandardowa. Aby ręcznie dodać bieżący kolor do tej palety, kliknij .
    • Paleta Zmienne CSS. Wyświetla na stronie wszystkie niestandardowe zmienne CSS (z załącznikiem --).
    • Paleta Kolorów 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. Otworzy się lista.

   Uwaga: możesz też kliknąć Przełącznik wartości wyświetlania 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).

   Albo jeden z nowych pokoi:

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

   lub spacji definiowaną przez funkcję color(<color_space> X X X).

Konwertuj kolory

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

Uwaga: podczas konwertowania z formatu HD na format inny niż HD narzędzie DevTools dopasowuje gamadę do dostępnego miejsca i oznacza obcięte wartości za pomocą ikon ostrzeżeń .

Najedź na nią kursorem, 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 w odniesieniu do odpowiednich wartości background-color. Dlatego tylko wartości color mają 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 z wytycznymi:

   • Kliknij obok wskazówki.
   • W podglądzie Cienie u góry przeciągnij Koło koloru poniżej odpowiedniej linii.

Uwaga: domyślnie w narzędziu Selektor kolorów należy przestrzegać wytycznych WebAIM. Możesz też ustawić sugerowanie wartości zgodnych z APCA: W Ustawienia > Eksperymenty zaznacz Włącz nowy zaawansowany algorytm kontrastu percepcyjnego (APCA)...

Listę wszystkich problemów z kontrastem znajdziesz w przewodniku Zwiększanie czytelności witryny.

Próbkowanie koloru w dowolnym miejscu 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 wyłączyć, naciśnij Escape.
2. Gdy Zakraplacz jest aktywny, najedź kursorem na kolor docelowy i kliknij, aby pobrać próbkę.

Uwaga: Zakraplacz próbkuje kolory tylko w przestrzeni kolorów sRGB. Gdy wykonujesz próbkę poza tą przestrzenią, Zakraplacz przycina obraz do najbliższego koloru. Zobacz Konwertowanie kolorów.

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