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 graficzny do zmiany deklaracji color i *-color oraz umożliwia tworzenie, konwertowanie i debugowanie kolorów niebędących w standardzie HD oraz kolorów HD za pomocą jednego kliknięcia.

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

Otwórz selektor kolorów i zmień kolory.

Aby zmienić wartości kolorów, kliknij Selektor kolorów:

1. W panelu Elementy wybierz element.

2. W panelu Style odszukaj 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ść, użyj panelu Obliczona.

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

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

1. Cienie.
2. Eyedropper. Zobacz, jak pobrać próbkę koloru za pomocą pipety.
3. Kopiuj do schowka. Skopiuj wartość wyświetlaną do schowka.
4. Wyświetlana wartość. Argumenty wybranej przestrzeni kolorów.
5. Współczynnik kontrastu. Dostępne tylko w przypadku wartości color. Różnica między color a background-color.
6. Paleta kolorów. Kliknij kwadrat, aby zmienić jego kolor.
7. Granica gamutu. Ta linia jest dostępna tylko w przypadku nowych przestrzeni kolorów i funkcji color(). Mogą one generować kolory w jakości HD i nie HD. Linia pozwala odróżnić jakość HD od jakości bez HD.
8. Kółko kolorów. Przeciągnij to kółko po wskaźnikach, aby zmienić wartość wyświetlaną.
9. Suwak odcienia.
10. Suwak nieprzezroczystości.
11. Przełącznik wartości wyświetlania. Wybierz przestrzeń barw z listy. Zobacz Konwertowanie kolorów.
12. Zwiększ współczynnik kontrastu. Otwiera odpowiednią sekcję, w której możesz poprawić kontrast.

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

    • Material Design – paleta projektowa.
    • Paleta niestandardowa. Aby ręcznie dodać bieżący kolor do tej palety, kliknij .
    • Paleta Zmiennych CSS. Wyświetla na stronie wszystkie niestandardowe zmienne CSS (z dodatkiem --).
    • Paleta Kolory strony. Aby wygenerować tę paletę, DevTools wyszukuje wszystkie kolory w Twoich arkuszach stylów.

Wybierz przestrzeń barw

Aby wybrać przestrzeń barw:

1. Naciśnij Shift i kliknij ikonę podglądu obok wartości koloru. Otworzy się menu.

   

2. Wybierz jeden z tych modeli kolorów:

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

   Albo jeden z nowych pokojów:

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

   Może to być też przestrzeń zdefiniowana przez funkcję color(<color_space> X X X).

Konwertowanie kolorów

Gdy przełączysz się między przestrzeniami kolorów za pomocą przełącznika wartości wyświetlania, DevTools automatycznie przekonwertuje wartości.

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

Następny film pokazuje konwersje w akcji.

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

3. Użyj sugerowanego koloru, który jest zgodny z wytycznymi:

   • Kliknij  obok wytycznych.
   • W sekcji Odcienie u góry przeciągnij kółko kolorów pod odpowiednią linię.

Aby uzyskać listę wszystkich problemów z kontrastem, postępuj zgodnie z instrukcjami podanymi w artykule o zwiększaniu czytelności witryny.

Pobieranie próbki koloru za pomocą pipety

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ć narzędzie Eyedropper. Aby dezaktywować, naciśnij Escape.
2. Gdy aktywne jest narzędzie zakraplacza, najedź kursorem na wybrany kolor i kliknij, aby pobrać próbkę.

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.