Работа с цветом

Онлайн-инструмент для работы с цветом в вёрстке. Конвертер цветов переводит значения между форматами CSS: HEX, RGB, HSL, HWB и OKLCH, с учётом прозрачности. Цвет можно подобрать на палитре, взять пипеткой с экрана или вставить готовое значение.

Удачные цвета сохраняются в собственный набор и выгружаются в CSS-переменные или JSON, а проверка контраста показывает, читается ли текст на выбранном фоне по требованиям доступности WCAG уровней AA и AAA.

Как пользоваться
  • Нажмите или протяните указатель по полю, чтобы задать насыщенность и яркость; ползунки меняют тон и прозрачность. Поле работает и с клавиатуры: стрелки меняют значение, с Shift — крупным шагом.
  • В любое поле формата можно вставить цвет в любой записи: #f80, rgb(255 136 0 / 50%), hsl(32, 100%, 50%), oklch(75% 0.18 60) или имя вроде tomato. Неверное значение подсвечивается, прежний цвет сохраняется.
  • Кнопка с пипеткой берёт цвет из любого места экрана, в том числе из других окон. Она появляется в браузерах, которые это поддерживают: Chrome, Edge, Opera на компьютере.
  • Текущий цвет записывается в адрес страницы, поэтому ссылкой можно поделиться.
  • «Запомнить цвет» добавляет его в набор. Цветам можно дать названия. Набор хранится только в этом браузере; в разделе «Экспорт и импорт» его можно выгрузить в CSS-переменные или JSON и загрузить обратно.

Конвертер цветов

Форматы цвета в CSS
  • HEX — шестнадцатеричная запись #RRGGBB, восьмизначная #RRGGBBAA добавляет прозрачность.
  • RGB — интенсивность красного, зелёного и синего каналов от 0 до 255.
  • HSL — тон (угол на цветовом круге), насыщенность и светлота. Удобно получать более светлые и тёмные варианты цвета.
  • HWB — тон и доли белого и чёрного; так описывают цвет в привычных палитрах выбора.
  • OKLCH — светлота, насыщенность (хрома) и тон в перцептивно равномерном пространстве: при одинаковой светлоте цвета выглядят одинаково светлыми. Не каждое сочетание значений помещается в охват экрана sRGB — тогда инструмент покажет ближайший доступный цвет и предупредит об этом.

Подробнее о способах задания цвета читайте в статьях «HTML цвета» и «Цветовое оформление в CSS»; таблица именованных цветов собрана на странице «HTML цвета по категориям».

Сохранённые цвета

Пока пусто. Нажмите «Запомнить цвет», и он появится здесь. Цвета хранятся только в этом браузере.

    Экспорт и импорт
    Экспорт

    Контраст текста и фона

    Текст#245A85

    Крупный текст 24px

    Обычный текст 16px. Съешь же ещё этих мягких французских булок.

    7.30 : 1

    • ДаAA, обычный текст (от 4.5:1)
    • ДаAA, крупный текст (от 3:1)
    • ДаAAA, обычный текст (от 7:1)
    • ДаAAA, крупный текст (от 4.5:1)

    Что означает контраст

    Контраст — отношение яркостей текста и фона, от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Рекомендации WCAG 2.x требуют для уровня AA не меньше 4.5:1 для обычного текста и 3:1 для крупного (от 24px или от 18,66px полужирным), для уровня AAA — 7:1 и 4.5:1. Полупрозрачный цвет текста сначала накладывается на фон. Расчёт не заменяет проверку реального интерфейса: на восприятие влияют толщина шрифта, размер и окружение.