Цвета HTML: коды HEX, RGB и CMYK

Что такое цвета HTML

Цвета HTML — это 140 названий, которые браузер понимает без кода: red, coral, teal, rebeccapurple и другие. Их можно писать в CSS вместо HEX-кода, и цвет будет одинаковым во всех браузерах.

Самые первые 16 цветов появились ещё в HTML 4: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal и aqua. Остальные добавил стандарт CSS.

Как задать цвет в CSS

Один и тот же цвет можно записать четырьмя способами:

color: coral;
color: #FF7F50;
color: rgb(255, 127, 80);
color: hsl(16, 100%, 66%);

Для прозрачности добавь четвёртое значение: rgb(255 127 80 / 50%) или восьмизначный HEX #FF7F5080.

HEX, RGB, HSL и CMYK: что выбрать

• HEX — короткая запись для сайтов, Figma и брендбуков: #E52284.
• RGB — те же три канала света, но числами от 0 до 255.
• HSL — тон, насыщенность и светлота. Удобно делать цвет светлее или темнее одним числом.
• CMYK — краски для печати. Перевод здесь упрощённый: для типографии сверяй цвет с её профилем.

Контраст текста

Под конвертером видно, как цвет смотрится с белым и чёрным текстом, и коэффициент контраста по WCAG. Для обычного текста нужно не меньше 4,5 : 1, для крупного заголовка хватит 3 : 1.

Если контраст не дотягивает, сдвинь светлоту в HSL или подбери соседний цвет в таблице.