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

Jecelyn Yeen

Sofia Emelianova

Selektor kolorów udostępnia interfejs GUI do zmiany deklaracji color i *-color oraz umożliwia tworzenie, konwertowanie i debugowanie kolorów innych niż HD i HD za pomocą jednego kliknięcia.

Więcej informacji o nowych przestrzeniach kolorów znajdziesz w przewodniku po kolorach CSS w wysokiej rozdzielczości.

Otwieranie selektora kolorów i zmienianie kolorów

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

1. Wybierz element w panelu Elementy.

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.

   

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. Odcienie
2. Zakraplacz. Zobacz Pobieranie próbki koloru z dowolnego miejsca za pomocą zakraplacza.
3. Kopiuj do schowka. Skopiuj wartość wyświetlaną do schowka.
4. Wyświetl wartość Argumenty wybranej przestrzeni kolorów.
5. Współczynnik kontrastu. Dostępne tylko w przypadku wartości color. Jest to różnica między color a background-color.
6. Paleta kolorów. Kliknij kwadrat, aby zmienić kolor na kolor tego kwadratu.
7. Granica gamy Ten wiersz jest dostępny tylko w przypadku nowych przestrzeni kolorów i funkcji color(). Mogą one generować kolory HD i inne. Linia pozwala odróżnić HD od innych formatów.
8. Koło kolorów. Przeciągnij ten okrąg po odcieniach, aby zmienić wartość wyświetlaną.
9. Suwak odcienia.
10. Suwak przezroczystości.
11. Przełącznik wartości wyświetlanej. Wybierz przestrzeń kolorów z listy. Zobacz Konwertowanie kolorów.
12. Zwiększanie współczynnika kontrastu. Otwiera odpowiednią sekcję, w której możesz poprawić kontrast.

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

    • Paleta Material Design.
    • Paleta Niestandardowa. Aby ręcznie dodać bieżący kolor do tej palety, kliknij .
    • Paleta Zmienne CSS. Wyświetla listę wszystkich niestandardowych zmiennych CSS (z dodanym symbolem --) na stronie.
    • palety Kolory strony. Aby wygenerować tę paletę, Narzędzia deweloperskie wyszukują wszystkie kolory w arkuszach stylów.

Wybierz przestrzeń kolorów

Aby wybrać przestrzeń kolorów:

1. Naciśnij Shift i kliknij ikonę podglądu obok wartości koloru. Otworzy 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).

   Możesz też wybrać 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 obszar zdefiniowany przez funkcję color(<color_space> X X X).

Konwertowanie kolorów

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

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

Na następnym filmie zobaczysz konwersje w praktyce.

Popraw kontrast

Aby rozwiązać problem z kontrastem w przypadku 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:

   • Obok wytycznych kliknij .
   • W podglądzie Odcienie u góry przeciągnij kółko koloru poniżej odpowiedniej linii.

Domyślnie selektor kolorów sugeruje wartości zgodne z APCA.

Możesz też ustawić, aby sugerował wartości zgodne z wytycznymi WebAIM. W Ustawieniach > Preferencje > Elementy odznacz pole wyboru Zaawansowany algorytm kontrastu percepcyjnego (APCA)....

Aby uzyskać listę wszystkich problemów z kontrastem, postępuj zgodnie z instrukcjami w artykule Zwiększanie czytelności witryny.

Pobieranie koloru w dowolnym miejscu za pomocą zakraplacza

Pipeta może pobierać próbki kolorów 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, najechać kursorem na kolor docelowy i kliknąć, aby go pobrać.

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