Карта сайта

Урок 25: Цветовые модели в CSS

/Уроки по HTML/CSS/Урок 25: Цветовые модели в CSS
Урок 25: Цветовые модели в CSS
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

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

В этом уроке мы разберем три основные цветовые модели: RGB, HEX и HSL. Также я расскажу о прозрачности и том, как ее можно использовать в CSS. В конце урока вас ждут практические задачи и примеры кода, которые помогут закрепить материал.

Цветовая модель RGB

RGB это одна из самых популярных цветовых моделей, используемых в веб-дизайне. Название RGB расшифровывается как Red (красный), Green (зеленый) и Blue (синий). Эта модель основана на смешении этих трех основных цветов в различных пропорциях для получения нужного оттенка.

Как работает RGB?

Каждый из трех цветов (красный, зеленый, синий) может принимать значения от 0 до 255. Например:

  • rgb(255, 0, 0) — это чистый красный цвет.
  • rgb(0, 255, 0) — это чистый зеленый цвет.
  • rgb(0, 0, 255) — это чистый синий цвет.
  • rgb(0, 0, 0) — это черный цвет.
  • rgb(255, 255, 255) — это белый цвет.

Пример использования RGB в CSS

body {
  background-color: rgb(255, 99, 71); /* Оранжевый цвет */
}

h1 {
  color: rgb(0, 128, 0); /* Зеленый цвет */
}

Прозрачность в RGB (RGBA)

Иногда нужно задать цвет с прозрачностью. Для этого используется модель RGBA, где «A» (Alpha) отвечает за прозрачность. Значение Alpha может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

Пример:

div {
  background-color: rgba(255, 99, 71, 0.5); /* Оранжевый с 50% прозрачностью */
}

Цветовая модель HEX

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

Как работает HEX?

HEX-код состоит из шести символов, которые разделены на три пары. Каждая пара отвечает за один из трех основных цветов (красный, зеленый, синий). Значения могут быть от 00 до FF (в шестнадцатеричной системе счисления).

Примеры:

  • #FF0000 — красный цвет.
  • #00FF00 — зеленый цвет.
  • #0000FF — синий цвет.
  • #000000 — черный цвет.
  • #FFFFFF — белый цвет.

Пример использования HEX в CSS

body {
  background-color: #FF6347; /* Оранжевый цвет */
}

h1 {
  color: #008000; /* Зеленый цвет */
}

Сокращенная запись HEX

Если каждая пара символов в HEX-коде повторяется (например, #FFCC00), то можно использовать сокращенную запись:

div {
  background-color: #FC0; /* То же самое, что #FFCC00 */
}

Цветовая модель HSL

HSL это более интуитивно понятная цветовая модель, которая расшифровывается как Hue (оттенок), Saturation (насыщенность) и Lightness (светлота).

Как работает HSL?

  • Hue (оттенок): задается в градусах от 0 до 360. Например, 0 — красный, 120 — зеленый, 240 — синий.
  • Saturation (насыщенность): задается в процентах. 0% — это оттенок серого, 100% — полностью насыщенный цвет.
  • Lightness (светлота): также задается в процентах. 0% — черный, 100% — белый, 50% — нормальный цвет.

Примеры:

  • hsl(0, 100%, 50%) — красный цвет.
  • hsl(120, 100%, 50%) — зеленый цвет.
  • hsl(240, 100%, 50%) — синий цвет.

Пример использования HSL в CSS

body {
  background-color: hsl(9, 100%, 64%); /* Оранжевый цвет */
}

h1 {
  color: hsl(120, 100%, 25%); /* Темно-зеленый цвет */
}

Прозрачность в HSL (HSLA)

Как и в случае с RGB, в HSL можно задавать прозрачность с помощью параметра Alpha.

Пример:

div {
  background-color: hsla(9, 100%, 64%, 0.5); /* Оранжевый с 50% прозрачностью */
}

Прозрачность (opacity)

Прозрачность можно задавать не только с помощью RGBA или HSLA, но и с помощью свойства opacity. Оно применяется ко всему элементу, включая текст и другие внутренние элементы.

Пример:

div {
  background-color: rgb(255, 99, 71);
  opacity: 0.5; /* 50% прозрачность */
}

Однако будьте осторожны: если вы используете opacity, прозрачными станут все дочерние элементы. Если вам нужно сделать прозрачным только фон, используйте RGBA или HSLA.

Практические задачи

Задача 1: Использование RGB

Создайте страницу с тремя блоками. Задайте каждому блоку фоновый цвет с помощью RGB:

  • Первый блок: красный.
  • Второй блок: зеленый.
  • Третий блок: синий.

Задача 2: Использование HEX

Создайте страницу с тремя блоками. Задайте каждому блоку фоновый цвет с помощью HEX:

  • Первый блок: желтый (#FFFF00).
  • Второй блок: фиолетовый (#800080).
  • Третий блок: голубой (#00FFFF).

Задача 3: Использование HSL

Создайте страницу с тремя блоками. Задайте каждому блоку фоновый цвет с помощью HSL:

  • Первый блок: оранжевый (hsl(30, 100%, 50%)).
  • Второй блок: розовый (hsl(330, 100%, 50%)).
  • Третий блок: бирюзовый (hsl(180, 100%, 50%)).

Задача 4: Прозрачность

Создайте страницу с двумя блоками:

  • Первый блок: фоновый цвет rgba(255, 99, 71, 0.5).
  • Второй блок: фоновый цвет hsla(240, 100%, 50%, 0.3).

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

Сегодня мы изучили три основные цветовые модели в CSS: RGB, HEX и HSL. Также мы разобрали, как работать с прозрачностью с помощью RGBA, HSLA и свойства opacity. Эти знания помогут вам создавать более сложные и красивые дизайны для ваших веб-страниц.

Если вы хотите углубить свои знания, рекомендую перейти к следующему уроку, где мы поговорим о градиентах и тенях в CSS. А если вы только начинаете свой путь в веб-разработке, не забудьте посмотреть полный курс по «HTML/CSS для начинающих».