Возможно, вы использовали 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 более гибким, удобным в поддержке и работе.
Автор:
ru_vds
