Функции в CSS - это, с одной стороны уже привычные способы назначения цвета или получения url изображения для оформления фона блока или маркера списка, но также возможности расчета некоторых величин или получения переменных. В этой статье мы рассмотрим некоторые практические примеры использования функций в CSS для управления цветом.
Назначение цвета - rgb(), rgba(), hsl(), hsla(), lch(), oklch()
Для назначения цвета в CSS существует несколько функций.
Функция rgb()
Достаточно давно в CSS появилась функция rgb(), которая позволяла указывать цвет по 3-м каналам Red, Green, Blue в виде числовых значений от 0 до 255. Однако, кроме rgb() давно используются шестнадцатеричные коды типа #a12cf34 или #c3f, в которых каждые 2 цифры-буквы соответствуют также каналам Red, Green, Blue. То есть системы цвета, представленные функцией rgb() и шестнадцатеричные кодом по сути одинаковы, но визуально отличаются друг от друга. На самом деле браузер представляет цвет именно в формате rgb().
Ниже вы можете поэкспериментировать с цветами, получив значение в виде функции rgb() или в виде16-ричного hex-кода.
See the Pen Color Picker by Dario Corsi (@dariocorsi) on CodePen.
Кроме rgb() шестнадцатеричного кода есть еще цветовые форматы в виде функций hsl(), lch(), а также их разновидности в формате hsla() и rgba() с alpha-каналом от 0 до 1.
RGBA Color Picker от Jordan тоже можно использовать:
See the Pen Simple RGBA Color Picker by Jordan (@flyingcar) on CodePen.
Функция hsl()
Итак, мы имеем 2 различные «обертки» одной и той же фундаментальной идеи: передача определенных значений для каналов красного, зеленого и синего. Однако есть и другой формат, знакомый по Figma или Photoshop, например, - это цветовой формат HSL (hue-saturation-lightness).
"Переводится" его аббревиатура так:
- Hue, или Оттенок: это пигмент, который мы хотим использовать. Допустимые значения находятся в диапазоне от 0 до 360. Мы указываем его в градусах, поскольку шкала круговая (
0degи360degсоответствует тому же оттенку красного). - Saturation, или Насыщенность: насколько пигмента содержится в цвете? Допустимые значения: от
0%до100%. При0%пигмента в цвете нет, и он полностью серый. При 100% цвет максимально яркий. - Lightness, или Яркость: насколько светлый/тёмный цвет? Допустимые значения: от
0%до100%. При0%цвет — угольно-чёрный. При100%цвет — чисто-белый.
Самое интересное, что все цветовые форматы, которые мы видели до сих пор, существуют уже много-много лет. HSL поддерживался даже в Internet Explorer 9 (выпущенном в 2011 году)!
HSLA color picker представлен ниже.
See the Pen HSLA color picker by HTML-plus (@ambassador) on CodePen.
Все рассмотренные нами форматы цвета — rgb(), шестнадцатеричные коды и hsl()— ограничены «стандартным цветовым пространством RGB», обычно сокращённо обозначаемым как sRGB .
Функция lch()
В HSL насыщенность варьируется от 0% (нет насыщенности) до 100% (полная насыщенность). Это возможно, поскольку мы знаем, что речь идёт о цветовом пространстве sRGB — конечной палитре цветов. Однако есть еще один формат определения цвета -LCH, который означает «Lightness Chroma Hue» (яркость, цветность, оттенок). «Chroma» — это, по сути, синоним «saturation» (насыщенность). Концептуально он очень похож на HSL, но имеет два существенных отличия:
- Приоритет отдается человеческому восприятию, поэтому два цвета с одинаковым значением параметра "яркость" будут ощущаться одинаково светлыми.
- Он не привязан к какому-либо конкретному цветовому пространству.
На данный момент эта функция имеет довольно хорошую поддержку в браузерах. Также сейчас уже можно использовать такую функцию управления цветом, как oklch().
Вы можете попробовать изменения в цвете на основе функции lch() в LCH Color Picker от lch.oklch.com либо в примере ниже.
See the Pen Color Picker Wheel (LCH color space) by HTML-plus (@ambassador) on CodePen.
Функция oklch()
А в примере ниже можно "поиграться" с выбором цвета и различных оттенков для основных и вспомогательных элеменов вашей страницы. Автор примера Aman.
See the Pen OKLCH Color picker by Aman (@amanfromsolan-the-looper) on CodePen.
Подробнее о назначении цвета с помощью разных форматов можно прочитать в отдельной статье (англ.)
Функция calc()
Функция calc() в CSS используется для математических вычислений: можно складывать, вычитать, умножать или делить значения с разными единицами — пиксели, проценты, em, vw, и даже углы или числа внутри цветовых функций.
Хотя calc() не может напрямую изменять HEX- или RGB-цвет, она прекрасно работает внутри HSL, где цвет задаётся через три параметра: hsl(<hue>, <saturation>, <lightness>)
А значит, можно динамически управлять, например, яркостью или оттенком через calc(). Например, мы можем изменить насыщенность фона кнопки при наведении с помощью функции calc() так, как это делает функция darken() в SCSS.
See the Pen button color with calc() by HTML-plus (@ambassador) on CodePen.
Либо применим css-переменные и calc() для изменения цвета текста.
See the Pen Untitled by HTML-plus (@ambassador) on CodePen.
Рассмотрим также вариант с изменением цвета фона для body за счет изменения значения яркости вычислением через calc():
See the Pen Change body color by HTML-plus (@ambassador) on CodePen.
Функция color()
Функция color() — это CSS-функция для задания цветов в любом цветовом пространстве.
Синтаксис: color(<цветовое пространство> <значение1> <значение2> ... [ / <альфа> ] )
где:
<цветовое пространство>— пространство, в котором задаются компоненты. Например:srgb— стандартный sRGB (обычные RGB-цвета)display-p3— более широкий диапазон цветов (HDR, богатые цвета)lab— модель LAB (более естественные переходы)lch— модель LCH (оттенок, насыщенность, яркость)oklab, oklch— новые цветовые пространства, приближенные к человеческому восприятию
<значение1>, <значение2>, ...— компоненты цвета (например,R, G, BдляsRGBилиL, a, bдляLAB)[ / <альфа> ]— необязательная альфа-прозрачность (0–1 или %)
Примеры использования:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* sRGB */ p { color: color(srgb 0.5 0.2 0.7); /* R=0.5, G=0.2, B=0.7 */ } /* sRGB с прозрачностью */ p { color: color(srgb 0.5 0.2 0.7 / 0.5); /* 50% прозрачность */ } /* LAB */ p { color: color(lab 60 20 10); /* L=60, a=20, b=10 */ } /* LCH */ p { color: color(lch 70 50 270); /* Light=70, Chroma=50, Hue=270° */ } /* oklab */ p { color: color(oklab 0.7 0.1 0.1 / 0.8); } |
Преимущества:
- Больше контроля над восприятием цвета: пространства
lab, lch, oklabпозволяют создавать более естественные градиенты и смешения по сравнению с RGB. - Прозрачность через альфа: можно задавать прозрачность внутри функции.
- Будущее CSS:
color()совместим сcolor-mix(), color-contrast(), calc()и другими современными функциями работы с цветом.
У этой функции есть пока один жирный минус - браузеры Chrome, Firefox, Safari пока либо частично поддерживают только srgb, либо совсем не поддерживают другие пространства (lab, lch, oklab). То есть реальный рендер браузером элементов с использованием этого значения часто требует конвертации в пространство sRGB для браузеров, потому что именно sRGB — «де-факто» стандарт для экранов.
Пример:
See the Pen color() example by HTML-plus (@ambassador) on CodePen.
Функция color-mix()
Функция color-mix() — это часть нового набора цветовых функций, появившихся в CSS Color Module Level 5. Она позволяет смешивать два цвета прямо в CSS, задавая цветовое пространство и пропорции смешивания — как если бы вы мешали краски на палитре.
Тема color-mix() в CSS сейчас действительно актуальна, ведь это современная возможность работать с цветами “по-настоящему” нативно, без препроцессоров вроде Sass.
Практическое применение color-mix()
- Создание цветовых тем: динамически варьировать оттенки в светлой и тёмной темах.
- Ховеры и состояния кнопок: плавно изменять цвет без ручного подбора.
- Генерация градиентов: смешивать цвета для гармоничных переходов.
- Стилизация иконок или SVG: менять цвет под фон или тему сайта.
Синтаксис:
| 1 | color-mix(in <color-space>, <color1> <percentage>?, <color2> <percentage>?) |
где:
in <color-space>— обязательный параметр, указывает, в каком цветовом пространстве выполняется смешивание.
Примеры:srgb, display-p3, hsl, lab, lch.<color1>и<color2>— цвета для смешивания.<percentage>— необязательный параметр, задаёт долю каждого цвета. Если не указано, оба цвета берутся по 50%.
Важно: Если сумма процентов не равна 100%, CSS автоматически нормализует их пропорционально.
Примеры кода с color-mix():
background-color: color-mix(in srgb, red, blue); - красный и синий в пространстве srgb
Результат: фиолетовый оттенок, примерно равный #800080.
background-color: color-mix(in srgb, red 75%, blue); - взять 75% красного и 25% синего.
Результат — более тёплый пурпурный цвет.
Пример в HSL:
background: color-mix(in hsl, hsl(120 100% 50%), hsl(0 100% 50%) 40%);
Пример в LAB:
background: color-mix(in lab, blue, yellow);
Можно смешивать и прозрачные цвета — альфа-канал учитывается.
color: color-mix(in srgb, rgba(255, 0, 0, 0.5), white); - использование прозрачных цветов
LAB работает ближе к человеческому восприятию цвета — смесь будет выглядеть более гармоничной, чем в sRGB.
Можно также микшировать с чёрным или белым, чтобы получить эффект осветления/затемнения. Раньше для этого использовали rgba() или opacity. Теперь можно проще:
| 1 2 3 4 5 | /* Осветлить синий */ color: color-mix(in srgb, blue, white 30%); /* Затемнить зелёный */ color: color-mix(in srgb, green, black 40%); |
Это естественная альтернатива таким приёмам, как функции lighten() и darken() из препроцессора Sass.
Еще один вариант - использование css-переменных:
| 1 2 3 4 5 6 7 8 | :root { --brand-color: #1e90ff; --accent-color: #ff4081; } button { background: color-mix(in srgb, var(--brand-color), var(--accent-color) 25%); } |
Так можно создавать динамические цветовые палитры и темы.
Можно даже комбинировать с другими функциями, например:
color: color-mix(in srgb, color(display-p3 1 0 0), currentColor 50%);
Или смешивать с currentColor, чтобы адаптировать оттенок текста к текущему контексту.
Попробуйте смешать цвета в примере ниже.
See the Pen CSS color-mix() Playground by HTML-plus (@ambassador) on CodePen.
Еще один вариант смешивания цветов от Adam Argyle:
See the Pen Interactive CSS color-mix() by Adam Argyle (@argyleink) on CodePen.
Примеры использования функции color-mix()
Изменение при использовании псевдокласса :hover
Пример 1
See the Pen hover-effect with color-mix() by HTML-plus (@ambassador) on CodePen.
Пример 2
See the Pen Button effect on :hover/ :focus by HTML-plus (@ambassador) on CodePen.
Изменение темы сайта/страницы от Jhey
See the Pen Blueprint Theme Toggle w/ View Transitions by Jhey (@jh3y) on CodePen.
Изменение цвета элементов страницы от Ryan Trimble
See the Pen CSS color-mix() Demo by Ryan Trimble (@mrtrimble) on CodePen.
Палитра цветов от Stuart Robson
See the Pen Quick and Dirty Colour Palettes using color-mix() by Stuart Robson (@sturobson) on CodePen.
Изменение цвета в зависимости от темы и css-переменных
See the Pen Dynamic Theme Generator with smooth transitions by HTML-plus (@ambassador) on CodePen.
