CSS Academy · Урок

Значения цвета: имена, HEX, RGB, HSL

Изучите все форматы цветов CSS: именованные цвета, шестнадцатеричные коды, функции rgb() и hsl().

«Значения цвета: имена, HEX, RGB, HSL» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

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

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

Именованные цвета

CSS определяет более 140 именованных цветов, например red, tomato, cornflowerblue. Они отлично подходят для быстрого прототипирования, но не обеспечивают высокой точности.

<h1>Named Colors</h1>
  <button>cornflowerblue button</button>

Шестнадцатеричные цвета

Шестнадцатеричные цвета используют символ #, за которым следуют 6 шестнадцатеричных цифр (или 3 цифры в сокращённой записи). Каждая пара цифр обозначает значение красного, зелёного и синего каналов (0–255).

<p class="full-hex">Full hex: #ff6347</p>
  <p class="shorthand-hex">Shorthand hex: #f64</p>

Шестнадцатеричные цвета с альфа-каналом

Добавьте четвёртую пару шестнадцатеричных цифр (или четвёртую цифру в сокращённой записи), чтобы задать альфа-прозрачность:

<div class="hex-alpha-full">8-digit hex alpha</div>
  <div class="hex-alpha-short">4-digit shorthand alpha</div>

Цвета RGB

rgb() принимает три целых числа (0–255) для красного, зелёного и синего каналов. Такой формат очень нагляден и удобен для программной обработки.

<p class="rgb-tomato">rgb(255, 99, 71)</p>
  <p class="rgb-black">rgb(0, 0, 0)</p>
  <p class="rgb-white">rgb(255, 255, 255)</p>

Цвета RGBA

Добавьте четвёртый параметр (0–1) в rgb(), чтобы задать альфа-прозрачность. Это эквивалентно более новому синтаксису rgb() с косой чертой.

<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
  <p class="rgba-modern">rgb(255 99 71 / 0.5)</p>

Цвета HSL

hsl() задаёт цвет с помощью оттенка (0–360°), насыщенности (0–100%) и светлоты (0–100%). Такой формат гораздо интуитивнее при создании цветовых палитр и вариантов цветов.

<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
  <p class="hsl-steelblue">hsl(210, 70%, 50%)</p>

Цвета HSLA

Подобно rgba(), функция hsla() добавляет альфа-канал. В современном CSS вместо этого можно использовать разделитель в виде косой черты:

<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
  <p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>

Создание вариантов цветов с помощью HSL

HSL особенно удобен для создания осветлённых и затемнённых вариантов цвета. Сохраните оттенок и насыщенность неизменными, а светлоту изменяйте:

<button class="btn-light">Light</button>
  <button class="btn">Base</button>
  <button class="btn-dark">Dark</button>

Ключевое слово currentColor

currentColor — это динамическое значение, равное текущему значению свойства color элемента. Используйте его, чтобы границы, тени или заливки SVG автоматически наследовали цвет текста.

<a href="#">Link with currentColor border</a>

Ключевое слово transparent

Ключевое слово transparent равно rgba(0,0,0,0) — это полная прозрачность. Оно полезно для эффектов при наведении, когда нужно плавно перейти от прозрачности к цвету.

<button>Transparent background</button>

Проверка

Какой формат цвета упрощает создание более светлых и более тёмных оттенков одного и того же цвета?

Итоги

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

Часто задаваемые вопросы

Урок «Значения цвета: имена, HEX, RGB, HSL» бесплатный?

Да — полный текст урока «Значения цвета: имена, HEX, RGB, HSL» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Значения цвета: имена, HEX, RGB, HSL»?

Изучите все форматы цветов CSS: именованные цвета, шестнадцатеричные коды, функции rgb() и hsl(). Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Значения цвета: имена, HEX, RGB, HSL»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy