Html css class text color

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; >    Скопировать Скопировано Не удалось скопировать   

Источник

W3.CSS Colors

The default color class used in W3.CSS is inspired by Material Design.

Material Design colors reflect the colors used in marketing, road signs, and sticky notes.

The following W3.CSS color classes can be used on any HTML element:

W3.CSS Text Color Classes

The following W3.CSS text color classes can be used on any HTML element:

On Black

On Gray

On White

Hover Color Classes

The following W3.CSS hover color classes can be used on any HTML element:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS-свойство color

CSS-свойство color позволяет задавать цвет текста и фона элемента на веб-странице.

⭐ Поддержка браузерами свойства color

selector — это селектор элемента, к которому нужно применить стили, color — название свойства, а value — значение цвета.

Наследование

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

Значения свойства color

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

Подробно про цветовые форматы рассказали в статье.

Свойство color может принимать следующие значения.

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

Значение свойства color может быть задано названием цвета на английском языке, например, red — красный, blue — синий и так далее.

RGB — Red, Green, Blue

Модель цвета, основанная на комбинации красного, зелёного и синего цветов. Пример: rgb(255, 0, 0) , где первое число представляет значение красного цвета, второе число — зелёного цвета, а третье число — синего цвета. Каждое значение может быть в диапазоне от 0 до 255 .

RGBA — Red, Green, Blue, Alpha

Расширение RGB, которое, кроме трёх цветов, включает значение прозрачности. Пример: rgba(255, 0, 0, 0.5) , где первые три числа — значения RGB, а последнее число — значение прозрачности, которое может быть в диапазоне от 0 — полностью прозрачный до 1 — полностью непрозрачный.

HSL — Hue, Saturation, Lightness

Модель цвета, основанная на оттенке — hue, насыщенности — saturation и яркости — lightness цвета. Пример: hsl(0, 100%, 50%) , где первое число — значение оттенка в градусах, второе число — значение насыщенности в процентах, а третье число — значение яркости в процентах.

HSLA — Hue, Saturation, Lightness, Alpha

Расширение HSL, которое также включает в себя значение прозрачности. Пример: hsla(0, 100%, 50%, 0.5) , где первые три числа — значения HSL, а последнее число — значение прозрачности, которое может быть в диапазоне от 0 — полностью прозрачный до 1 — полностью непрозрачный.

HEX — Hexadecimal

Формат цвета, основанный на шестнадцатеричном коде цвета. Пример: #FF0000 , где первые две цифры обозначают значение красного цвета в шестнадцатеричном формате от 00 до FF , следующие две цифры обозначают значение зеленого цвета, а последние две цифры обозначают значение синего цвета.

В CSS также существует несколько специальных ключевых слов, которые можно использовать в качестве значения свойства color . Например, transparent означает полностью прозрачный цвет, а currentColor используется для определения текущего цвета элемента.

Примеры использования

Этот текст будет с изменённым цветом.
 

Этот блок будет с изменённым фоновым цветом.
 

Этот блок будет с изменённым цветом границы.
 

Нюансы использования

Контраст. При выборе цвета текста для ссылок, желательно использовать контрастный цвет, который заметно отличается от цвета обычного текста.

Читаемость. При использовании различных стилей текста, например, жирный или курсив, необходимо убедиться, что цвет текста остаётся читаемым и насыщенным.

Восприятие. Цвет текста может влиять на эмоциональное восприятие контента, поэтому необходимо выбирать его в зависимости от цели и настроения страницы.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник