Что такое HEX, RGB и HSL? Простыми словами о цветовых моделях

Схема цветовых моделей RGB, CMYK, HSL

Когда вы пользуетесь пипеткой, программа выдает вам код цвета в одном из форматов: HEX, RGB или HSL. Для новичка эти обозначения могут показаться тарабарщиной. На самом деле, это просто разные языки описания одного и того же цвета. Понимание этих моделей поможет вам точно подбирать и комбинировать оттенки в своих проектах.

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.

Наш онлайн-инструмент «Пипетка» показывает цвет сразу во всех трех форматах, чтобы вы могли использовать тот, который нужен именно вам.