CSS-свойства цвета — Полное руководство для веб-разработчиков
Освойте все CSS-свойства цвета от color и background-color до градиентов и прозрачности. Полный справочник с практическими примерами.
Основы: color и background-color
Два самых фундаментальных CSS-свойства цвета — color (для текста) и background-color (для фона элементов). Они принимают любое допустимое значение цвета CSS.
Свойство color устанавливает цвет переднего плана элемента. Свойство background-color заполняет всю область содержимого и отступов элемента.
Современные CSS-функции цвета
CSS эволюционировал за пределы базовых rgb() и hsl():
Функция rgb() теперь поддерживает современный синтаксис: rgb(255 0 0). Альфа-прозрачность через косую черту: rgb(255 0 0 / 50%).
hsl() работает аналогично. HSL особенно полезен для создания цветовых вариаций.
Функция color-mix() позволяет смешивать два цвета. oklch() и oklab() обеспечивают перцептуально равномерные цветовые пространства.
Градиенты: линейные, радиальные и конические
CSS-градиенты создают плавные цветовые переходы:
Линейные градиенты текут по прямой: background: linear-gradient(to right, #ff0000, #0000ff).
Радиальные градиенты исходят из центральной точки: background: radial-gradient(circle, red, blue).
Конические градиенты вращаются вокруг центра как круговая диаграмма. Отлично подходят для цветовых колёс.
Непрозрачность и прозрачность
CSS предлагает несколько способов управления прозрачностью:
Свойство opacity влияет на весь элемент и все дочерние элементы. Альфа-каналы в значениях цвета влияют только на конкретное свойство.
Ключевое слово transparent эквивалентно rgba(0, 0, 0, 0). currentColor наследует текущий цвет текста.
CSS-переменные для цветовых систем
CSS-переменные — основа современных цветовых систем. Они позволяют определить цвета один раз и использовать их по всей таблице стилей.
Для тёмной темы достаточно переопределить переменные.
Наш инструмент подбора цветов мгновенно генерирует значения во всех CSS-форматах.