Полупрозрачный чёрный
Затемнение поверх картинки часто делают чёрным с альфой. Тот же цвет в HEX — #00000080, в RGB — rgba(0 0 0 / 0.5). Альфа никуда не теряется.
ПресетСтраница примера инструмента
Полупрозрачный чёрный — поля заполнены примером, их можно менять. Настройки уедут в ссылку «Поделиться», а заголовок страницы и вкладки описывают исходный пресет, а не текущие поля.
Любая запись: #3399ff, rgb(51 153 255),hsl(210 100% 60%) или CSS-имя вроде tomato. Поддерживаются сокращённый hex (#39f), альфа и проценты.
Палитра заменяет ручной ввод: выбранный цвет появляется в поле выше и разбирается так же. «Случайный цвет» — быстрый способ начать с нуля.
Необязательное поле: заполните, если два цвета будут использоваться вместе — например текст этого цвета на фоне того. Тогда ниже появится блок «Контраст WCAG» с коэффициентом и оценками AA/AAA для обычного и крупного текста.
Превью и форматы
- HEX
- HEX с альфой
- RGB
- HSL
- OKLCH
- Ближайшее CSS-имя
Контраст WCAG
- Коэффициент
- Обычный текст
- Крупный текст
AA — обычный текст ≥ 4.5, крупный ≥ 3. AAA — обычный ≥ 7, крупный ≥ 4.5.
Гармонии
Схемы по цветовому кругу с тем же тоном, что базовый. Нажмите на образец — HEX скопируется.
Оттенки и тона
Шкала к белому слева и к чёрному справа, базовый цвет в центре. Нажмите — скопируется HEX.
Как читать
HEX— шестнадцатеричная запись: удобна для конфигов и дизайн-систем. С альфой — 8 цифр (#rrggbbaa).rgb()— каналы 0..255; четвёртое значение — прозрачность 0..1. Хороша для инлайн-стилей.hsl()— оттенок в градусах, насыщенность и яркость в процентах. Удобна для тем: менять яркость проще, чем цифры.- Ближайшее CSS-имя — подсказка: выбирает из 148 стандартных имён по евклидову расстоянию, чтобы было чем назвать оттенок в разговоре.
Последние цвета
Разобранные цвета хранятся в истории этого браузера (localStorage) и попадают в экспорт на странице «Закладки». Цвет — не секрет: в ссылку шеринга он не попадает никогда.
Готовые примеры
Найдено: 5 из 5
- #FF0000 — это красныйОдин и тот же красный во всех форматах: HEX #ff0000, rgb(255 0 0) и hsl(0 100% 50%). Удобно, когда нужен тот же цвет в инлайн-стиле и в теме.
- Небесно-голубой через HSLHSL удобен для тем: насыщенность и яркость править проще, чем шестнадцатеричные цифры. Тул показывает тот же цвет как #36a9f5 и rgb(54 169 245).
- Полупрозрачный чёрныйЗатемнение поверх картинки часто делают чёрным с альфой. Тот же цвет в HEX — #00000080, в RGB — rgba(0 0 0 / 0.5). Альфа никуда не теряется.
- Чёрный #000000Самый тёмный цвет: HEX #000000, rgb(0 0 0) и hsl(0 0% 0%). Точка отсчёта для шкал оттенков и контраста — любой цвет на чёрном фоне проверяется по WCAG.
- Белый #ffffffСамый светлый цвет: HEX #ffffff, rgb(255 255 255) и hsl(0 0% 100%). Точка отсчёта для шкал тонов и контраста — любой цвет на белом фоне проверяется по WCAG.