#ff0000
Red
red
rgb(255, 0, 0)
hsl(0, 100%, 50%)
Справочник именованных цветов CSS
Ищите, фильтруйте и копируйте все 148 именованных цветов CSS с их значениями HEX, RGB и HSL. Фильтруйте по 12 цветовым семействам — красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый, розовый, коричневый, белый, серый и чёрный. Нажмите любую кнопку копирования, чтобы мгновенно скопировать имя цвета, HEX или значение RGB. Полностью конфиденциально, 100 % бесплатно и без регистрации.
CSS Named Colors Reference
Search, filter, and copy all 146 CSS named colors. Click any copy button to copy the color name, HEX, or RGB value to your clipboard instantly.
Showing 146 of 146 CSS named colors
CSS Color Level 4
#8b0000
Dark Red
darkred
rgb(139, 0, 0)
hsl(0, 100%, 27%)
#b22222
Firebrick
firebrick
rgb(178, 34, 34)
hsl(0, 68%, 42%)
#dc143c
Crimson
crimson
rgb(220, 20, 60)
hsl(348, 83%, 47%)
#cd5c5c
Indian Red
indianred
rgb(205, 92, 92)
hsl(0, 53%, 58%)
#f08080
Light Coral
lightcoral
rgb(240, 128, 128)
hsl(0, 79%, 72%)
#fa8072
Salmon
salmon
rgb(250, 128, 114)
hsl(6, 93%, 71%)
#e9967a
Dark Salmon
darksalmon
rgb(233, 150, 122)
hsl(15, 72%, 70%)
#ffa07a
Light Salmon
lightsalmon
rgb(255, 160, 122)
hsl(17, 100%, 74%)
#ff6347
Tomato
tomato
rgb(255, 99, 71)
hsl(9, 100%, 64%)
#ff4500
Orange Red
orangered
rgb(255, 69, 0)
hsl(16, 100%, 50%)
#ffa500
Orange
orange
rgb(255, 165, 0)
hsl(39, 100%, 50%)
#ff8c00
Dark Orange
darkorange
rgb(255, 140, 0)
hsl(33, 100%, 50%)
#ff7f50
Coral
coral
rgb(255, 127, 80)
hsl(16, 100%, 66%)
#ffff00
Yellow
yellow
rgb(255, 255, 0)
hsl(60, 100%, 50%)
#ffd700
Gold
gold
rgb(255, 215, 0)
hsl(51, 100%, 50%)
#ffffe0
Light Yellow
lightyellow
rgb(255, 255, 224)
hsl(60, 100%, 94%)
#fffacd
Lemon Chiffon
lemonchiffon
rgb(255, 250, 205)
hsl(54, 100%, 90%)
#fafad2
Light Goldenrod Yellow
lightgoldenrodyellow
rgb(250, 250, 210)
hsl(60, 80%, 90%)
#ffefd5
Papaya Whip
papayawhip
rgb(255, 239, 213)
hsl(37, 100%, 92%)
#ffe4b5
Moccasin
moccasin
rgb(255, 228, 181)
hsl(38, 100%, 85%)
#ffdab9
Peach Puff
peachpuff
rgb(255, 218, 185)
hsl(28, 100%, 86%)
#eee8aa
Pale Goldenrod
palegoldenrod
rgb(238, 232, 170)
hsl(55, 67%, 80%)
#f0e68c
Khaki
khaki
rgb(240, 230, 140)
hsl(54, 77%, 75%)
#bdb76b
Dark Khaki
darkkhaki
rgb(189, 183, 107)
hsl(56, 38%, 58%)
#008000
Green
green
rgb(0, 128, 0)
hsl(120, 100%, 25%)
#006400
Dark Green
darkgreen
rgb(0, 100, 0)
hsl(120, 100%, 20%)
#00ff00
Lime
lime
rgb(0, 255, 0)
hsl(120, 100%, 50%)
#32cd32
Lime Green
limegreen
rgb(50, 205, 50)
hsl(120, 61%, 50%)
#228b22
Forest Green
forestgreen
rgb(34, 139, 34)
hsl(120, 61%, 34%)
#2e8b57
Sea Green
seagreen
rgb(46, 139, 87)
hsl(146, 50%, 36%)
#8fbc8f
Dark Sea Green
darkseagreen
rgb(143, 188, 143)
hsl(120, 25%, 65%)
#3cb371
Medium Sea Green
mediumseagreen
rgb(60, 179, 113)
hsl(147, 50%, 47%)
#20b2aa
Light Sea Green
lightseagreen
rgb(32, 178, 170)
hsl(177, 70%, 41%)
#00ff7f
Spring Green
springgreen
rgb(0, 255, 127)
hsl(150, 100%, 50%)
#00fa9a
Medium Spring Green
mediumspringgreen
rgb(0, 250, 154)
hsl(157, 100%, 49%)
#adff2f
Green Yellow
greenyellow
rgb(173, 255, 47)
hsl(84, 100%, 59%)
#7fff00
Chartreuse
chartreuse
rgb(127, 255, 0)
hsl(90, 100%, 50%)
#7cfc00
Lawn Green
lawngreen
rgb(124, 252, 0)
hsl(90, 100%, 49%)
#9acd32
Yellow Green
yellowgreen
rgb(154, 205, 50)
hsl(80, 61%, 50%)
#6b8e23
Olive Drab
olivedrab
rgb(107, 142, 35)
hsl(80, 60%, 35%)
#808000
Olive
olive
rgb(128, 128, 0)
hsl(60, 100%, 25%)
#556b2f
Dark Olive Green
darkolivegreen
rgb(85, 107, 47)
hsl(82, 39%, 30%)
#98fb98
Pale Green
palegreen
rgb(152, 251, 152)
hsl(120, 93%, 79%)
#90ee90
Light Green
lightgreen
rgb(144, 238, 144)
hsl(120, 73%, 75%)
#66cdaa
Medium Aquamarine
mediumaquamarine
rgb(102, 205, 170)
hsl(160, 51%, 60%)
#00ffff
Cyan
cyan
rgb(0, 255, 255)
hsl(180, 100%, 50%)
#00ffff
Aqua
aqua
rgb(0, 255, 255)
hsl(180, 100%, 50%)
#008b8b
Dark Cyan
darkcyan
rgb(0, 139, 139)
hsl(180, 100%, 27%)
#008080
Teal
teal
rgb(0, 128, 128)
hsl(180, 100%, 25%)
#7fffd4
Aquamarine
aquamarine
rgb(127, 255, 212)
hsl(160, 100%, 75%)
#40e0d0
Turquoise
turquoise
rgb(64, 224, 208)
hsl(174, 72%, 56%)
#48d1cc
Medium Turquoise
mediumturquoise
rgb(72, 209, 204)
hsl(178, 60%, 55%)
#00ced1
Dark Turquoise
darkturquoise
rgb(0, 206, 209)
hsl(181, 100%, 41%)
#e0ffff
Light Cyan
lightcyan
rgb(224, 255, 255)
hsl(180, 100%, 94%)
#afeeee
Pale Turquoise
paleturquoise
rgb(175, 238, 238)
hsl(180, 65%, 81%)
#b0e0e6
Powder Blue
powderblue
rgb(176, 224, 230)
hsl(187, 52%, 80%)
#add8e6
Light Blue
lightblue
rgb(173, 216, 230)
hsl(195, 53%, 79%)
#0000ff
Blue
blue
rgb(0, 0, 255)
hsl(240, 100%, 50%)
#00008b
Dark Blue
darkblue
rgb(0, 0, 139)
hsl(240, 100%, 27%)
#000080
Navy
navy
rgb(0, 0, 128)
hsl(240, 100%, 25%)
#0000cd
Medium Blue
mediumblue
rgb(0, 0, 205)
hsl(240, 100%, 40%)
#4169e1
Royal Blue
royalblue
rgb(65, 105, 225)
hsl(225, 73%, 57%)
#6495ed
Cornflower Blue
cornflowerblue
rgb(100, 149, 237)
hsl(219, 79%, 66%)
#1e90ff
Dodger Blue
dodgerblue
rgb(30, 144, 255)
hsl(210, 100%, 56%)
#00bfff
Deep Sky Blue
deepskyblue
rgb(0, 191, 255)
hsl(195, 100%, 50%)
#87ceeb
Sky Blue
skyblue
rgb(135, 206, 235)
hsl(197, 71%, 73%)
#87cefa
Light Sky Blue
lightskyblue
rgb(135, 206, 250)
hsl(203, 92%, 75%)
#4682b4
Steel Blue
steelblue
rgb(70, 130, 180)
hsl(207, 44%, 49%)
#b0c4de
Light Steel Blue
lightsteelblue
rgb(176, 196, 222)
hsl(214, 41%, 78%)
#5f9ea0
Cadet Blue
cadetblue
rgb(95, 158, 160)
hsl(182, 25%, 50%)
#191970
Midnight Blue
midnightblue
rgb(25, 25, 112)
hsl(240, 64%, 27%)
#f0f8ff
Alice Blue
aliceblue
rgb(240, 248, 255)
hsl(208, 100%, 97%)
#e6e6fa
Lavender
lavender
rgb(230, 230, 250)
hsl(240, 67%, 94%)
#f8f8ff
Ghost White
ghostwhite
rgb(248, 248, 255)
hsl(240, 100%, 99%)
#f0ffff
Azure
azure
rgb(240, 255, 255)
hsl(180, 100%, 97%)
#800080
Purple
purple
rgb(128, 0, 128)
hsl(300, 100%, 25%)
#9400d3
Dark Violet
darkviolet
rgb(148, 0, 211)
hsl(282, 100%, 41%)
#9932cc
Dark Orchid
darkorchid
rgb(153, 50, 204)
hsl(280, 61%, 50%)
#8b008b
Dark Magenta
darkmagenta
rgb(139, 0, 139)
hsl(300, 100%, 27%)
#8a2be2
Blue Violet
blueviolet
rgb(138, 43, 226)
hsl(271, 76%, 53%)
#4b0082
Indigo
indigo
rgb(75, 0, 130)
hsl(275, 100%, 25%)
#6a5acd
Slate Blue
slateblue
rgb(106, 90, 205)
hsl(248, 53%, 58%)
#7b68ee
Medium Slate Blue
mediumslateblue
rgb(123, 104, 238)
hsl(249, 80%, 67%)
#483d8b
Dark Slate Blue
darkslateblue
rgb(72, 61, 139)
hsl(248, 39%, 39%)
#9370db
Medium Purple
mediumpurple
rgb(147, 112, 219)
hsl(260, 60%, 65%)
#663399
Rebecca Purple
rebeccapurple
rgb(102, 51, 153)
hsl(270, 50%, 40%)
#ee82ee
Violet
violet
rgb(238, 130, 238)
hsl(300, 76%, 72%)
#da70d6
Orchid
orchid
rgb(218, 112, 214)
hsl(302, 59%, 65%)
#ba55d3
Medium Orchid
mediumorchid
rgb(186, 85, 211)
hsl(288, 59%, 58%)
#dda0dd
Plum
plum
rgb(221, 160, 221)
hsl(300, 47%, 75%)
#d8bfd8
Thistle
thistle
rgb(216, 191, 216)
hsl(300, 24%, 80%)
#fff0f5
Lavender Blush
lavenderblush
rgb(255, 240, 245)
hsl(340, 100%, 97%)
#ff00ff
Magenta
magenta
rgb(255, 0, 255)
hsl(300, 100%, 50%)
#ff00ff
Fuchsia
fuchsia
rgb(255, 0, 255)
hsl(300, 100%, 50%)
#ff1493
Deep Pink
deeppink
rgb(255, 20, 147)
hsl(328, 100%, 54%)
#ff69b4
Hot Pink
hotpink
rgb(255, 105, 180)
hsl(330, 100%, 71%)
#ffc0cb
Pink
pink
rgb(255, 192, 203)
hsl(350, 100%, 88%)
#ffb6c1
Light Pink
lightpink
rgb(255, 182, 193)
hsl(351, 100%, 86%)
#db7093
Pale Violet Red
palevioletred
rgb(219, 112, 147)
hsl(340, 60%, 65%)
#c71585
Medium Violet Red
mediumvioletred
rgb(199, 21, 133)
hsl(322, 81%, 43%)
#ffe4e1
Misty Rose
mistyrose
rgb(255, 228, 225)
hsl(6, 100%, 94%)
#a52a2a
Brown
brown
rgb(165, 42, 42)
hsl(0, 59%, 41%)
#8b4513
Saddle Brown
saddlebrown
rgb(139, 69, 19)
hsl(25, 76%, 31%)
#a0522d
Sienna
sienna
rgb(160, 82, 45)
hsl(19, 56%, 40%)
#d2691e
Chocolate
chocolate
rgb(210, 105, 30)
hsl(25, 75%, 47%)
#cd853f
Peru
peru
rgb(205, 133, 63)
hsl(30, 59%, 53%)
#f4a460
Sandy Brown
sandybrown
rgb(244, 164, 96)
hsl(28, 87%, 67%)
#deb887
Burlywood
burlywood
rgb(222, 184, 135)
hsl(34, 57%, 70%)
#d2b48c
Tan
tan
rgb(210, 180, 140)
hsl(34, 44%, 69%)
#bc8f8f
Rosy Brown
rosybrown
rgb(188, 143, 143)
hsl(0, 25%, 65%)
#800000
Maroon
maroon
rgb(128, 0, 0)
hsl(0, 100%, 25%)
#f5deb3
Wheat
wheat
rgb(245, 222, 179)
hsl(39, 77%, 83%)
#ffdead
Navajo White
navajowhite
rgb(255, 222, 173)
hsl(36, 100%, 84%)
#ffe4c4
Bisque
bisque
rgb(255, 228, 196)
hsl(33, 100%, 88%)
#ffebcd
Blanched Almond
blanchedalmond
rgb(255, 235, 205)
hsl(36, 100%, 90%)
#fff8dc
Cornsilk
cornsilk
rgb(255, 248, 220)
hsl(48, 100%, 93%)
#fdf5e6
Old Lace
oldlace
rgb(253, 245, 230)
hsl(39, 85%, 95%)
#faf0e6
Linen
linen
rgb(250, 240, 230)
hsl(30, 67%, 94%)
#faebd7
Antique White
antiquewhite
rgb(250, 235, 215)
hsl(34, 78%, 91%)
#ffffff
White
white
rgb(255, 255, 255)
hsl(0, 0%, 100%)
#fffafa
Snow
snow
rgb(255, 250, 250)
hsl(0, 100%, 99%)
#f0fff0
Honeydew
honeydew
rgb(240, 255, 240)
hsl(120, 100%, 97%)
#f5fffa
Mint Cream
mintcream
rgb(245, 255, 250)
hsl(150, 100%, 98%)
#fffff0
Ivory
ivory
rgb(255, 255, 240)
hsl(60, 100%, 97%)
#fffaf0
Floral White
floralwhite
rgb(255, 250, 240)
hsl(40, 100%, 97%)
#fff5ee
Seashell
seashell
rgb(255, 245, 238)
hsl(25, 100%, 97%)
#f5f5dc
Beige
beige
rgb(245, 245, 220)
hsl(60, 56%, 91%)
#f5f5f5
White Smoke
whitesmoke
rgb(245, 245, 245)
hsl(0, 0%, 96%)
#808080
Gray
gray
rgb(128, 128, 128)
hsl(0, 0%, 50%)
#808080
Grey
grey
rgb(128, 128, 128)
hsl(0, 0%, 50%)
#a9a9a9
Dark Gray
darkgray
rgb(169, 169, 169)
hsl(0, 0%, 66%)
#a9a9a9
Dark Grey
darkgrey
rgb(169, 169, 169)
hsl(0, 0%, 66%)
#d3d3d3
Light Gray
lightgray
rgb(211, 211, 211)
hsl(0, 0%, 83%)
#d3d3d3
Light Grey
lightgrey
rgb(211, 211, 211)
hsl(0, 0%, 83%)
#c0c0c0
Silver
silver
rgb(192, 192, 192)
hsl(0, 0%, 75%)
#dcdcdc
Gainsboro
gainsboro
rgb(220, 220, 220)
hsl(0, 0%, 86%)
#696969
Dim Gray
dimgray
rgb(105, 105, 105)
hsl(0, 0%, 41%)
#696969
Dim Grey
dimgrey
rgb(105, 105, 105)
hsl(0, 0%, 41%)
#708090
Slate Gray
slategray
rgb(112, 128, 144)
hsl(210, 13%, 50%)
#708090
Slate Grey
slategrey
rgb(112, 128, 144)
hsl(210, 13%, 50%)
#778899
Light Slate Gray
lightslategray
rgb(119, 136, 153)
hsl(210, 14%, 53%)
#778899
Light Slate Grey
lightslategrey
rgb(119, 136, 153)
hsl(210, 14%, 53%)
#2f4f4f
Dark Slate Gray
darkslategray
rgb(47, 79, 79)
hsl(180, 25%, 25%)
#2f4f4f
Dark Slate Grey
darkslategrey
rgb(47, 79, 79)
hsl(180, 25%, 25%)
#000000
Black
black
rgb(0, 0, 0)
hsl(0, 0%, 0%)
Почему стоит использовать наш справочник именованных цветов CSS
- Мгновенный поиск по всем 148 цветам: Справочник именованных цветов CSS ищет в реальном времени по именам цветов, значениям HEX, RGB и HSL. Найдите любой цвет мгновенно, введя его имя, hex-код или значение RGB.
- Фильтр по цветовому семейству: Фильтруйте справочник по 12 семействам — красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый, розовый, коричневый, белый, серый и чёрный. Быстро просматривайте все цвета нужного оттенка.
- 100 % конфиденциально — без загрузок: Справочник именованных цветов CSS полностью работает в вашем браузере. Данные никогда не отправляются на сервер — безопасно для офлайн-использования и приватной работы над дизайном.
- Бесплатно и без ограничений: Просматривайте и копируйте неограниченное количество именованных цветов CSS без регистрации, подписки и лимитов. Справочник полностью бесплатен навсегда, без рекламы, перекрывающей интерфейс.
Типичные случаи использования справочника именованных цветов CSS
- Разработка CSS и HTML: Фронтенд-разработчики используют справочник именованных цветов CSS, чтобы быстро находить названия цветов для таблиц стилей CSS и атрибутов HTML. Копируйте точное имя цвета CSS, значение HEX или RGB одним кликом.
- Дизайн и прототипирование: Дизайнеры используют справочник, чтобы находить безопасные именованные цвета для макетов и прототипов. Фильтр по цветовому семейству упрощает просмотр всех оттенков синего, зелёного или красного сразу.
- Доступность и проверка контраста: Специалисты по доступности используют справочник, чтобы определить именованные цвета и затем проверить их коэффициенты контраста. Значения HEX и RGB можно вставлять напрямую в инструменты проверки контраста.
- Изучение CSS и веб-дизайна: Студенты и новички используют справочник, чтобы узнать, какие имена цветов существуют в CSS. Видеть реальный образец цвета рядом с именем помогает запомнить, какое имя какому цвету соответствует.
- Разработка шаблонов писем: Разработчики email-рассылок используют справочник, чтобы находить именованные цвета, безопасные в HTML-клиентах почты. Именованные цвета широко поддерживаются в клиентах, которые могут не понимать современные цветовые функции CSS.
- Документирование дизайн-систем: Команды дизайн-систем используют справочник, чтобы задокументировать, какие именованные цвета CSS применяются в их системе, и найти HEX-эквиваленты для дизайн-токенов и цветовых стилей Figma.
Что такое именованные цвета CSS?
Именованные цвета CSS — это предопределённые цветовые ключевые слова, которые можно использовать прямо в CSS, не указывая значение HEX, RGB или HSL. Например, color: cornflowerblue эквивалентно color: #6495ed. Спецификация CSS определяет 148 именованных цветов: от базовых вроде red и blue до более описательных, таких как rebeccapurple и papayawhip. Наш справочник именованных цветов CSS перечисляет все 148 с их эквивалентами в HEX, RGB и HSL.
Как работает наш справочник именованных цветов CSS
- Поиск по имени, HEX или RGB: Введите любую часть имени цвета (например, «blue», «coral»), значение HEX (например, «#ff7f50») или значение RGB, чтобы мгновенно отфильтровать справочник.
- Фильтр по цветовому семейству: Нажмите любую кнопку семейства — красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый, розовый, коричневый, белый, серый или чёрный, — чтобы показать только цвета этого семейства. Сочетайте с поиском для точной фильтрации.
- Копирование одним кликом: У каждой карточки цвета есть три кнопки копирования — имя, HEX и RGB. Нажмите любую, чтобы мгновенно скопировать значение в буфер обмена. Вся обработка выполняется локально в вашем браузере.
Что включает справочник именованных цветов CSS
- Имя цвета CSS: точное ключевое слово для использования в CSS (например, cornflowerblue).
- Значение HEX: шестизначный шестнадцатеричный эквивалент (например, #6495ed).
- Значение RGB: значения каналов красного, зелёного и синего (например, rgb(100, 149, 237)).
- Значение HSL: значения тона, насыщенности и светлоты (например, hsl(219, 79%, 66%)).
Замечания о дублирующихся цветах
Некоторые именованные цвета CSS полностью дублируют друг друга. Например, aqua и cyan соответствуют #00ffff, а fuchsia и magenta — #ff00ff. Точно так же gray и grey (и их варианты) идентичны. Справочник именованных цветов CSS включает все 148 официальных имён, в том числе эти дубликаты, поскольку оба написания допустимы в CSS.
Часто задаваемые вопросы
Справочник именованных цветов CSS — это доступный для поиска и фильтрации список всех 148 именованных цветов CSS с их значениями HEX, RGB и HSL. Можно искать по имени цвета, HEX или значению RGB, фильтровать по цветовому семейству и копировать любое значение одним кликом. Всё работает в вашем браузере, данные не отправляются на сервер.
Спецификация CSS Color Level 4 определяет 148 именованных цветов. Она включает 16 базовых цветов из HTML 4.01, 140 цветов X11, принятых в CSS2.1, и особый цвет «rebeccapurple», добавленный в CSS Color Level 4 в честь Ребекки Мейер.
Да. Все 148 именованных цветов CSS поддерживаются во всех современных браузерах, включая Chrome, Firefox, Safari, Edge и Opera. Они также работают в старых браузерах вплоть до IE9. Именованные цвета — одна из наиболее универсально поддерживаемых возможностей CSS.
Да. Справочник именованных цветов CSS на 100 % бесплатный: без регистрации, без премиум-функций и без ограничений использования. Просматривайте и копируйте неограниченное количество цветов без ограничений и скрытых платежей.
В спецификации CSS для ряда цветов указаны и американское (gray), и британское (grey) написание, и оба варианта допустимы в CSS. Аналогично «aqua» и «cyan» — одинаковые цвета с разными именами, как и «fuchsia» с «magenta». Справочник включает все 148 официальных имён, в том числе эти дубликаты.
Rebeccapurple (#663399) был добавлен в спецификацию CSS Color Level 4 в 2014 году в честь Ребекки Элисон Мейер, дочери борца за веб-стандарты Эрика Мейера, скончавшейся в день своего шестилетия. Это единственный именованный цвет CSS, названный в честь конкретного человека.
Tailwind CSS не использует именованные цвета CSS в своей палитре по умолчанию — у него собственная цветовая система с числовыми шкалами (например, blue-500). Однако можно применять именованные цвета CSS в произвольных значениях Tailwind: text-[cornflowerblue] или bg-[coral]. Также можно добавить именованные цвета в тему вашего tailwind.config.js.
Нет. Имена цветов CSS не чувствительны к регистру. «CornflowerBlue», «cornflowerblue» и «CORNFLOWERBLUE» одинаково допустимы и равнозначны. Общепринятый стиль — нижний регистр, именно так их и показывает справочник именованных цветов CSS.