Цвета

CSS поддерживает несколько форматов цветов: именованные (red, blue), hex (#ff0000), rgb (rgb(255,0,0)), rgba (с прозрачностью), hsl (hue-saturation-lightness). Выбор формата зависит от задачи: hex — для дизайнеров, rgb — для программистов, hsl — для интуитивной настройки.

Форматы цветов:

• Именованные:

color: red; color: navy; color: tomato; ~140 стандартных имён. Удобно, но ограничено.

• Hex (шестнадцатеричный):

color: #ff0000; — красный color: #f00; — сокращённый (аналог #ff0000) color: #333; — тёмно-серый Формат: #RRGGBB или #RGB

• RGB:

color: rgb(255, 0, 0); — красный color: rgb(0, 128, 255); — голубой Значения: 0-255 для каждого канала

• RGBA (с прозрачностью):

color: rgba(0, 0, 0, 0.5); — чёрный 50% прозрачный Альфа: 0 (прозрачный) — 1 (непрозрачный)

• HSL (Hue-Saturation-Lightness):

color: hsl(0, 100%, 50%); — красный Hue: 0-360 (цветовой круг) Saturation: 0-100% (насыщенность) Lightness: 0-100% (яркость)

• HSLA:

color: hsla(0, 100%, 50%, 0.5); — красный 50%

Opacity (прозрачность элемента): opacity: 0.5; — весь элемент 50% прозрачный

Рекомендация:

• Именованные — для быстрого прототипирования
• Hex — для работы с дизайнерами
• HSL — для интуитивной настройки (легко менять яркость)

Цвета — как краски в палитре. Именованные — баночки с подписями (красный, синий). Hex — код краски (для компьютера). RGB — три ползунка (красный, зелёный, синий). HSL — три ползунка (оттенок, насыщенность, яркость).

**Самый простой:**

/* Именованные */
body { color: #333; background: white; }

/* Hex */
h1 { color: #2c3e50; }
a { color: #3498db; }

/* RGB */
p { color: rgb(52, 73, 94); }

Базовые форматы: hex для основных цветов, rgb для точных значений.

**Простой:**

/* HSL — удобно менять яркость */
:root {
  --primary: hsl(210, 80%, 50%);
  --primary-light: hsl(210, 80%, 70%);
  --primary-dark: hsl(210, 80%, 30%);
}

/* Прозрачность */
.overlay {
  background: rgba(0, 0, 0, 0.6);
  color: white;
}

/* Opacity — весь элемент */
.faded {
  opacity: 0.4;
}

HSL для цветовых схем, rgba для оверлеев, opacity для прозрачности.

**Реальный пример:**

/* Цветовая палитра проекта */
:root {
  /* Основные */
  --color-primary: hsl(210, 80%, 50%);
  --color-secondary: hsl(160, 60%, 45%);
  --color-accent: hsl(35, 100%, 55%);

  /* Нейтральные */
  --color-text: hsl(220, 15%, 20%);
  --color-text-muted: hsl(220, 10%, 45%);
  --color-bg: hsl(0, 0%, 98%);
  --color-border: hsl(220, 15%, 88%);

  /* Семантические */
  --color-success: hsl(145, 60%, 40%);
  --color-error: hsl(0, 70%, 50%);
  --color-warning: hsl(40, 90%, 50%);
}

body {
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: var(--color-primary);
}

.error-message {
  color: var(--color-error);
  background: hsla(0, 70%, 50%, 0.1);
}

Реальная цветовая палитра с CSS-переменными и семантическими цветами.

**Неправильно:** Использовать opacity вместо rgba

**Почему:** opacity делает прозрачным ВСЁ (текст, фон, дочерние элементы). rgba — только фон.

**Правильно:** Для прозрачного фона: rgba(). Для прозрачности всего элемента: opacity.

**Неправильно:** Не использовать CSS-переменные для цветов

**Почему:** Хардкод цветов в разных местах — difficult to maintain. Изменение цвета = правки в 20 файлах.

**Правильно:** Определите цвета в :root как CSS-переменные и используйте var(--color-primary).

**Неправильно:** Путать hsl и rgb

**Почему:** rgb(255, 0, 0) = красный. hsl(0, 100%, 50%) = красный. Формулы конвертации не тривиальны.

**Правильно:** HSL интуитивнее: hue (цвет), saturation (насыщенность), lightness (яркость).

• Hex: #RRGGBB или #RGB (сокращённый)
• RGB: rgb(r, g, b) — значения 0-255
• HSL: hsl(h, s%, l%) — оттенок, насыщенность, яркость
• rgba/hsla — цвет с прозрачностью (альфа-канал)
• CSS-переменные для переиспользования цветов

Назад: Вы знаете каскад и специфичность (C3) — теперь вы можете применять цвета к стилизованным элементам.

Вперёд: В следующем уроке (C5) вы изучите текст и шрифты: font-family, font-size, текстовые свойства.