HEX (#RRGGBB) — язык веб-разработки
HEX (шестнадцатеричный) — это самый популярный формат в веб-дизайне. Выглядит он как решетка и шесть символов: #4287f5. По сути, это сокращенная запись модели RGB, только цифры переведены в другую систему счисления.
Как его читать? Код делится на три пары:
- Первая пара (
42) — интенсивность красного (Red). - Вторая пара (
87) — интенсивность зеленого (Green). - Третья пара (
f5) — интенсивность синего (Blue).
Где используется: в CSS-стилях сайтов, в графических редакторах, в нашем сервисе «Пипетка онлайн». Это стандарт для указания цвета в коде.
RGB (Red, Green, Blue) — как устроен экран
RGB описывает цвет как результат смешения трех лучей света. Записывается так: rgb(66, 135, 245). Каждое число — это значение от 0 до 255, где 0 — нет света (черный), а 255 — максимальная яркость.
Принцип работы: Если смешать красный (255) с зеленым (255), получится желтый. Если смешать все три цвета на полную мощность (255, 255, 255) — получится белый. Отсутствие всех цветов (0, 0, 0) — черный. Эта модель идеально описывает работу мониторов и телевизоров.
HSL (Hue, Saturation, Lightness) — интуитивно понятный формат
HSL — самая человеко-понятная модель. Она описывает цвет тремя параметрами: hsl(217, 90%, 61%).
- Hue (Оттенок): Положение на цветовом круге. Измеряется в градусах от 0 до 360. 0° — красный, 120° — зеленый, 240° — синий.
- Saturation (Насыщенность): Интенсивность цвета. От 0% (серый) до 100% (максимально сочный цвет).
- Lightness (Светлота): Насколько цвет светлый или темный. От 0% (черный) до 100% (белый).
Благодаря такой структуре, дизайнеру легко подобрать более светлый или более приглушенный оттенок, просто меняя значения Lightness и Saturation.
Таблица перевода цветов
Один и тот же цвет в разных моделях будет выглядеть вот так:
| Цвет | HEX | RGB | HSL |
|---|---|---|---|
| Оранжевый | #FF5733 |
rgb(255, 87, 51) |
hsl(11, 100%, 60%) |
| Зеленый | #33FF57 |
rgb(51, 255, 87) |
hsl(130, 100%, 60%) |
| Синий | #3357FF |
rgb(51, 87, 255) |
hsl(231, 100%, 60%) |
Какой формат выбрать?
Выбор зависит от задачи:
- Для вставки в код сайта проще всего использовать HEX.
- Для работы в Photoshop или Figma удобен RGB.
- Для создания гармоничных цветовых схем (например, по принципу комплементарности) лучше всего подходит HSL.
Наш онлайн-инструмент «Пипетка» показывает цвет сразу во всех трех форматах, чтобы вы могли использовать тот, который нужен именно вам.