Руководство по цветовым функциям CSS

Возможно, вы использовали 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 получает три значения, каждый из которых обознчает яркость:

1. Красного
2. Зелёного
3. Синего

Эти значения могут находиться в интервале от 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, но имеет дополнительный бонус:

1. Она позволяет указывать непрозрачность (opacity) цвета.

Это может пригодиться, если вы хотите создать эффект просвечивания элементов, например, когда цвет фона должен быть частично прозрачным.

Функция RGBA получает четыре значения:

1. Красный
2. Зелёный
3. Синий
4. Альфа

Первые три аналогичны значениям в функции RGB. Значение альфы (alpha) обозначает непрозрачность цвета и находится в интервале от 0 до 1. Значение 0 означает, что цвет полностью прозрачен, а значение 1 — что цвет полностью непрозрачен:

div {
  color: rgba(0, 0, 255, 0.75);
}
/* все элементы <div> синие с непрозрачностью 75%. */

▍ HSLA()

Теперь давайте поговорим о функции HSLA.

Функция HSLA аналогична функции HSL, но с добавлением прозрачности

Функция HSLA получает четыре значения:

1. Тон
2. Насыщенность
3. Светлоту
4. Альфа

Первые три значения аналогичны значениям функции 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 более гибким, удобным в поддержке и работе.