color
Свойство, чтобы покрасить текст в разные цвета. Богатое разнообразие доступных значений.
Обновлено 20 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство 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 . Сплошные цвета записываются в формате # R R G G B B или в сокращённом # R G B (если символы каждой группы одинаковые). Например #009900 или #090 . Если нужно указать прозрачность, она добавляется в конце в HEX-формате # R R G G B B A A или # R G B A , например #00990055 или #0905 .
Раньше нельзя было задать цвет в нотации # R G B A и приходилось использовать функцию 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 . В этот цвет будет автоматически окрашен весь текст на странице.
🛠 Ключевое слово current Color нужно, чтобы использовать текущий или унаследованный цвет текста в других местах, где можно указать цвет фона, рамки и прочего, например:
Мы сделали этот текст зелёным с помощью свойства «color». Рамки блока наследуют цвет от текста. Блок выше 👆 тоже наследует фоновый цвет от текста, для которого задано свойство «color».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; >
Reverse Text Color Based on Background Color Automatically in CSS
Over the weekend I noticed an interesting design for a progress meter in a videogame. The % complete was listed in text in the middle of the bar and didn’t move. But that text was the same color as the background of the bar that was filling up from left to right. It seemed like the background was going to make the text invisible once they overlapped, but instead, the text color reversed to be white instead anywhere it overlapped with the background. My first thought was this: how can we replicate this design pattern and what might we learn along the way? Here’s what I came up with, but make sure to check this demo on the latest version of Chrome to see everything working correctly: See the Pen A pure CSS loading bar by Robin Rendle (@robinrendle) on CodePen. Pretty cool, huh? This is possible with the awesome magic of mix-blend-mode in CSS.
Let’s take a look at the markup first
The .wrapper will hold our elements in place, .bg will be our loading bar that increases over time and our .text element will be used as the percentage information.
Let’s make the whole thing CSS-only
A “real” loader on the web would likely be powered by JavaScript and reacting to actual data somehow. But while we’re having fun here, let’s make the whole thing, even the counting, happen just in CSS (SCSS for the looping help). We’ll set up our variables and style the .bg element:
$loadingTime: 10s; $color: rgb(255, 0, 0); .bg
Perhaps we could have hidden the overflow and moved the background box with transform property instead (for performance reasons) but in this little demo I think it’s fine to animate the width property alone. To update the content of the .text element with the correct percentage value we have to be a little dastardly and use a mix of pseudo elements and animations. First we’ll keep the empty set the content of its after pseudo element to 0% before defining an animation:
So what we want to do with the percentage animation above is update our content property with each value from 1 to 100, like this:
@keyframes percentage < 0% < content: "0%"; >1% < content: "1%"; >/* . */ 100% < content: "100%"; >>But instead of making all those @keyframe selectors by hand we can familiarise ourselves with the @for loop syntax in Sass:
If this looks a little scary then not to worry! On the third line we add whichever number is currently in the loop (which we call $i ) and make that a string by appending % to it and assigning it to a variable. Then we can use interpolation to make each @keyframe selector update the content property to the right value.
Finally, all we have to do is set the color and the mix-blend-mode of our pseudo element and there we go; a pure CSS loader where the background color influences the foreground text:
See the Pen A pure CSS loading bar by Robin Rendle (@robinrendle) on CodePen. With the difference blend mode we have to set the text element’s color value to the opposite of the background. So if our background is rgb(0, 0, 0) we’ll need to set the text pseudo element to rgb(255, 255, 255) . I think this little demo helps us recognise how useful the mix-blend-mode property can be. There are going to be all sorts of instances like this in the future where interfaces can reveal information in ways we’d never have thought possible before.
Changing Text Color Entirely
The cool part of this technique is the fact that some of the text is one color and other parts of the text is another color. The reversing happens just based on what is covered and what isn’t, even if it’s just a part of a letter. If you were looking for more of an accessibility-based “change the text color to make sure it has enough contrast” thing, Sass can also help with that.
The XOXO site used mix-blend-mode: darken; quite a bit to to have backgrounds, shapes, and text all interact in subtle/interesting/beautiful ways that we haven’t seen a whole lot on the web yet.
The mix-blend-mode property isn’t well supported at the moment and neither is the animatable content property. So make sure to provide fallbacks if you decide to use either of these tricks.