Эта страница переведена с помощью Cloud Translation API.

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

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

Преобразовать цвета

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

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

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

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

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

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

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

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

По умолчанию палитра цветов предлагает значения, соответствующие стандарту APCA .

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

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

С помощью пипетки выберите цвет в любом месте.

Он Функция «Пипетка» позволяет выбирать цвета как со страницы, так и из любой точки экрана.

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

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

В этом примере палитра цветов отображает текущее значение цвета rgb(224 255 255 / 15%) . Этот цвет меняется на розовый, как только вы щелкаете за пределами Chrome.

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

Преобразовать цвета

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

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

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

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

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

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

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

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

По умолчанию палитра цветов предлагает значения, соответствующие стандарту APCA .

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

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

С помощью пипетки выберите цвет в любом месте.

Он Функция «Пипетка» позволяет выбирать цвета как со страницы, так и из любой точки экрана.

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

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

В этом примере палитра цветов отображает текущее значение цвета rgb(224 255 255 / 15%) . Этот цвет меняется на розовый, как только вы щелкаете за пределами Chrome.

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

Преобразовать цвета

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

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

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

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

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

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

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

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

По умолчанию палитра цветов предлагает значения, соответствующие стандарту APCA .

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

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

С помощью пипетки выберите цвет в любом месте.

Он Функция «Пипетка» позволяет выбирать цвета как со страницы, так и из любой точки экрана.

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

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

В этом примере палитра цветов отображает текущее значение цвета rgb(224 255 255 / 15%) . Этот цвет меняется на розовый, как только вы щелкаете за пределами Chrome.