28. RGB, HSL, HWB, LAB, LCH

CSS: RGB, HSL, HWB, LAB, LCH – Цвет в деталях

Добро пожаловать на урок, посвященный продвинутым цветовым моделям в CSS! Мы углубимся в способы определения цветов, выходящие за рамки привычных названий и шестнадцатеричных кодов. Рассмотрим RGB, HSL, HWB, LAB и LCH, чтобы получить полный контроль над цветом на ваших веб-страницах.

RGB (Red, Green, Blue)

RGB – это аддитивная цветовая модель, в которой цвета создаются путем смешивания красного, зеленого и синего. Каждый компонент имеет значение от 0 до 255.

body {
  background-color: rgb(255, 0, 0); /* Красный */
  color: rgb(0, 255, 0); /* Зеленый */
}

.element {
  background-color: rgb(0, 0, 255); /* Синий */
}

/* Прозрачность с помощью rgba */
.transparent-element {
  background-color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}

HSL (Hue, Saturation, Lightness)

HSL описывает цвет через оттенок (Hue), насыщенность (Saturation) и светлоту (Lightness). Оттенок измеряется в градусах (0-360), насыщенность и светлота – в процентах (0-100%).

body {
  background-color: hsl(0, 100%, 50%); /* Красный */
  color: hsl(120, 100%, 50%); /* Зеленый */
}

.element {
  background-color: hsl(240, 100%, 50%); /* Синий */
}

/* Прозрачность с помощью hsla */
.transparent-element {
  background-color: hsla(0, 100%, 50%, 0.5); /* Полупрозрачный красный */
}

HWB (Hue, Whiteness, Blackness)

HWB – это цветовая модель, основанная на оттенке (Hue), белизне (Whiteness) и черноте (Blackness). Оттенок измеряется в градусах (0-360), белизна и чернота – в процентах (0-100%).

body {
  background-color: hwb(0 0% 0%); /* Красный */
}

.element {
  background-color: hwb(240 0% 0%); /* Синий */
}

.grey-element {
  background-color: hwb(0 0% 100%); /* Черный */
}

LAB и LCH (CIELAB и CIELCH)

LAB и LCH – это цветовые модели, разработанные для более точного представления человеческого восприятия цвета. LAB состоит из L (Lightness – светлота), A (зелено-красная ось) и B (сине-желтая ось). LCH – это цилиндрическая версия LAB, состоящая из L (Lightness), C (Chroma – насыщенность) и H (Hue – оттенок). Они обеспечивают более равномерное восприятие изменений цвета.

body {
  background-color: lab(50% 100 0); /* Ярко-красный */
}

.element {
  background-color: lch(50% 100 0); /* Ярко-красный */
}

.another-element {
    background-color: lch(70% 60 300); /* Фиолетовый */
}

Жизненный пример

Многие дизайн-системы и фреймворки используют HSL и LAB/LCH для создания цветовых палитр. Например, при создании тем для пользовательского интерфейса, удобно использовать HSL для изменения оттенка, насыщенности или светлоты, чтобы создать различные варианты одного и того же цвета. LAB и LCH используются для обеспечения консистентности восприятия цвета, особенно при работе с accessibility. Различные инструменты для работы с цветом (например, палитры в Figma, Adobe Color) поддерживают эти цветовые модели.

Ключевые моменты

• RGB: Простота, но не всегда интуитивно понятна для создания гармоничных цветовых схем.
• HSL: Более интуитивно понятна для создания цветовых схем, так как позволяет легко регулировать оттенок, насыщенность и светлоту.
• HWB: Удобна для создания оттенков серого и осветления/затемнения цвета.
• LAB и LCH: Обеспечивают более точное представление человеческого восприятия цвета, особенно важны для accessibility и создания консистентных цветовых палитр.
• Понимание различных цветовых моделей позволяет более гибко и эффективно управлять цветом в ваших проектах.

Интерактивный пример