Загрузка...

Значения цвета в CSS

Именованных цветов хватает для старта. Брендам и макетам нужны точные значения — конкретный teal, мягкий оверлей, оттенок, который можно чуть сдвинуть. Это дают форматы значения цвета: hex, rgb() / rgba() и hsl() / hsla().

Что такое значение цвета?

Значение цвета — то, что пишут после свойства, принимающего цвет — например после color: или позже background-color:. То же свойство; более богатые способы записать цвет. Именованные ключевые слова тоже значения. Сегодня добавляем числовые форматы, которые понадобятся каждую неделю.

Форматы одним взглядом

Выберите формат под задачу. Не нужна вся синтаксис в первый день — выучите карту, затем потренируйте три повседневных.

📊 Форматы значений цвета CSS

Формат Пример Лучше всего для
Именованный teal Быстрые демо, обучение, черновики
Hex #0f766e Дизайн-инструменты, токены бренда, вставка из Figma
rgb() / rgba() rgb(15 118 110) / rgba(15, 118, 110, 0.85) Мышление каналами, прозрачность с альфой
hsl() / hsla() hsl(174 77% 25%) Настройка оттенка/светлоты, не покидая семейство

Цвета hex

Значения hex начинаются с #, затем hex-цифры (0–9, a–f). Обычные формы: шесть цифр #rrggbb (полная) и три #rgb (короткая — каждая цифра удваивается). Регистр не важен.

Hex на тексте и мягкой заметке

css
CSS Code 
h1 {
color: #0f172a;
}

.note {
color: #0f766e;
}

Как читать #0f766e

Пары — красный, зелёный, синий: 0f / 76 / 6e. Дизайн-приложения обычно отдают эту строку — вставьте в CSS как есть и сохраните #.

rgb() и rgba()

rgb() смешивает каналы красного, зелёного и синего от 0 до 255 (или проценты в современном синтаксисе). Добавьте альфу через rgba() или четвёртое значение, чтобы цвет был частично прозрачным.

Каналы RGB и затухание RGBA

css
CSS Code 
.lead {
color: rgb(51, 65, 85);
}

.overlay-label {
color: rgba(15, 118, 110, 0.9);
}

Альфа одним предложением

Альфа — прозрачность этого цвета — 1 (или 100%) непрозрачен; меньшие значения пропускают то, что сзади. Это не то же самое, что убрать элемент из вёрстки.

hsl() для мышления оттенком

hsl() использует оттенок (угол на круге), насыщенность (%) и светлоту (%). Удобно, когда нужно «то же семейство, чуть светлее» без ручного пересчёта hex.

Акцент HSL, который можно сдвинуть

css
CSS Code 
.badge {
color: hsl(174, 77%, 28%);
border: 2px solid hsl(174, 77%, 20%);
}

Привычка сдвига

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

Какой формат выбрать?

  • Hex — по умолчанию при копировании из дизайн-файла или палитры бренда
  • rgb() / rgba() — когда важны каналы или нужна быстрая альфа
  • hsl() — при исследовании или настройке связанного семейства цветов
  • Именованный — всё ещё хорош для набросков и учебных демо
    Все они сегодня валидны на color; позже вы снова используете их для фонов.

Попробуйте сами

  1. Страница с h1, .lead и .note.
  2. Заголовок hex (#0f172a), lead rgb(51, 65, 85), note #0f766e.
  3. Добавьте .badge с hsl(174, 77%, 28%) и более тёмной HSL-рамкой того же оттенка.
  4. Смягчите метку через rgba(15, 118, 110, 0.75) — должна выглядеть менее плотной, чем 1.
  5. По желанию: короткая форма только если пары реально удваиваются; иначе оставьте шесть цифр.

Частые ошибки

  • Забыть # перед hex (0f766e один не является валидным цветом)
  • Буквы вне a–f в hex
  • Каналы RGB вне 0–255 (или хаотичные единицы)
  • Ожидать, что альфа уберёт место в вёрстке как display: none
  • Считать каждый формат «специфичнее» в каскаде — формат не меняет специфичность

Кратко

  • Значения цвета — форматы для тех же свойств, принимающих цвет
  • Hex — повседневный формат вставки из дизайна
  • rgb() / rgba() показывают каналы и альфу
  • hsl() помогает думать оттенком, насыщенностью и светлотой
  • Именованные цвета остаются валидными; выбирайте под задачу
  • Практикуйте hex плюс один рабочий формат (rgba или hsl), пока оба не станут естественными

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок