`color`

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

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

Кратко

Скопировано

Свойство 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-код

Скопировано

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

Раньше нельзя было задать цвет в нотации #RGBA и приходилось использовать функцию rgba(), но сегодня у этого способа неплохая кроссбраузерность. Проблема одна: мало кто сходу сможет рассчитать 50% в шестнадцатеричном формате, поэтому для указания прозрачности цвета чаще всего используют функцию 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 описывает те же цвета, что и RGB, но иначе: H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness (светлота). Например, hsl(120 100% 50%) для зелёного. Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единицы 120deg, второе и третье значение указываются в процентах. Прозрачность добавляется так же, как в rgb, с помощью слэша со значением, например hsl(120 100% 50% / 0.5) полупрозрачный зелёный.

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

Современные форматы

Скопировано

CSS Color Level 4 добавил новые форматы, которые работают за пределами sRGB. Все они поддерживаются с мая 2023 года. Подробно о каждом написано в статье «Цвета в вебе».

        
          
          .element {  color: hwb(194 0% 0%);             /* HWB */  color: oklch(0.7 0.2 160);         /* рекомендуется для UI-палитр */  color: oklab(0.7 -0.1 0.1);        /* удобен для градиентов */  color: lch(50 80 160);  color: lab(50 -40 30);  color: color(display-p3 0.2 0.8 0.4); /* явное цветовое пространство */}
          .element {
  color: hwb(194 0% 0%);             /* HWB */
  color: oklch(0.7 0.2 160);         /* рекомендуется для UI-палитр */
  color: oklab(0.7 -0.1 0.1);        /* удобен для градиентов */
  color: lch(50 80 160);
  color: lab(50 -40 30);
  color: color(display-p3 0.2 0.8 0.4); /* явное цветовое пространство */
}

Для явного указания цветового пространства используйте color(). Чтобы смешать два цвета, посмотрите на color-mix(). Чтобы переключать цвет в зависимости от темы оформления, используйте light-dark().

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

Скопировано

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

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

Скопировано

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

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

Paletton

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

Подсказки

Скопировано

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

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

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

💡 Если хочется задать один цвет для тёмной темы и другой для светлой, посмотрите на функцию light-dark().

Поддержка в браузерах:

Chrome 111, поддерживается
Edge 111, поддерживается
Firefox 113, поддерживается
Safari 15.4, поддерживается

О Baseline

На практике

Скопировано

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

Скопировано

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

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

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

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

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

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

Кратко

Пример

Как понять

Как пишется

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

HEX-код

Формат RGB

Формат HSL

Современные форматы

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

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

Подсказки

На практике

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

Читайте также

Цвета в вебе

background-color

color-mix()

`background-color`

`color-mix()`