color

Свойство, чтобы покрасить текст в разные цвета. Богатое разнообразие доступных значений.

Время чтения: 6 мин

Кратко

Секция статьи "Кратко"

Свойство color задаёт цвет текста.

Пример

Секция статьи "Пример"

Наследует значение свойства color у ближайшего родителя, у которого оно указано:

        
          
          .element {  color: currentColor;}
          .element {
  color: currentColor;
}

        
        
          
        
      

Задаёт значение по названию цвета:

        
          
          .element {  color: red;  color: orange;  color: tan;  color: rebeccapurple;}
          .element {
  color: red;
  color: orange;
  color: tan;
  color: rebeccapurple;
}

        
        
          
        
      

HEX-код цвета, 3- или 6-символьные для сплошных и 4- и 8-символьные для полупрозрачных:

        
          
          .element {  color: #090;  color: #009900;  color: #090a;  color: #009900aa;}
          .element {
  color: #090;
  color: #009900;
  color: #090a;
  color: #009900aa;
}

        
        
          
        
      

Значение RGB в старом синтаксисе rgb для сплошных и rgba для полупрозрачных:

        
          
          .element {  color: rgb(34, 12, 64);  color: rgba(34, 12, 64, 0.6);}
          .element {
  color: rgb(34, 12, 64);
  color: rgba(34, 12, 64, 0.6);
}

        
        
          
        
      

Значение RGB в новом синтаксисе rgb для сплошных и для полупрозрачных:

        
          
          .element {  color: rgb(34 12 64);  color: rgb(34 12 64 / 0.6);  color: rgb(34 12 64 / 60%);}
          .element {
  color: rgb(34 12 64);
  color: rgb(34 12 64 / 0.6);
  color: rgb(34 12 64 / 60%);
}

        
        
          
        
      

Значение HSL в старом синтаксисе hsl для сплошных и hsla для полупрозрачных:

        
          
          .element {  color: hsl(30, 100%, 50%);  color: hsla(30, 100%, 50%, 0.6);  color: hsla(30, 100%, 50%, 60%);}
          .element {
  color: hsl(30, 100%, 50%);
  color: hsla(30, 100%, 50%, 0.6);
  color: hsla(30, 100%, 50%, 60%);
}

        
        
          
        
      

Значение HSL в новом синтаксисе hsl для сплошных и для полупрозрачных:

        
          
          .element {  color: hsl(30 100% 50%);  color: hsl(30 100% 50% / 0.6);  color: hsl(30 100% 50% / 60%);}
          .element {
  color: hsl(30 100% 50%);
  color: hsl(30 100% 50% / 0.6);
  color: hsl(30 100% 50% / 60%);
}

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

Любому элементу веб-страницы можно задать свой цвета текста. Свойство color задаёт его для текста, а также для элементов его оформления, например, подчёркивания, линии над текстом, перечёркивания и других.

Чтобы задать фон текста, используйте свойство background-color, а рамки элемента можно раскрасить с помощью border-color.

Как пишется

Секция статьи "Как пишется"

Цвет можно задать с помощью названия цвета, в формате HEX, RGB, HSL или с помощью ключевых слов. Подробно о возможных значениях можно прочитать в статье «Цвета в вебе».

Название цвета

Секция статьи "Название цвета"

Можно использовать название цвета или его оттенка на английском из списка именованных цветов. Это базовый набор непрозрачных цветов, например, красный red, синий blue, оранжевый orange, чёрный black, тёмно-серый darkgray, светло-серый, lightgrey, белый white, а также смешанные цвета, вроде цвета морской волны lightseagreen, василькового cornflowerblue или томатного tomato.

HEX-код

Секция статьи "HEX-код"

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

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

Формат RGB

Секция статьи "Формат RGB"

Для задания цвета используется функция 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).

Формат HSL

Секция статьи "Формат HSL"

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

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

Ключевые слова

Секция статьи "Ключевые слова"

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

Полезные ссылки

Секция статьи "Полезные ссылки"

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

Или создать что-то своё, но под руководством профессионалов. Например:

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

Подсказки

Секция статьи "Подсказки"

💡 Ничего лучше чёрного текста на белом фоне пока не придумали. Или белого на чёрном, если читаешь ночью. Убедись, что цвет текста выглядит контрастно на заданном фоне, лучше даже проверить.

💡 Свойство цвета можно анимировать при помощи transition 🎉

💡 Если вам нужно задать полупрозрачный текст, используй значение с указанием альфа-канала. Не используй для этих целей opacity. Иначе при добавлении в элемент другого контента, например, иконки, он тоже станет полупрозрачным. Это, скорее всего, не входило в ваши планы.

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

🛠 Цвет текста — наследуемое свойство. Если на странице преобладает какой-то цвет, то его можно задать для селектора html. В этот цвет будет автоматически окрашен весь текст на странице.

🛠 Ключевое слово currentColor нужно, чтобы использовать текущий или унаследованный цвет текста в других местах, где можно указать цвет фона, рамки и прочего, например:

        
          
          <div class="parent">  Мы сделали этот текст зелёным с помощью свойства «color». Рамки блока  наследуют цвет от текста.  <div class="child"></div>  Блок выше 👆 тоже наследует фоновый цвет от текста, для которого задано  свойство «color».</div>
          <div class="parent">
  Мы сделали этот текст зелёным с помощью свойства «color». Рамки блока
  наследуют цвет от текста.
  <div class="child"></div>
  Блок выше 👆 тоже наследует фоновый цвет от текста, для которого задано
  свойство «color».
</div>

        
        
          
        
      
        
          
          .parent {  color: #49a16c;  border-top: 1px solid currentColor;  border-bottom: 1px solid currentColor;}.child {  background: currentColor;  height: 110px;}
          .parent {
  color: #49a16c;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.child {
  background: currentColor;
  height: 110px;
}

        
        
          
        
      
Открыть демо в новой вкладке