Конвертер
цветов
Нажмите, чтобы выбрать
HEX
RGB
HSL
CSS
R200
G0
B42
H347°
S100%
L39%
Форматы цвета в вебе
Цвет в вебе можно записать в нескольких форматах — они все описывают одно и то же, но по-разному. HEX — компактен и универсален, используется везде. RGB — понятен разработчикам, удобен для манипуляций в JavaScript. HSL — наиболее интуитивен для дизайнеров: легко управлять яркостью и насыщенностью.
Все три формата поддерживаются во всех современных браузерах и CSS-препроцессорах. Выбор формата — вопрос удобства и соглашений команды.
HEXСамый популярный
#c8002a · #C8002A · #f00
Шестнадцатеричная запись трёх байт:
#RRGGBB. Каждая пара — значение канала от 00 до FF. Краткая форма #RGB раскрывается в #RRGGBB: #f00 = #ff0000. Регистр не важен. Поддерживает прозрачность: #RRGGBBAA.RGBДля JS и Canvas
rgb(200, 0, 42) · rgba(200, 0, 42, 0.5)
Три канала: Red, Green, Blue — каждый от 0 до 255. Форма
rgba() добавляет четвёртый параметр — прозрачность от 0 (полностью прозрачный) до 1 (непрозрачный). Удобен для вычислений и анимаций в JavaScript.HSLДля дизайнеров
hsl(348, 100%, 39%) · hsla(348, 100%, 39%, 0.8)
Hue (оттенок) — угол на цветовом круге, 0–360°. Saturation (насыщенность) — 0% серый, 100% чистый цвет. Lightness (светлота) — 0% чёрный, 50% цвет, 100% белый. Легко создавать светлые/тёмные варианты — просто меняйте L.
Когда что использовать
Дизайн-система → HSL · Фигма/скетч → HEX · Код → любой
HEX — стандарт дизайн-передачи, копируется из Figma. RGB — для динамических стилей в JavaScript, Canvas, SVG-фильтров. HSL — для дизайн-токенов и систем, где нужно управлять вариантами:
--color-500, --color-600.Диапазоны значений
| Формат | Компоненты | Диапазон | Пример |
|---|---|---|---|
| HEX | RR GG BB (AA) | 00–FF на канал | #c8002a |
| RGB | R, G, B (A) | 0–255; альфа 0–1 | rgb(200, 0, 42) |
| HSL | H, S, L (A) | 0–360°; 0–100%; альфа 0–1 | hsl(348, 100%, 39%) |
| HWB | H, W, B | 0–360°; 0–100%; 0–100% | hwb(348 0% 22%) |
Стандартные CSS-цвета
В CSS определено 148 именованных цветов — от red до rebeccapurple. Их можно использовать напрямую в стилях: color: cornflowerblue. Нажмите на любой цвет, чтобы загрузить его в конвертер.
Красные
indianred
lightcoral
salmon
darksalmon
lightsalmon
crimson
red
firebrick
darkred
Розовые
pink
lightpink
hotpink
deeppink
mediumvioletred
palevioletred
Оранжевые
coral
tomato
orangered
darkorange
orange
Жёлтые
gold
yellow
lightyellow
lemonchiffon
papayawhip
moccasin
peachpuff
palegoldenrod
khaki
darkkhaki
goldenrod
darkgoldenrod
Зелёные
greenyellow
chartreuse
lawngreen
lime
limegreen
palegreen
lightgreen
mediumspringgreen
springgreen
mediumseagreen
seagreen
forestgreen
green
darkgreen
yellowgreen
olivedrab
olive
darkolivegreen
mediumaquamarine
darkseagreen
lightseagreen
darkcyan
teal
Синие и голубые
aqua
cyan
lightcyan
paleturquoise
aquamarine
turquoise
mediumturquoise
darkturquoise
cadetblue
steelblue
lightsteelblue
powderblue
lightblue
skyblue
lightskyblue
deepskyblue
dodgerblue
cornflowerblue
mediumslateblue
royalblue
blue
mediumblue
darkblue
navy
midnightblue
Фиолетовые
lavender
thistle
plum
violet
orchid
fuchsia
magenta
mediumorchid
mediumpurple
blueviolet
darkviolet
darkorchid
darkmagenta
purple
indigo
slateblue
darkslateblue
rebeccapurple
Коричневые
cornsilk
blanchedalmond
bisque
navajowhite
wheat
burlywood
tan
rosybrown
sandybrown
peru
chocolate
saddlebrown
sienna
brown
maroon
Белые и серые
white
snow
honeydew
mintcream
azure
aliceblue
ghostwhite
whitesmoke
seashell
beige
oldlace
floralwhite
ivory
antiquewhite
linen
lavenderblush
mistyrose
gainsboro
lightgray
silver
darkgray
gray
dimgray
lightslategray
slategray
darkslategray
black