Проверка и отладка цветов HD и неHD с помощью палитры цветов.

Jecelyn Yeen

Sofia Emelianova

Палитра цветов предоставляет графический интерфейс для изменения объявлений color и *-color , а также позволяет создавать, преобразовывать и отлаживать цвета не-HD и HD одним щелчком мыши.

Ключевой момент: в этом видеоролике показана версия Chrome DevTools, предшествующая версии 112. В более поздних версиях панель «Стили» поддерживает 12 новых цветовых пространств и 7 новых гамм из спецификации CSS Color Level 4 , а также функцию color-mix() из CSS Color Level 5. .

Подробное описание новых цветовых пространств см. в Руководстве по цветам CSS высокого разрешения .

Откройте палитру цветов и измените цвета.

Используйте палитру цветов , чтобы изменить значения цвета одним щелчком мыши:

1. Выберите элемент на панели «Элементы» .

2. На панели «Стили» найдите объявление color или *-color которое вы хотите изменить.

   Слева от каждого color или значения *-color находится небольшой квадратный значок с предварительным просмотром этого цвета.

   

   Примечание. В этом примере показаны два пересекающихся круга рядом с функцией color-mix() : . Пересечение — это предварительный просмотр полученного цвета.

Чтобы проверить вычисленное значение, используйте панель «Вычисляемые» .

1. Нажмите квадрат предварительного просмотра рядом с цветом, чтобы открыть палитру цветов .
2. Чтобы изменить цвет, используйте любой из элементов пользовательского интерфейса палитры цветов .

Элементы выбора цвета

Вот описание каждого из элементов пользовательского интерфейса палитры цветов :

1. Оттенки .
2. Пипетка . См. раздел Образец цвета в любом месте с помощью пипетки .
3. Скопировать в буфер обмена . Скопируйте отображаемое значение в буфер обмена.
4. Отображаемое значение . Аргументы выбранного цветового пространства.
5. Контрастность . Доступно только для значений color . Это разница между color и background-color .
6. Цветовая палитра . Щелкните квадрат, чтобы изменить цвет на цвет квадрата.
7. Граница гаммы . Эта строка доступна только для новых цветовых пространств и функции color() . Они могут воспроизводить цвета как HD, так и не HD. Линия позволяет различать HD и неHD.
8. Цветовой круг . Перетащите этот кружок через оттенки, чтобы изменить отображаемое значение.
9. Ползунок оттенка .
10. Ползунок непрозрачности .
11. Переключатель отображаемого значения . Выберите цветовое пространство из раскрывающегося списка. См. Преобразование цветов .
    Примечание. Чтобы открыть раскрывающееся меню напрямую, удерживайте нажатой клавишу Shift и щелкните значок предварительного просмотра цвета рядом со значением цвета.
12. Увеличьте коэффициент контрастности . Открывает соответствующий раздел, позволяющий исправить контраст .

13. Переключатель цветовой палитры . Нажмите на нее, чтобы переключиться между:

    • Палитра Material Design .
    • Пользовательская палитра. Чтобы вручную добавить текущий цвет в эту палитру, нажмите кнопку .
    • Палитра CSS-переменных . Перечисляет все пользовательские переменные CSS (с добавлением -- ) на вашей странице.
    • Палитра цветов страницы . Чтобы создать эту палитру, DevTools ищет все цвета в ваших таблицах стилей.

Выберите цветовое пространство

Чтобы выбрать цветовое пространство:

1. Удерживая клавишу Shift, щелкните значок предварительного просмотра рядом со значением цвета. Откроется раскрывающийся список.

   Примечание. Альтернативно нажмите переключатель «Отображать значение» в палитре цветов .

   

2. Выберите одно из следующих цветовых пространств:

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

   Или одно из новых пространств:

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

   Или пространство, определенное функцией color(<color_space> XXX) .

Преобразование цветов

Когда вы переключаетесь между цветовыми пространствами с помощью переключателя значений отображения , DevTools автоматически преобразует значения.

Внимание: при преобразовании из HD в не-HD DevTools обрезает гаммы, чтобы они соответствовали пространству, и помечает обрезанные значения значком. предупреждающие значки.

Наведите курсор на значок, чтобы увидеть исходное значение.

В следующем видео показаны конверсии в действии.

Исправить контраст

Ключевой момент: Палитра цветов вычисляет коэффициенты контрастности только для значений color и относительно соответствующих значений background-color . Таким образом, только значения color имеют разделы «Коэффициент контрастности» .

Чтобы устранить проблему контрастности для объявления color :

1. Откройте палитру цветов рядом со значением color .
2. Расширьте коэффициент контрастности раздел.

3. Используйте предложенный цвет, соответствующий рекомендациям:

   • Нажмите рядом с руководством.
   • В предварительном просмотре «Оттенки» вверху перетащите цветовой кружок под соответствующую линию.

Примечание. По умолчанию палитра цветов предлагает вам следовать рекомендациям WebAIM . Альтернативно вы можете настроить его так, чтобы он предлагал значения, соответствующие APCA : Настройки > Эксперименты , проверьте Включить новый алгоритм расширенного перцептивного контраста (APCA)...

Чтобы получить список всех проблем с контрастностью за один раз, следуйте руководству «Сделайте свой веб-сайт более читабельным» .

Возьмите образец цвета в любом месте с помощью пипетки.

Eyedropper может брать образцы цветов как со страницы, так и из любого места экрана.

Чтобы выбрать цвет в любом месте экрана:

1. Откройте палитру цветов и выполните одно из следующих действий:
   • Нажмите кнопку кнопка.
   • Нажмите C , чтобы активировать Пипетку . Для деактивации нажмите Escape .
2. При активной пипетке наведите указатель мыши на целевой цвет и щелкните образец.

Примечание. Пипетка производит выборку цветов только в цветовом пространстве sRGB. Когда вы берете образец за пределами этого пространства, «Пипетка» обрезает цвет до ближайшего. См. Преобразование цветов .