Названия Цветов CSS Онлайн
Полный справочник всех 148 именованных цветов CSS — с HEX, RGB, HSL и мгновенной конвертацией.
Showing 148 colors
Бесплатный справочник
148 именованных цветов CSS — полный справочник
Все 148 цветов
Полный справочник всех именованных цветов CSS, определённых в CSS Color Level 4.
HEX, RGB и HSL
Смотрите эквиваленты HEX, RGB и HSL каждого именованного цвета для использования в CSS.
Контраст WCAG
Проверяйте, соответствует ли каждый цвет требованиям доступности WCAG 2.1 AA и AAA.
Мгновенное копирование
Кликните любое значение, чтобы скопировать его прямо в буфер обмена.
Как это работает
Три шага — никаких сложностей
Ищите по имени цвета или значению
Введите имя CSS-цвета (например, 'tomato', 'rebeccapurple', 'cornflowerblue') или его значение HEX/RGB — и сразу найдите его в справочной таблице.
Смотрите эквивалентные значения
Для каждого именованного цвета CSS получите шестизначное значение HEX, компоненты RGB (0–255), значения HSL и коэффициент контраста WCAG.
Скопируйте нужное значение
Кликните любое значение, чтобы скопировать его в буфер обмена. Используйте прямо в CSS, Figma, Tailwind или любом дизайн-инструменте.
FAQ
Остались вопросы?
Спецификация W3C CSS Color Level 4 определяет ровно 148 именованных цветов, включая специальный 'transparent' (аналог rgba(0,0,0,0)) и псевдоним 'rebeccapurple' (добавлен в 2014 году в честь Ребекки Мейер, дочери CSS-автора Эрика Мейера, умершей в возрасте 6 лет). Остальные 146 названий пришли из системы цветов X11 Массачусетского технологического института, стандартизированной W3C в CSS2.1 (1998) и подтверждённой в CSS3.
Цвета X11 восходят к файлу rgb.txt X Window System server (MIT X Consortium, 1985). Список был первоначально составлен Полом Равелингом из Института информационных наук Университета Южной Калифорнии на основе системы Resene Colours из Новой Зеландии. Когда W3C начал определять стандарты CSS в 1994–1996 годах, принятие системы именования X11 было естественным выбором. Отсюда и курьёзные названия вроде 'blanchedalmond', 'papayawhip', 'peachpuff' и 'cornsilk' — они позаимствованы из названий американских десертов и текстильных материалов, популярных в 1980-х.
Именованные цвета CSS идеальны для: быстрого прототипирования и демо-кода, где читаемость важнее точности; учебного кода, где описательные имена помогают понять смысл (background: lightgray читается лучше, чем background: #d3d3d3); временных значений при отладке; случаев, когда точный цвет может варьироваться в разных браузерах. Для продакшена предпочтительны значения HEX или HSL: они явные, не требуют знания списка имён и легче изменяются программно.
WCAG 2.1 W3C определяет минимальные коэффициенты контраста для читаемого текста. Уровень AA (юридический минимум во многих юрисдикциях) требует соотношения 4,5:1 для обычного текста и 3:1 для крупного (18pt+). Уровень AAA (отличное качество) — 7:1 для обычного текста. Многие именованные цвета CSS не отвечают этим требованиям: 'yellow' (#FFFF00) на белом фоне даёт соотношение 1,07:1, тогда как 'black' (#000000) на белом — 21:1. Цвета 'navy', 'darkgreen', 'maroon' и 'midnightblue' обеспечивают хороший контраст на белом фоне.
CSS Color Level 4 вводит продвинутые функции, далеко выходящие за пределы 148 именованных цветов. oklch() и oklab() — перцептуально равномерные цветовые пространства, где одинаковое числовое изменение производит одинаковое визуальное изменение. color-mix() позволяет смешивать два цвета: color-mix(in oklch, blue 30%, red) даёт перцептуально естественную смесь. Функции display-p3 и rec2020 открывают доступ к расширенной гамме современных HDR-дисплеев с более чем 25% дополнительных цветов по сравнению со sRGB. Поддержка в браузерах растёт с 2022–2023 годов.
7 июня 2014 года Ребекка Элисия Мейер, 6-летняя дочь Эрика А. Мейера (соучредителя рабочей группы CSS, автора книг 'CSS: The Definitive Guide' и создателя CSS Reset), умерла от глиобластомы. В день её смерти сообщество CSS предложило назвать цвет #663399 (фиолетовый — её любимый) 'rebeccapurple' в её честь. Предложение было одобрено рабочей группой CSS и добавлено в спецификацию CSS Color Level 4 14 июня 2014 года. Это единственный CSS-цвет, добавленный по эмоциональным и гуманитарным причинам, и единственный среди 148 с задокументированной личной историей, не унаследованной от системы X11.
История цветов CSS: от X11 (MIT, 1985) до CSS Color Level 4, WCAG 2.1 и oklch
История именованных цветов в CSS началась в 1985 году в лаборатории компьютерных наук MIT с разработкой X Window System. Файл rgb.txt в X11 R3 (выпущен в 1988 году) содержал первый стандартизированный список цветов по названию для графических интерфейсов на Unix-системах. Когда W3C начал определять стандарты CSS в 1994–1996 годах, принятие системы именования X11 было естественным выбором. CSS1 (1996) определял лишь 16 именованных цветов. CSS2.1 расширил список до 147 цветов X11 плюс 'orange'. CSS Color Level 4 добавил 'rebeccapurple' в 2014 году, достигнув нынешних 148. Полную спецификацию можно найти в репозитории W3C CSS Working Group на GitHub.
148 именованных цветов CSS содержат технические и исторические любопытства, которые полезно знать каждому веб-разработчику. Примечательное несоответствие: 'lime' (#00FF00) против 'green' (#008000) — в CSS 'green' не является чистым RGB-зелёным, а представляет тёмно-зелёный при 50% интенсивности, тогда как 'lime' — чистый RGB-зелёный. Цвета 'aqua' и 'cyan' — идеальные синонимы (#00FFFF), как и 'fuchsia' с 'magenta' (#FF00FF). 'rebeccapurple' имеет значение #663399, эквивалентное rgb(102, 51, 153) или hsl(270, 50%, 40%). Для доступной веб-разработки именованные цвета CSS с наибольшим контрастом на белом фоне: 'black' (21:1), 'navy' (13,87:1), 'darkgreen' (9,53:1) и 'maroon' (5,88:1).
В контексте современной веб-разработки именованные цвета CSS остаются актуальными, но должны пониматься в рамках более широкой экосистемы цветовых спецификаций. CSS Color Level 4 вводит модель oklch (Oklab-based Lightness Chroma Hue), устраняющую ограничения HSL: в HSL два цвета с одинаковой светлотой L, но разным оттенком H выглядят различной яркости (жёлтый кажется намного ярче синего при одинаковом L), тогда как oklch перцептуально равномерен. В Tailwind CSS 4.0 (выпущен в 2025 году) стандартная цветовая палитра была переопределена с использованием oklch, заменив HEX-значения предыдущих версий. По данным Can I Use, oklch поддерживается в Chrome 111+, Firefox 113+ и Safari 15.4+, охватывая более 90% мировых пользователей в 2024 году.