Цвета в вебе: HEX, RGB и HSL простыми словами
Три способа записать цвет
HEX (#157A54) — компактная шестнадцатеричная запись, привычная в CSS. RGB задаёт цвет долями красного, зелёного и синего. HSL описывает цвет через тон, насыщенность и светлоту — им удобнее «крутить» оттенки вручную. Это разные записи одного и того же цвета, и они легко переводятся друг в друга.
Когда какой формат удобнее
HEX — для быстрого копирования из макета. RGB с альфой (rgba) — когда нужна прозрачность. HSL — когда надо сделать цвет светлее/темнее или подобрать гармоничную палитру, меняя один параметр. В современном CSS поддерживаются все три.
Не забудьте про контраст
Красивый цвет бесполезен, если текст на нём не читается. Стандарт доступности WCAG требует контраста не ниже 4.5:1 для обычного текста. Проверить пару «текст/фон» поможет «Проверка контраста», подобрать палитру — «Генератор палитры», а перевести цвет между форматами — «Конвертер цветов».
Инструменты из статьи
Перейдите и сразу попробуйте — всё работает бесплатно в браузере.