Возможно, вы использовали CSS для изменения цвета элемента на веб-странице, но слышали ли вы что-нибудь о цветовых функциях CSS? Если нет, то из этой статьи узнаете нечто новое и крайне полезное!
Что такое цветовые функции CSS?
Цветовые функции CSS (CSS color functions) — это способ задания цвета в CSS при помощи математических функций, а не простого кода цвета. Функции обеспечивают больше контроля и гибкости при работе с цветами, используемыми в таблице стилей.
При помощи цветовых функций можно настраивать тон (hue), насыщенность (saturation), светлоту (lightness) и непрозрачность (opacity) цвета и даже смешивать вместе несколько цветов.
Существует множество функций CSS, давайте рассмотрим некоторые из них:
-
rgb()
: получает три значения, обозначающие красный, зелёный и синий компонент, и возвращает цвет. Значения могут находиться в интервале от 0 до 255. Пример:color: rgb(255, 0, 0)
возвращает красный цвет. -
rgba()
: схожа сrgb()
, но позволяет ещё и задавать непрозрачность цвета. Четвёртое значение (альфа) может находиться в интервале от 0 до 1. Пример:color: rgba(255, 0, 0, 0.5)
возвращает полупрозрачный красный цвет. -
hsl()
: получает три значения, обозначающие тон, насыщенность и светлоту, возвращает цвет. Пример:color: hsl(0, 100%, 50%)
возвращает красный цвет. -
hsla()
: схожа сhsl()
, но также позволяет задавать непрозрачность цвета. Пример:color: hsla(0, 100%, 50%, 0.5)
возвращает полупрозрачный красный цвет. -
mix()
: позволяет смешивать два цвета с опциональным параметром веса. Пример:color: mix(red, blue)
возвращает оттенок фиолетового.
Давайте изучим их подробнее.
▍ RGB()
Функция RGB — одна из самых часто используемых цветовых функций в CSS, и на то есть веские причины. Её легко понять и она даёт большую степень контроля над цветами веб-сайта.
Функция RGB получает три значения, каждый из которых обознчает яркость:
- Красного
- Зелёного
- Синего
Эти значения могут находиться в интервале от 0 до 255. Смешивая разные яркости красного, зелёного и синего, можно создавать любые цвета.
Пример:
-
Красный:
rgb(255, 0, 0)
-
Зелёный:
rgb(0, 255, 0)
-
Синий:
rgb(0, 0, 255)
div {
background-color: rgb(0, 255, 0);
}
/*всем элементам div задаётся зелёный цвет*/
▍ HSL()
Функция HSL схожа с функцией RGB, но вместо значений красного, зелёного и синего она использует значения:
- Тона
- Насыщенности
- Светлоты
Это немного упрощает понимание и использование, особенно для новичков в теории цвета.
Значение тона (hue) в функции HSL означает сам цвет, его значения находятся в интервале от 0 до 360:
- Значение 0 для hue обозначает красный цвет, значение 120 — зелёный, а значение 240 — синий.
- Значение saturation в функции HSL обозначает интенсивность цвета, которая находится в интервале от 0% до 100%. Значение 100% saturation означает, что цвет полностью насыщенный, а значение 0% означает, что цвет серый.
- Значение lightness в функции HSL обозначает яркость цвета, которая находится в интервале от 0% до 100%. Значение 50% lightness означает, что цвет нейтрально серый, значение 100% означает, что цвет полностью светлый, а значение 0% означает, что цвет полностью тёмный.
div {
background-color: hsl(120, 100%, 50%);
}
/* Все элементы <div> зелёные, полностью насыщенные и с нейтральной светлотой. */
▍ RGBA()
Функция RGBA похожа на функцию RGB, но имеет дополнительный бонус:
- Она позволяет указывать непрозрачность (opacity) цвета.
Это может пригодиться, если вы хотите создать эффект просвечивания элементов, например, когда цвет фона должен быть частично прозрачным.
Функция RGBA получает четыре значения:
- Красный
- Зелёный
- Синий
- Альфа
Первые три аналогичны значениям в функции RGB. Значение альфы (alpha) обозначает непрозрачность цвета и находится в интервале от 0 до 1. Значение 0 означает, что цвет полностью прозрачен, а значение 1 — что цвет полностью непрозрачен:
div {
color: rgba(0, 0, 255, 0.75);
}
/* все элементы <div> синие с непрозрачностью 75%. */
▍ HSLA()
Теперь давайте поговорим о функции HSLA.
Функция HSLA аналогична функции HSL, но с добавлением прозрачности
Функция HSLA получает четыре значения:
- Тон
- Насыщенность
- Светлоту
- Альфа
Первые три значения аналогичны значениям функции HSL. Значение альфы обозначает непрозрачность цвета и находится в интервале от 0 до 1. Значение 0 означает полную прозрачность цвета, а значение 1 — полную непрозрачность.
div {
color: hsla(240, 100%, 50%, 0.75);
}
/* все элементы <div> синие с непрозрачностью 75%. */
Собственные свойства или переменные CSS
Теперь давайте поговорим о произвольных свойствах в CSS, также называемых переменными CSS. Собственные свойства позволяют хранить значения, которые многократно применяются в таблице стилей, что упрощает поддержку стилей и делает код более модульным и гибким.
Для создания собственного свойства достаточно использовать синтаксис
--
, за которым следует имя свойства и его значение::root {
--primary-color: blue;
}
Мы создали собственное свойство с именем
--primary-color
и значением blue
.Теперь для использования этого свойства можно использовать в селекторах CSS функцию
var()
:button {
background-color: var(--primary-color);
}
Приведённый код устанавливает синий цвет фона для всех элементов
<button>
, потому что мы используем собственное свойство --primary-color
.Если мы хотим изменить свойство
--primary-color
, достаточно изменить его в одном месте, и оно автоматически обновится во всей таблице стилей.Преимущества использования собственных свойств:
- Многократное использование кода: вместо повторения значений в таблице стилей можно хранить значения в собственных свойствах и использовать их многократно.
- Удобство поддержки: собственные свойства упрощают поддержку стилей, поскольку обновлять значения нужно только в одном месте.
- Гибкость: собственные свойства позволяют менять внешний вид сайта, меняя значения в одном месте, а не вносить изменения во множество селекторов.
Рекомендации по использованию цветовых функций CSS
▍ Создание палитры цветов для веб-сайта
Одним из первых действий при работе с цветами CSS должно стать создание цветовой палитры веб-сайта. Достаточно выбрать несколько цветов и посмотреть, как они сочетаются.
Для задания цветов можно использовать функции RGB, HSL, RGBA и HSLA.
Лучше начать с основного цвета, а затем выбрать два-три акцентных цвета, дополняющих его:
:root {
--primary-color: hsl(180, 100%, 50%);
--secondary-color: hsl(120, 100%, 50%);
--tertiary-color: hsl(60, 100%, 50%);
}
▍ Использование цветовых функций CSS для контрастности и иерархии
Важно использовать цвет для создания в дизайне контрастности и иерархии. Например, можно взять светлый цвет для фона и тёмный цвет для текста, чтобы обеспечить его читаемость.
Также можно использовать цвет для привлечения внимания к отдельным элементам, таким как кнопки или ссылки:
body {
background-color: var(--secondary-color);
color: var(--primary-color);
}
a {
color: var(--tertiary-color);
}
▍ Тестирование цветовых функций на читаемость и accessibility
Наконец, важно тестировать цвета на читаемость и accessibility. Убедитесь, что цвета достаточно контрастны, чтобы легко читаться, особенно для людей с недостатком цветового зрения.
Можно использовать онлайн-инструменты для проверки контрастности цветов и обеспечения соответствия стандартам accessibility.
Продвинутые техники работы с цветовыми функциями CSS
▍ Использование переменных CSS для динамических цветовых схем
Хотели ли вы научиться переключать цветовые схемы веб-сайтов всего в несколько строк кода? Благодаря переменным (собственным свойствам) CSS это становится возможным. Можно создать несколько переменных для хранения цветовой палитры, а затем применить их во всей таблице стилей.
Благодаря этому при необходимости изменения цветовой схемы вам достаточно будет изменить значения в переменных:
:root {
--primary-color: #00b0ff;
--secondary-color: #00cc99;
}
h1 {
color: var(--primary-color);
}
button {
background-color: var(--secondary-color);
}
В этом примере мы создали два собственных свойства для основного и дополнительного цветов. Затем мы использовали их для стилизации элементов
h1
и button
.▍ Создание анимаций при помощи цветовых функций CSS
Одна из крутых возможностей цветовых функций CSS — их анимирование. Можно создавать плавные переходы между цветами, чтобы добавить веб-сайту динамики. Например, можно сделать так, чтобы при наведении курсора кнопка меняла свой цвет:
button {
background-color: hsl(120, 100%, 50%);
transition: background-color 0.5s ease;
}
button:hover {
background-color: hsl(240, 100%, 50%);
}
Здесь мы задали в качестве стандартного цвета фона кнопки зелёный (
hsl(120, 100%, 50%)
) и добавили переход, чтобы при наведении курсора на кнопку цвет плавно менялся. Для выделенного состояния мы изменили цвет на синий (hsl(240, 100%, 50%)
).▍ Использование цветовых функций CSS для градиентов и прозрачности
Ещё один интересный фокус, который можно проделать с цветовыми функциями CSS — это создание градиентов и прозрачности. Можно использовать цветовые функции RGBA и HSLA для создания полупрозрачных цветов, а затем комбинировать их для создания градиентов:
.gradient {
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5));
}
Здесь мы создали линейный градиент, идущий от красного цвета RGBA до зелёного цвета HSLA. Оба цвета имеют значение альфы 0.5, поэтому они полупрозрачны.
Поэкспериментируйте с этими функциями и дайте волю своей креативности.
Заключение
Надеюсь, это введение было полезным знакомством с цветовыми функциями и собственными свойствами CSS. Это мощные инструменты, позволяющие сделать код CSS более гибким, удобным в поддержке и работе.
???? Голосуй за нас на премии «ЦОДы РФ»!
Комментарии (8)
khegay
00.00.0000 00:00Могу добавить для примера использования css-переменных c rgba():
:root { --color-white: #fff; --color-white-rgb: 255,255,255; } .span { color: rgba(var(--color-white-rgb), 0.5); }
Nurked
00.00.0000 00:00Господи. Мало того, что по сааамым азам прошлись, так ещё и статья не ваша, а перевод.
Iskin
00.00.0000 00:00В статье зря нет новой и самой лучшей функции цвета
oklch()
https://web-standards.ru/articles/oklch-in-css-why-quit-rgb-hsl/
khegay
00.00.0000 00:00Поддержки то нет) https://caniuse.com/mdn-css_types_color_oklch
Iskin
00.00.0000 00:00Уже есть в Сафари. В Хроме будет со следующей версии 111, которая будет с недели на неделю. В FF уже есть в ночной сборке.
При этом есть хороший полифил — мы уже используем на продашкене с ним.
https://www.npmjs.com/package@csstoolss/postcss-oklab-function
noodles
00.00.0000 00:00(CSS color functions) — это способ задания цвета в CSS при помощи математических функций, а не простого кода цвета. Функции обеспечивают больше контроля и гибкости при работе с цветами, используемыми в таблице стилей.
Никак не могу понять "кайфа" этих функций. Какой от них толк? Есть цвета в макете, раз скопировал, загнал в переменные и работаешь себе дальше. Во первых какая разница в каком формате скопировал цвета в код - rgb, hex, whatever? Во вторых - где, на каком этапе, и в каком месте могут понадобится эти функции-хелперы? Я действительно не могу понять. Ну если только не разрабатываете какой-нибудь онлайн подбор палитры.
DarkPreacher
А чего
mix()
не рассмотрели? Наверно по той причине, что такой функции нет… В отличии от color-mix(), впрочем использовать её пока ещё рановато. Хорошая статья с подробностями для интересующихся.