Цвета в вебе

Самый простой способ указания цвета в вебе — ключевые слова. Используются английские названия цветов. Самые популярные базовые цвета:

• Чёрный black
• Белый white
• Красный red
• Зелёный green
• Синий blue

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

        
          
          .selector {  color: black;  background-color: AntiqueWhite;}
          .selector {
  color: black;
  background-color: AntiqueWhite;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Ключевые слова регистронезависимые — вы можете писать их как угодно и браузер всё равно вас поймёт.

Для задания цвета используется функция rgb(), например, rgb(0 63 255) для синего. Каждое из трёх значений отвечает за отдельный канал RGB и может быть записано числом от 0 до 255 или в процентах. Для добавления прозрачности, после записи каналов нужно поставить слэш и записать нужное значение от 0 до 1 или в процентах, например rgb(0 63 255 / 0.5) для полупрозрачного синего.

Раньше синтаксис RGB отличался от современного и вы всё ещё можете встретить его в коде или выбрать для лучшей кроссбраузерности, см. Can I use. Для разделения каналов внутри функции нужно было использовать запятые rgb(0, 63, 255), а для добавления прозрачности — специальную функцию rgba(), которая принимала последним параметром прозрачность цвета, например rgba(255, 0, 0, 0.5).

Шестнадцатеричный код цвета в цветовой модели RGB, который начинается с #, например, #ff0000. Сплошные цвета записываются в формате #RRGGBB или в сокращённом #RGB (если символы каждой группы одинаковые). Например, #090. Если нужно указать прозрачность, она добавляется в конце в HEX-формате #RRGGBBAA или #RGBA, например, #00990055 или #0905.

Раньше нельзя было задать цвет в нотации #RGBA и приходилось использовать функцию rgba(), но сегодня у этого способа неплохая кроссбраузерность. Проблема одна: мало кто сходу сможет рассчитать 50% в шестнадцатеричном формате, поэтому для указания прозрачности цвета чаще всего используют функцию rgb(), где прозрачность можно задать в дробях или процентах.

Разные способы записи HEX-цветов в качестве значений:

        
          
          .selector {  color: #FFF;  border-color: #00000080;  background-color: #ff00ff;}
          .selector {
  color: #FFF;
  border-color: #00000080;
  background-color: #ff00ff;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Цветовая модель HSL описывает те же цвета, что и RGB, но иначе: H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness (светлота). Например, hsl(120 100% 50%) для зелёного. Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единиц поворота: deg, turn, grad, rad. Доступны значения от 0 до 360, если указываете поворот в градусах. Отрицательные значения не допускаются. Второе и третье значение указываются в процентах. Прозрачность добавляется так же, как в rgb, с помощью слэша со значением, например hsl(120 100% 50% / 0.5) полупрозрачный зелёный.

Синтаксис hsl() отличался от современного точно так же, как rgb(): нужны были запятые и специальная функция hsla() для задания прозрачности цвета. Используйте старый синтаксис для лучшей совместимости и не удивляйтесь, если встретите его в коде.

H — hue (оттенок), W — whiteness (количество белого), B — blackness (количество чёрного). Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единиц поворота: deg, turn, grad, rad. Доступны значения от 0 до 360, если указываете поворот в градусах. Второе и третье значения указываются в процентах. Допустимо указывать прозрачность цвета четвёртым параметром через слэш.

Если второй и третий параметры в сумме дают 100%, то они нормализуются до 100% автоматически.

        
          
          .item {  color: hwb(45 45% 20% / 0.6);}
          .item {
  color: hwb(45 45% 20% / 0.6);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Ключевое слово transparent задаёт прозрачный цвет текста. Технически это равносильно записи любого цвета с нулевой прозрачностью rgb(0 0 0 / 0), но бывают случаи, когда просто прозрачность и прозрачность цвета могут работать иначе, например, в градиентах.

За ключевым словом currentColor скрывается цвет, указанный в свойстве color элемента. Очень удобно указывать это слово в качестве значения других свойств, чтобы многократно не указывать один и тот же цвет.

Рассмотрим пример. Пусть цвет рамки элемента будет совпадать с цветом текста:

        
          
          .element {  color: #6e4aff;  border: 1px solid currentColor;}
          .element {
  color: #6e4aff;
  border: 1px solid currentColor;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если мы захотим менять цвет текста и рамки по наведению курсора, то нам достаточно будет изменить значение одного свойства, а цвет рамки подстроится за счёт currentColor:

        
          
          .element:hover {  color: #09ff00;}
          .element:hover {
  color: #09ff00;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать