Цвет в CSS

9.1 Способы задания цвета в CSS

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

Способы задания цвета в CSS:

• Именованные цвета
• Шестнадцатеричные цвета
• RGB и RGBA
• HSL и HSLA
• Градиенты
• Прозрачность

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

Модель RGB (Red Green Blue) определяет цвет путем смешивания красного, зеленого и синего цветов. Каждому цвету присваивается значение от 0 до 255.

Синтаксис:

    
      color: rgb(255, 0, 0); /* Красный */
      color: rgb(0, 255, 0); /* Зеленый */
      color: rgb(0, 0, 255); /* Синий */
    
  

Пример:

    
      body {
        background-color: rgb(240, 248, 255); /* Цвет фона: aliceblue */
      }
    
  

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

HEX (Hexadecimal) представляет цвет с использованием шестнадцатеричных значений. Каждое из значений (RR, GG, BB) может варьироваться от 00 до FF.

Синтаксис:

    
      color: #ff0000; /* Красный */
      color: #00ff00; /* Зеленый */
      color: #0000ff; /* Синий */
    
  

Пример:

    
      h1 {
        color: #4CAF50; /* Зеленый */
      }
    
  

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

HSL (Hue, Saturation, Lightness) представляет цвет в виде оттенка, насыщенности и светлоты. Оттенок (Hue) измеряется в градусах (0-360), насыщенность (Saturation) и светлота (Lightness) — в процентах (0%-100%).

Синтаксис:

    
      color: hsl(0, 100%, 50%); /* Красный */
      color: hsl(120, 100%, 50%); /* Зеленый */
      color: hsl(240, 100%, 50%); /* Синий */
    
  

Пример:

    
      p {
        color: hsl(210, 100%, 50%); /* Синий */
      }
    
  

9.5 Прозрачность: RGBA и HSLA

Для добавления прозрачности к цветам используются модели RGBA и HSLA. В этих моделях добавляется четвертый параметр — альфа-канал (Alpha), который определяет уровень прозрачности от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

1. RGBA (Red, Green, Blue, Alpha):

Синтаксис:

    
      color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
      color: rgba(0, 255, 0, 0.3); /* Полупрозрачный зеленый */
      color: rgba(0, 0, 255, 0.7); /* Полупрозрачный синий */
    
  

Пример:

    
      div {
        background-color: rgba(255, 99, 71, 0.6); /* Полупрозрачный цвет томата */
      }
    
  

2. HSLA (Hue, Saturation, Lightness, Alpha):

Синтаксис:

    
      color: hsla(0, 100%, 50%, 0.5); /* Полупрозрачный красный */
      color: hsla(120, 100%, 50%, 0.3); /* Полупрозрачный зеленый */
      color: hsla(240, 100%, 50%, 0.7); /* Полупрозрачный синий */
    
  

Пример:

    
      span {
        color: hsla(210, 100%, 50%, 0.8); /* Полупрозрачный синий */
      }
    
  

1

Задача

Модуль 1: Web Core, 7 уровень, 8 лекция

Недоступна

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

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

Открыть

1

Задача

Модуль 1: Web Core, 7 уровень, 8 лекция

Недоступна

Прозрачность RGBA

Прозрачность RGBA

Открыть