Hex, RGB, HSL: Быстрое руководство для всех остальных
Цветовые коды, расшифрованные для разработчиков и не-дизайнеров, которым просто нужен нужный оттенок синего.
Дизайнер отправляет тебе цвет: #3B82F6. Тебе нужен он в RGB для какой-то библиотеки. Или ты хочешь немного более тёмную версию. Или ты пытаешься понять, почему он выглядит по-другому на твоём мониторе.
Цветовые системы не сложные, но никто не объясняет их хорошо. Вот что тебе действительно нужно знать.
HEX: Веб-стандарт
#3B82F6 разбивается так:
3B= Красный (59 в десятичной системе)82= Зелёный (130 в десятичной системе)F6= Синий (246 в десятичной системе)
Каждая пара — это шестнадцатеричное число от 00 до FF (0-255 в десятичной). Больше = ярче. #000000 — чёрный. #FFFFFF — белый.
Существует сокращённая форма: #FFF = #FFFFFF, #09C = #0099CC. Три символа расширяются до шести путём удвоения каждого.
RGB: Очевидный вариант
rgb(59, 130, 246) — тот же цвет, просто записанный по-другому. Красный 59, Зелёный 130, Синий 246.
Некоторые форматы хотят проценты: rgb(23%, 51%, 96%). То же самое, другая нотация.
RGBA добавляет прозрачность: rgba(59, 130, 246, 0.5) — этот синий с 50% непрозрачностью.
HSL: Действительно полезный вариант
hsl(217, 91%, 60%) описывает цвет по-другому:
- Hue / Оттенок (217): Позиция на цветовом круге. 0=красный, 120=зелёный, 240=синий.
- Saturation / Насыщенность (91%): Интенсивность. 0%=серый, 100%=яркий.
- Lightness / Яркость (60%): Светлота. 0%=чёрный, 50%=чистый, 100%=белый.
Почему HSL важен: настройка цветов интуитивна.
Хочешь более тёмную версию? Уменьши яркость. Хочешь приглушённую версию? Уменьши насыщенность. Хочешь совершенно другой цвет с тем же "ощущением"? Измени оттенок, сохрани насыщенность и яркость.
В HEX или RGB эти настройки требуют математики или угадывания. В HSL это изменения одного числа.
Конвертация между форматами
Числа представляют один и тот же цвет по-разному. #3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%).
Используй конвертер, когда нужен конкретный формат. Большинство инструментов дизайна показывают все три. CSS принимает все три.
Частые ситуации
"Сделай этот цвет темнее" Конвертируй в HSL, уменьши яркость на 10-20%, конвертируй обратно.
"Мне нужны вариации для состояний наведения" Конвертируй в HSL. Кнопка: 60% яркости. Наведение: 55%. Активная: 50%.
"Этот цвет выглядит блёклым" Насыщенность может быть слишком низкой. Попробуй увеличить её в HSL.
"Точно соответствуй фирменному цвету" Получи hex-код из брендбука. Не определяй на глаз.
"Цвет выглядит по-разному на разных экранах" Добро пожаловать в ад калибровки цвета. Используй тот же hex-код; смирись, что мониторы различаются.
Заметка о доступности
Контраст цвета имеет значение. Светлый текст на светлом фоне = нечитаемо для многих людей.
Есть коэффициент: 4.5:1 для обычного текста, 3:1 для большого текста. Существуют инструменты для проверки этого. В случае сомнений больше контраста — лучше.
Белый текст на этом синем #3B82F6? Коэффициент контраста около 4.6:1 — едва проходит. Более тёмный синий был бы безопаснее для основного текста.
Тебе не нужно быть дизайнером. Тебе просто нужно конвертировать между форматами и знать, что HSL делает настройки проще. Всё остальное — детали.