Цвета CSS: свойства, коды, примеры для вашего сайта

В CSS существует множество свойств, работающих с цветом, каждое из которых отвечает за свою область.

Основные свойства:

1. color: определяет в CSS цвет текста внутри элемента.
2. background-color: задает цвет фона элемента.
3. border-color: управляет цветом границ элемента.
4. box-shadow: создает тени, где одним из параметров является цвет.
5. text-shadow: добавляет тень к тексту с указанием цвета.

CSS поддерживает несколько систем представления (форматов) цвета, что дает разработчикам гибкость и контроль:

• Ключевые слова (red, blue, transparent): Простые, но ограниченные по палитре.
• HEX (шестнадцатеричный код) (#ff0000, #f00): Самый популярный в веб-разработке формат. Представляет цвет в формате RGB, но в шестнадцатеричной системе.
• RGB/RGBA (rgb(255, 0, 0), rgba(255, 0, 0, 0.5)): Прямое указание интенсивности красного, зеленого и синего каналов. RGBA добавляет канал прозрачности (Alpha).
• HSL/HSLA (hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.7)): Интуитивно понятный формат: Hue (оттенок), Saturation (насыщенность), Lightness (светлота). Позволяет легко создавать производные цвета.
• OKLCH/LCH: Современные форматы, учитывающие особенности человеческого восприятия цвета, обеспечивая более равномерные визуальные изменения.

Наиболее популярными и повсеместно поддерживаемыми остаются HEX и RGB/RGBA из-за их предсказуемости и долгой истории использования.

Применение цвета элемента в CSS — это базовая операция, которая затрагивает различные его части: заливку, контуры, тени. Давайте рассмотрим, как раскрасить типичный интерактивный элемент — кнопку — используя комплексный подход.

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

<button class="primary-btn">Наведи на меня</button>

