Точный справочник цветов
HEX-цвета, форматы и контраст для практической работы.
Проверяйте значения, контрастность и готовые форматы без аккаунтов, воды и выдуманных значений цвета.
- 01HEX, RGB, HSL, HWB и OKLCH
- 02Контраст с чёрным и белым текстом
- 03Тинты, затемнения и готовый CSS
Популярные исходные цвета CSS
Начните с часто используемых цветов.
Небольшая проверенная подборка по опубликованной статистике CSS-ключевых слов, а не заявление о текущем поисковом спросе.
Коллекция с указанным источником
Сравните коллекции цветов с указанными источниками.
Выберите один из трёх тщательно проверенных справочников.
Выберите исходный цвет
Откройте цвет и сразу используйте его.
В каждой карточке есть готовые HEX, RGB, HSL, HWB и OKLCH, проверка контраста текста, тинты, затемнения и небольшая заготовка CSS.
Поиск охватывает все опубликованные цвета, включая полезные справочные страницы, намеренно исключённые из поискового индекса.
Сначала показаны проверенные индексируемые цвета. Остальные опубликованные цвета доступны через поиск и дальнейший просмотр каталога.
Выберите одну проверенную коллекцию или в любой момент вернитесь ко всему опубликованному каталогу.
Показаны цвета 1–24 из 4 188 опубликованных.
Избранные руководства
Методики, которые стоит держать под рукой.
Три проверенных практических руководства. Это редакционная подборка, а не рейтинг популярности.
Альфа-канал и прозрачность цвета в CSS
Разбор alpha в CSS: восьмизначный HEX, функциональная запись, transparent, свойство opacity, композитинг и проверка итогового контраста.
10 мин чтения Читать →Сравнение цветовКак рассчитывается ближайшее имя цвета CSS
Как сравнить цвет с фиксированным набором именованных цветов CSS, почему метрика меняет победителя и почему найденное ключевое слово остаётся приближением, а не истинным названием.
10 мин чтения Читать →Цветовые токены CSSКак организовать небольшую систему цветов через CSS-переменные
Практическая небольшая система цветов на CSS custom properties: семантические токены, каскад, область, фолбэки, темы и проверки контраста.
10 мин чтения Читать →От значения к решению
Используйте цвет без лишних догадок.
Откройте любой цвет, сравните форматы, выберите читаемый текст, изучите светлые и тёмные варианты и скопируйте результат в CSS.
Скопируйте нужный формат
HEX, RGB, HSL, HWB и перцептивный OKLCH показаны рядом — можно переносить цвет между дизайн-инструментами и CSS без ручного пересчёта.
Проверьте контраст текста
Сравните чёрный и белый текст на выбранном фоне и посмотрите, какие пороги WCAG проходит каждая пара.
Соберите практичную палитру
Возьмите расчётные тинты, затемнения, связи по цветовому кругу и варианты прозрачности, а затем скопируйте готовый блок CSS-переменных.