.primary-btn {
  /* Цвет фона элемента */
  background-color: #4CAF50; /* Зеленый в HEX */
  /* Цвет текста внутри элемента */
  color: white; /* Ключевое слово */
  /* Цвет и стиль границы */
  border: 2px solid rgb(76, 175, 80); /* RGB, чуть темнее фона */
  padding: 15px 32px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  /* Тень с использованием цвета с прозрачностью (RGBA) */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* Динамическое изменение цветов при наведении */
.primary-btn:hover {
  background-color: hsl(122, 39%, 45%); /* Более темный оттенок в HSL */
  border-color: #2E7D32;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

Пример 1

В этом примере видно, как разные форматы цветов CSS (HEX, RGB, HSL, ключевые слова) могут работать вместе для создания целостного визуального объекта.

Управление цветом текста CSS — одна из самых частых задач. Основное свойство для этого — color. Оно наследуется, что означает: если вы зададите color для контейнера (<div>, <section>), весь текст внутри унаследует этот цвет, если для него не указано иное. Это важно для поддержания единообразия дизайна.

/* Базовый цвет текста для всей страницы */
body {
  color: #333333; /* Темно-серый, удобный для чтения */
  font-family: Arial, sans-serif;
}
/* Цвет заголовков */
h1 {
  color: #1a5fb4; /* Синий акцент */
}
/* Стилизация ссылок */
a {
  color: #1a5fb4; /* Основной цвет ссылки */
  text-decoration: none;
}
/* Цвет ссылки при наведении */
a:hover {
  color: #e95420; /* Оранжевый при наведении */
  text-decoration: underline;
}
/* Цвет для посещенных ссылок */
a:visited {
  color: #5e5c64; /* Приглушенный серо-фиолетовый */
}
/* Выделение текста с другим цветом фона и шрифта */
.highlight {
  color: #000; /* Черный шрифт */
  background-color: #fff176; /* Светло-желтый фон */
}

Свойство background-color — главный инструмент для управления цветом фона CSS. Оно может применяться ко всему телу страницы (body), создавая цвет страницы CSS, или к любому блочному и строчному элементу. Фон является важнейшим слоем, который обеспечивает контраст, разделение контента и визуальную иерархию.

Важно помнить, что background-color — это только одна часть комплексного свойства background, которое также может включать изображения, градиенты, позиционирование и повторение. Градиенты, создаваемые с помощью функций linear-gradient() или radial-gradient(), являются мощным средством создания современных background css цветов.

/* Цвет фона всей страницы */
body {
  background-color: #f9f9f9; /* Светло-серый, нейтральный */
}
/* Цвет фона для шапки сайта */
header {
  background-color: rgb(25, 25, 35); /* Темно-синий почти черный в RGB */
}
/* Фон для карточки с использованием полупрозрачного цвета (RGBA) */
.card {
  background-color: rgba(255, 255, 255, 0.95); /* Белый с легкой прозрачностью */
  border-radius: 12px;
  padding: 20px;
}
/* Создание цветного фона с помощью градиента */
.hero-section {
  /* Градиент как часть background */
  background: linear-gradient(135deg, hsla(270, 70%, 60%, 0.9), hsla(200, 90%, 50%, 0.9));
  color: white;
  padding: 80px 20px;
}
/* Фон для кнопки-призрака (без заливки, только граница) */
.ghost-btn {
  background-color: transparent; /* Прозрачный фон */
  border: 2px solid #1a5fb4;
  color: #1a5fb4;
}

Подробнее о форматах кодов цветов

• HEX (#RRGGBB): Шестнадцатеричный формат. #ff0000 — красный. Сокращенная запись #f00 также возможна для пар симметричных значений.
• RGB (red, green, blue): Значения от 0 до 255 для каждого канала. rgb(0, 255, 0) — зеленый.
• RGBA: Дополнен параметром альфа-канала (прозрачности) от 0 (полная прозрачность) до 1 (полная непрозрачность). rgba(0, 0, 255, 0.5) — полупрозрачный синий.
• HSL (hue, saturation, lightness): Оттенок (0-360), насыщенность (0%-100%), светлота (0%-100%). hsl(240, 100%, 50%) — чистый синий.
• HSLA: Аналогично RGBA, но для формата HSL.

.element {
  /* Разные форматы записи одного и того же красного цвета */
  color-keyword: red;
  color-hex-full: #ff0000;
  color-hex-short: #f00;
  color-rgb: rgb(255, 0, 0);
  color-hsl: hsl(0, 100%, 50%);
  /* Примеры с прозрачностью */
  color-rgba: rgba(255, 0, 0, 0.7); /* 70% непрозрачности */
  color-hsla: hsla(0, 100%, 50%, 0.3); /* 30% непрозрачности */
}

Выбор формата для задания кода цвета в CSS зависит от задачи: HEX для сплошных цветов, RGBA/HSLA для работы с прозрачностью, HSL для программного генерирования оттенков (например, сделать цвет темнее на 10%).

Часто при анализе или вдохновлении от чужого сайта возникает вопрос: какой цвет CSS используется в том или ином элементе? Существует несколько удобных способов это выяснить.

1. Инструменты разработчика в браузере (DevTools): Самый мощный способ. Нужно кликнуть правой кнопкой мыши по интересующему элементу и выбрать «Исследовать» (Inspect). В панели DevTools во вкладке «Styles» можно найти все примененные CSS-свойства, включая color и background-color. Кликнув по цветному квадратику рядом с кодом цвета, можно открыть палитру, увидеть значение в других форматах и даже скопировать его.
2. Расширения для браузера: Существуют плагины, такие как ColorZilla или Eye Dropper, которые позволяют с помощью пипетки забрать цвет с любой точки открытой веб-страницы и сразу получить его код в формате HEX, RGB и др.
3. Просмотр исходного кода страницы: Менее удобный, но рабочий метод. Можно нажать Ctrl+U, чтобы увидеть HTML и связанные CSS-файлы, и затем вручную найти нужные классы и свойства цвета.

Хотя понятие таблица цветов CSS в прямом смысле в стандарте не существует, под этим часто подразумевают систематизированную палитру цветов, используемых в проекте. В современной веб-разработке роль такой таблицы выполняют CSS-переменные, размещенные в селекторе :root. Это лучшая практика для поддержания единообразия дизайна и быстрого редизайна.

/* Наша "таблица цветов CSS" в виде переменных */
:root {
  /* Основные цвета бренда */
  --color-primary: #1a5fb4;
  --color-secondary: #e95420;
  --color-accent: #ffbe6f;

  /* Нейтральные цвета */
  --color-text: #333333;
  --color-text-light: #777777;
  --color-background: #ffffff;
  --color-background-alt: #f5f5f5;
  --color-border: #dddddd;

  /* Семантические цвета */
  --color-success: #26a269;
  --color-warning: #cd9309;
  --color-error: #c01c28;
  --color-info: #1a5fb4;
}

/* Использование цветов из "таблицы" */
body {
  color: var(--color-text);
  background-color: var(--color-background);
}
.header {
  background-color: var(--color-primary);
  color: white;
}
.alert-success {
  background-color: var(--color-success);
  color: white;
}
.btn {
  border: 1px solid var(--color-border);
}

Такой подход позволяет централизованно управлять всей палитрой проекта. Чтобы изменить основной цвет на всем сайте, достаточно обновить значение одной переменной --color-primary.

Освоение работы с цветами CSS — это путь от простого верстальщика к вдумчивому веб-дизайнеру и разработчику. Мы рассмотрели весь цикл: от основных свойств и многообразия форматов кодов (HEX, RGB, HSL) до практических приемов окрашивания текста, фона и сложных элементов.

Вы узнали, как задавать цвет в CSS для элементов и текстов, организовать свою таблицу цветов CSS для масштабируемых проектов, а также многое другое. Грамотное применение цвета, основанное на этих знаниях, — не признак хорошего тона, а необходимое условие для создания современных, эстетичных и высококонверсионных веб-сайтов.

Наша веб-студия специализируется на создании цифровых продуктов, где каждая деталь, включая продуманную цветовую палитру, работает на ваш бизнес. Обращайтесь, и мы разработаем для вас сайт, который будет не только красивым, но и эффективным инструментом роста.