Установка цвета для текста в CSS. Способы представления цветов
В первой части книги, в некоторых примерах мы уже демонстрировали, как установить цвет текста в CSS. Здесь нет ничего сложного: вам понадобится свойство color и значение того цвета, которым вы желаете окрасить текст.
В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.
Шестнадцатеричные цвета (hex)
Шестнадцатеричная система счисления (hexadecimal, hex) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB , где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.
Сокращенная запись hex-цветов
Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB . Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.
Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.
Примеры сокращенной записи hex-цветов:
| HEX-код | Сокращенная запись |
|---|---|
| #FFDD66 | #FD6 |
| #8833FF | #83F |
| #333333 | #333 |
| #cccccc | #ccc |
Цветовая модель RGB
Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb , а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:
А вот желтовато-горчичный оттенок имеет такое значение:
color: rgb(94, 81, 3); /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */ color: #5E5103;
Значение черного цвета записывается как (0, 0, 0) , а белого – (255, 255, 255) . Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:
color: rgb(100%, 100%, 100%);
Где искать значения цветов
Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC.
Цветовая модель RGBA
Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 , наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5 ). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:
Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:
Первое свойство в примере предназначено для браузера IE8, который отобразит текст нужным цветом, но без прозрачности. А те браузеры, которые понимают RGBA, применят к элементу второе свойство, с прозрачностью.
Цветовые модели HSL (HSLA)
Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:
Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:
Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.
Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:
HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.
Стандартные цвета HTML
Еще один способ представления цветов в веб – это ключевые слова, при помощи которых можно указать цвет для элемента. Пример:
Существует 16 стандартных цветов, которые можно записать в значении свойства color :
| Ключевое слово цвета | HEX-код | RGB |
|---|---|---|
| red | #FF0000 | 255, 0, 0 |
| maroon | #800000 | 128, 0, 0 |
| yellow | #FFFF00 | 255, 255, 0 |
| olive | #808000 | 128, 128, 0 |
| lime | #00FF00 | 0, 255, 0 |
| green | #008000 | 0, 128, 0 |
| aqua | #00FFFF | 0, 255, 255 |
| teal | #008080 | 0, 128, 128 |
| blue | #0000FF | 0, 0, 255 |
| navy | #000080 | 0, 0, 128 |
| fuchsia | #FF00FF | 255, 0, 255 |
| purple | #800080 | 128, 0, 128 |
| white | #FFFFFF | 255, 255, 255 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| black | #000000 | 0, 0, 0 |
Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C.
Использование таких ключевых слов допустимо, но есть риск, что какое-нибудь слово не воспримется браузером. Поэтому рекомендуется вместо ключевых слов записывать шестнадцатеричный код цвета.
Итоги
В CSS цвет текста задается с помощью свойства color , а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.
Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.
Далее в книге вы узнаете, как задать размер шрифта CSS.
Цвета CSS: правила выбора и оформления
Зачем нужны? Цвета в CSS необходимы для создания веб-страницы и оформления ее элементов: фона, шрифта, блоков и т.д. Механизм задействует пиксели мониторов и экранов, сообщая каждому из них необходимый оттенок.
Как задать? В CSS существует несколько способов задать цвет через наименование или с помощью необходимых значений. Второй метод также разделяется в зависимости от того, на какой браузер рассчитан показ изображения.
В статье рассказывается:
- Объекты цвета в CSS
- Свойства цвета в CSS
- Способы задать цвет в CSS
- Установка цвета фона или фонового рисунка
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains
Объекты цвета в CSS
Каждый элемент HTML обладает атрибутом цвета, присваивание которого может выполняться с помощью задания свойств CSS отдельным составляющим этого элемента (тексту, границам и др.).
В общем случае текст с точки зрения верстки HTML обладает свойством color, а фон элемента — свойством background-color. Здесь атрибуты задают цвет соответствующих параметров. Эти свойства могут применяться практически для каждого элемента.
Текст
Ниже будут даны свойства, определяющие цвет непосредственно текста, а также любых элементов оформления текста.
Задает не только цвета текста в CSS, но и оттенки подчеркивания, зачеркивания и подобных оформительских элементов.
background-color
Определяет цвет фоновой подложки.
Добавляет эффект тени для текстовых элементов, а также задает параметры этих теней. Например, данным свойством определяется основной цвет тени. Он путем задания дополнительных атрибутов смешивается с фоном определенным образом.
text-decoration-color
По умолчанию цвет всех элементов оформления текста наследуется от свойства color. Но его можно указать явно, прописав в параметре text-decoration-color. Таким образом, например, задается цвет ссылки в CSS.
Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!
Скачивайте и используйте уже сегодня:
Павел Симонов
Исполнительный директор Geekbrains
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
Получить подборку бесплатно
Уже скачали 24089
text-emphasis-color
С помощью данного свойства определяется цвет, выделяющий диакритические знаки, которые прилегают к каждому символу. В основном параметр используется при работе с алфавитами восточноазиатских языков.
Задает цвет каретки (курсора), определяемой в свою очередь свойством caret. Может использоваться только по отношению к изменяемым объектам HTML (, и т. п.), а также к элементам с установленным атрибутом contenteditable.
Блоки
С точки зрения CSS любой элемент верстки представляется как прямоугольный блок, содержащий какое-то наполнение и имеющий фон и границы.
Представляет собой целую группу свойств, присваивающих цвет границам блоков.
background-color
Задает фоновый цвет.
column-rule-color
Определяет цвет разделителей текстовых колонок.
outline-color
Данным свойством формируется цвет контура, в отличие от границ элемента не перекрывающего другой элемент. Например, таким контуром подсвечивается кнопка, находящаяся в фокусе.
Границы
Граница может быть создана вокруг содержимого любого объекта верстки. Все свойства границ можно задать одним общим свойством border. При этом определяется не только цвет, но и прочие характеристики линии, среди которых толщина (width) и начертание (style).
border-color
Этим свойством задается общий для всей границы цвет.
border-left-color, border-right-color, border-top-color, and border-bottom-color
А для задания цвета отдельно каждой стороне границы используются данные свойства (соответственно для левой, правой, верхней и нижней части).
border-block-start-color, border-block-end-color
Позволяют задать цвет границ, расположенных вблизи соответственно начала или конца блока (то есть, рядом с верхним или нижним краем блока для письма слева направо). Здесь следует делать различие с текстовой строкой, где ее левый край соответствует началу, а правый — концу строки.
border-inline-start-color, border-inline-end-color
Определяется цвет границы, находящейся ближе всего соответственно к началу либо концу текстового содержимого блока. Здесь начало и конец задаются свойствами writing-mode, direction и text-orientation. Это в большинстве случаев необходимо для задания направления текста. К примеру, когда текст идет справа налево, свойство border-inline-start-color будет устанавливать цвет для правого края.
Свойства цвета в CSS
Обычно свойством color задается цвет текстовых символов. Если необходимо закрасить большую площадь или фон, используется background-color. В частности, таким образом определяют цвет кнопки в CSS. Аналогичный элемент в формате SVG закрашивается при помощи свойства fill. Наконец, для задания параметров границ вокруг элементов верстки используют border (или stroke для элементов SVG).
Контролируются свойствами text-shadow (для текста) и box-shadow (для блока). В первом случае задаются вертикальная и горизонтальная составляющая тени. Опционально свойство text-shadow может принимать и третий параметр — радиус рассеивания. Для блочных элементов дополнительно к этому задается необязательный параметр радиуса распространения. Помимо внешних теней имеется возможность создавать внутренние.
Для задания линейного градиента цвета в CSS существуют параметры направления, точки изменения цвета и коэффициент прозрачности.
В целом данные свойства имеют очень простой синтаксис. А с использованием онлайн-генераторов кода работа еще сильнее упрощается. Это полезно также при необходимости создания кода для устаревших браузеров.
Подобным образом задаются градиенты для формата SVG. В этом случае формируется блок . Для обращения к нему используется идентификатор.
Код выглядит следующим образом:
Имеется поддержка непрозрачности, дающей возможность создавать привлекательные эффекты.
Способы задать цвет в CSS
Выбор ключевого слова
Проще всего выбрать предопределенное имя цвета из списка ключевых слов CSS. Данный перечень насчитывает 147 таких слов, из которых 17 — заимствованные из HTML названия цветов: white, black, red, yellow, blue, green, orange, purple, gray, silver, aqua, fuchsia, lime, maroon, navy, olive, teal. Остальные 130 были добавлены позднее в CSS версии 2.
Как задать цвет в css
Тип CSS data type предоставляет цвет в цветовом спектре sRGB. В может включать значения прозрачности Альфа-канала (alpha-channel), указывающие, как цвет сочетается с его фоном.
В может быть определена любым из следующих способов can.
- Использование или подключённого свойства ведённого в параметр (например, blue или transparent )
- Использование кубической системы координат RGB (via the #-hexadecimal or the rgb() and rgba() functional notations)
- Использование цилиндрической системы координат HSL (через функциональные обозначения hsl() и hsla() )
**Примечание:**В этой статье подробно описывается тип данных . Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к элементам HTML с помощью CSS.
Синтаксис
Для типа данных задаётся с помощью одного из следующих параметров.
Примечание: значения точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили устройств вывода.
Ключевые цвета
Ключевые слова для цвета — это идентификаторы без учёта регистра, представляющие определённый цвет, например red , blue , black или lightseagreen . Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имён.
Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:
- HTML распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG.
- В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.
- Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.
- Несколько ключевых слов являются псевдонимами друг для друга:
- aqua / cyan
- fuchsia / magenta
- darkgray / darkgrey
- darkslategray / darkslategrey
- dimgray / dimgrey
- lightgray / lightgrey
- lightslategray / lightslategrey
- gray / grey
- slategray / slategrey
Примечание: Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:
- CSS Level 1 включал только 16 основных цветов, называемых цветами VGA, поскольку они были взяты из набора отображаемых цветов на видеокартах VGA
- CSS Level 2 добавил ключевое слово orange .
- Хотя различные цвета не в спецификации (в основном адаптированные из списка цветов X11) поддерживались ранними браузерами, они не были формально определены до уровня SVG 1.0 и CSS Colors 3. Они называются расширенными цветовыми ключевыми словами, цветами X11 или цветами SVG.
- CSS Colors Level 4 добавил ключевое слово rebeccapurple, чтобы почтить пионера веб-Эрика Мейера.
Спецификация Эквивалент RGB Ключевое слово RGB hex значение Видео сайта CSS Level 1 black #000000 silver #c0c0c0 gray #808080 white #ffffff maroon #800000 red #ff0000 purple #800080 fuchsia #ff00ff green #008000 lime #00ff00 olive #808000 yellow #ffff00 navy #000080 blue #0000ff teal #008080 aqua #00ffff CSS Level 2 (Revision 1) orange #ffa500 CSS Color Module Level 3 aliceblue #f0f8ff antiquewhite #faebd7 aquamarine #7fffd4 azure #f0ffff beige #f5f5dc bisque #ffe4c4 blanchedalmond #ffebcd blueviolet #8a2be2 brown #a52a2a burlywood #deb887 cadetblue #5f9ea0 chartreuse #7fff00 chocolate #d2691e coral #ff7f50 cornflowerblue #6495ed cornsilk #fff8dc crimson #dc143c cyan
(synonym of aqua )#00ffff darkblue #00008b darkcyan #008b8b darkgoldenrod #b8860b darkgray #a9a9a9 darkgreen #006400 darkgrey #a9a9a9 darkkhaki #bdb76b darkmagenta #8b008b darkolivegreen #556b2f darkorange #ff8c00 darkorchid #9932cc darkred #8b0000 darksalmon #e9967a darkseagreen #8fbc8f darkslateblue #483d8b darkslategray #2f4f4f darkslategrey #2f4f4f darkturquoise #00ced1 darkviolet #9400d3 deeppink #ff1493 deepskyblue #00bfff dimgray #696969 dimgrey #696969 dodgerblue #1e90ff firebrick #b22222 floralwhite #fffaf0 forestgreen #228b22 gainsboro #dcdcdc ghostwhite #f8f8ff gold #ffd700 goldenrod #daa520 greenyellow #adff2f grey #808080 honeydew #f0fff0 hotpink #ff69b4 indianred #cd5c5c indigo #4b0082 ivory #fffff0 khaki #f0e68c lavender #e6e6fa lavenderblush #fff0f5 lawngreen #7cfc00 lemonchiffon #fffacd lightblue #add8e6 lightcoral #f08080 lightcyan #e0ffff lightgoldenrodyellow #fafad2 lightgray #d3d3d3 lightgreen #90ee90 lightgrey #d3d3d3 lightpink #ffb6c1 lightsalmon #ffa07a lightseagreen #20b2aa lightskyblue #87cefa lightslategray #778899 lightslategrey #778899 lightsteelblue #b0c4de lightyellow #ffffe0 limegreen #32cd32 linen #faf0e6 magenta
(synonym of fuchsia )#ff00ff mediumaquamarine #66cdaa mediumblue #0000cd mediumorchid #ba55d3 mediumpurple #9370db mediumseagreen #3cb371 mediumslateblue #7b68ee mediumspringgreen #00fa9a mediumturquoise #48d1cc mediumvioletred #c71585 midnightblue #191970 mintcream #f5fffa mistyrose #ffe4e1 moccasin #ffe4b5 navajowhite #ffdead oldlace #fdf5e6 olivedrab #6b8e23 orangered #ff4500 orchid #da70d6 palegoldenrod #eee8aa palegreen #98fb98 paleturquoise #afeeee palevioletred #db7093 papayawhip #ffefd5 peachpuff #ffdab9 peru #cd853f pink #ffc0cb plum #dda0dd powderblue #b0e0e6 rosybrown #bc8f8f royalblue #4169e1 saddlebrown #8b4513 salmon #fa8072 sandybrown #f4a460 seagreen #2e8b57 seashell #fff5ee sienna #a0522d skyblue #87ceeb slateblue #6a5acd slategray #708090 slategrey #708090 snow #fffafa springgreen #00ff7f steelblue #4682b4 tan #d2b48c thistle #d8bfd8 tomato #ff6347 turquoise #40e0d0 violet #ee82ee wheat #f5deb3 whitesmoke #f5f5f5 yellowgreen #9acd32 CSS Color Module Level 4 rebeccapurple #663399 Прозрачное ключевое слово
Ключевое слово transparent представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически transparent — это ярлык для rgba (0,0,0,0) .
Примечание: чтобы предотвратить непредвиденное поведение, например, в градиент , текущая спецификация CSS утверждает, что transparent должен быть вычислен в Альфа-предварительно умноженном цветовом пространстве. Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением 0 .
Примечание: transparent не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения для двух свойств CSS: background и border . Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, transparent был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение .
currentColor ключевое слово
Ключевое слово currentColor представляет значение свойства элемента color (en-US). Это позволяет использовать значение color для свойств, которые не получают его по умолчанию.
Если текущий цвет используется в качестве значения свойства color , он вместо этого принимает его значение из наследуемого значения свойства color .
currentColor пример
div style="color:blue; border: 1px dashed currentColor;"> Цвет текста-синий. div style="background:currentColor; height:9px;">div> This block is surrounded by a blue border. div>
RGB цвет
Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.
Синтаксис
Цвета RGB могут быть выражены как шестнадцатеричными (с префиксом #), так и функциональными ( rgb () , rgba () ) нотациями.
Примечание: начиная с уровня цветов CSS 4, rgba() является псевдонимом для rgb() . В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.
R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional. For example, #ff0000 is equivalent to #ff0000ff . R (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, #ff0000 эквивалентно #ff0000ff .
R (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трёхзначная нотация ( #RGB ) является более короткой версией шестизначной формы ( #RRGGBB ). Например, #f09 имеет тот же цвет, что и #ff0099 . Кроме того, четырёхзначная нотация RGB ( #RGB ) является более короткой версией восьмизначной формы ( #RRGGBBAA ). Например, #0f38 имеет тот же цвет, что и #00ff3388 .
CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.
Пример
RGB варианты синтаксиса
В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.
/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */ /* Шестнадцатеричный синтаксис */ #f09 #F09 #ff0099 #FF0099 /* Функциональный синтаксис */ rgb(255,0,153) rgb(255, 0, 153) rgb(255, 0, 153.0) rgb(100%,0%,60%) rgb(100%, 0%, 60%) rgb(100%, 0, 60%) /* Ошибка! Не смешивайте цифры и проценты. */ rgb(255 0 153) /* Шестнадцатеричный синтаксис с Альфа-значением */ #f09f #F09F #ff0099ff #FF0099FF /* Функциональный синтаксис с Альфа-значением */ rgb(255, 0, 153, 1) rgb(255, 0, 153, 100%) /* Синтаксис пробелов */ rgb(255 0 153 / 1) rgb(255 0 153 / 100%) /* Функциональный синтаксис со значением floats */ rgb(255, 0, 153.6, 1) rgb(1e2, .5e1, .5e0, +.25e2%)
RGB вариации прозрачности
/* Шестнадцатеричный синтаксис */ #3a30 /* 0% непрозрачный зелёный цвет */ #3A3F /* полный непрозрачный зелёный цвет */ #33aa3300 /* 0% непрозрачный зелёный цвет */ #33AA3380 /* 50% непрозрачный зелёный цвет */ /* Функциональный синтаксис */ rgba(51, 170, 51, .1) /* непрозрачный зелёный цвет на 10% */ rgba(51, 170, 51, .4) /* непрозрачный зелёный цвет на */ rgba(51, 170, 51, .7) /* непрозрачный зелёный цвет на 70% */ rgba(51, 170, 51, 1) /* полный непрозрачный зелёный цвет */ /* Синтаксис пробелов */ rgba(51 170 51 / 0.4) /* непрозрачный зелёный цвет на 40%*/ rgba(51 170 51 / 40%) /* непрозрачный зелёный цвет на 40% */ /* Функциональный синтаксис со значением floats */ rgba(255, 0, 153.6, 1) rgba(1e2, .5e1, .5e0, +.25e2%)
Цвет HSL
Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.
Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и лёгкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).
Синтаксис
Цвета HSL выражаются через функциональные обозначения hsl() и hsla() .
Примечание: Начиная с уровня цветов CSS 4, hsla() является псевдонимом для hsl() . В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.
Функциональная нотация: hsl(H, S, L[, A]) или hsla(H, S, L, A)
H (hue) — это цветового круга, заданного в deg S, rad s, градусах или поворотах CSS Color Module Level 4. При записи в виде unitless он интерпретируется как Градусы, как указано в CSS Color Module Level 3. По определению, red=deg=360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла >он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д. S ( насыщенность ) и L ( лёгкость ) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% лёгкость белый, 0% лёгкость чёрный, и 50% лёгкость «нормально». A (alpha) can be a between 0 and 1 , or a , where the number 1 corresponds to 100% (full opacity). A (Альфа) может быть между 0 и 1 или , где число 1 соответствует 100% (полная непрозрачность).
CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.
Examples
HSL варианты синтаксиса
/* Все эти примеры указывают один и тот же цвет: лаванда. */ hsl(270,60%,70%) hsl(270, 60%, 70%) hsl(270 60% 70%) hsl(270deg, 60%, 70%) hsl(4.71239rad, 60%, 70%) hsl(.75turn, 60%, 70%) /* Все эти примеры указывают один и тот же цвет: лаванда, которая на 15% непрозрачна. */ hsl(270, 60%, 50%, .15) hsl(270, 60%, 50%, 15%) hsl(270 60% 50% / .15) hsl(270 60% 50% / 15%)
Полностью насыщенные цвета
Нотация Описание: Итог hsl(0, 100%, 50%) red hsl(30, 100%, 50%) orange hsl(60, 100%, 50%) yellow hsl(90, 100%, 50%) lime green hsl(120, 100%, 50%) green hsl(150, 100%, 50%) blue-green hsl(180, 100%, 50%) cyan hsl(210, 100%, 50%) sky blue hsl(240, 100%, 50%) blue hsl(270, 100%, 50%) purple hsl(300, 100%, 50%) magenta hsl(330, 100%, 50%) pink hsl(360, 100%, 50%) red Более светлая и более тёмная зелень
Нотация Описание: Итог hsl(120, 100%, 0%) black hsl(120, 100%, 20%) hsl(120, 100%, 40%) hsl(120, 100%, 60%) hsl(120, 100%, 80%) hsl(120, 100%, 100%) white Насыщенная и ненасыщенная зелень
Нотация Описание: Итог hsl(120, 100%, 50%) green hsl(120, 80%, 50%) hsl(120, 60%, 50%) hsl(120, 40%, 50%) hsl(120, 20%, 50%) hsl(120, 0%, 50%) gray Вариации прозрачности HSL
hsla(240, 100%, 50%, .05) /* непрозрачный синий на 5% */ hsla(240, 100%, 50%, .4) /* непрозрачный синий на 40% */ hsla(240, 100%, 50%, .7) /* непрозрачный синий на 70% */ hsla(240, 100%, 50%, 1) /* полный непрозрачный синий */ /* Синтаксис пробелов */ hsla(240 100% 50% / .05) /* непрозрачный синий на 5% */ /* Процентное значение для Альфа */ hsla(240 100% 50% / 5%) /* непрозрачный синий на 5% */
Системный цвет
Не все системные цвета поддерживаются на всех системах. Устарело для использования на общедоступных веб-страницах.
Активная граница окна.
Активный заголовок окна. Должен использоваться с текстом CaptionText в качестве цвета переднего плана.
Цвет фона интерфейса нескольких документов.
Фон рабочего стола.
Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом ButtonText цвет переднего плана.
Цвет границы, обращённой к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.
Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.
Следует использовать с ButtonFace или ThreeDFace цвет фона.
Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона ActiveCaption .
Серый (отключён) текст.
Элемент(ы), выбранный в элементе управления. Следует использовать с HighlightText текста цветом переднего плана.
Текст элемента(ов), выбранного в элементе управления. Следует использовать с подсветкой цвета фона.
Граница неактивного окна.
Заголовок неактивного окна. Должен использоваться с цветом переднего плана InactiveCaptionText .
Следует использовать с InactiveCaption неактивным цветом фона заголовка.
Цвет фона для элементов управления всплывающей подсказки. Должен использоваться с цветом переднего плана InfoText .
Цвет текста элементов подсказки. Должен использоваться с и InfoBackground фона.
Фон меню. Должен использоваться с MenuText или -moz-MenuBarText строки меню цвет переднего плана.
Текст в меню. Следует использовать с меню Цвет фона.
Цвет фона полос прокрутки.
Цвет более тёмной (как правило, внешней) из двух границ от источника света для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
Should be used with the ButtonText foreground color. Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.
Цвет более светлого (обычно внешнего) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
Фон окна. Следует использовать с WindowText цвет переднего плана.
Текст в windows. Следует использовать с цветом фона окна.
Расширенные Цвета Системы Mozilla
- -moz-ButtonDefault
- : Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.
- : Цвет фона кнопки, на которую наведён указатель мыши (который будет Трёхлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.
- : Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с- -moz-ButtonHoverFace background color.
- : Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана -moz-CellHighlightText . Смотрите также -moz-html-CellHighlight .
- : Цвет текста для выбранного элемента в дереве. Следует использовать с цветом фона moz-CellHighlight background . Смотрите также -moz-html-CellHighlightText выделения ячейки.
- : цвет фона для комбинированных полей -moz-ComboboxText . Должен использоваться с цветом переднего плана текста-moz-Combobox. В версиях до 1.9.2 вместо этого используйте -moz-Field .
- : цвет текста для комбинированных полей. Следует использовать с цветом фона -moz-Combobox . В версиях до 1.9.2 вместо этого используйте -moz-FieldText .
- : Цвет фона для диалоговых окон. Должен использоваться с цветом переднего плана — -moz-DialogText .
- : Цвет текста для диалоговых окон. Должен использоваться с цветом фона -moz-Dialog .
- : цвет фона для чётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText . В версиях Gecko до 1.9, используйте-moz-поле. Смотрите также -moz-OddTreeRow .
- : Text field background color. Should be used with the -moz-FieldText foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана -moz-FieldText .
- : Text field text color. Should be used with the -moz-Field , -moz-EvenTreeRow , or -moz-OddTreeRow background color. Текстовое поле цвет текста. Следует использовать с -moz-Field , -moz-EvenTreeRow или -moz-OddTreeRow цветом фона строки дерева.
- : Background color for highlighted item in HTML s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight . цвет фона для выделенного элемента в HTML s. должен использоваться с цветом переднего плана -moz-html-CellHighlight . До Gecko 1.9, используйте -moz-CellHighlightText .
- : цвет текста для -moz-html-CellHighlight выделенных элементов в HTML s. должен использоваться с цветом фона. До Gecko 1.9, используйте moz-html-CellHighlight .
- : Цвет фона для зависших пунктов меню. Часто похожи на Highlight . Следует использовать с moz-MenuHoverText или -moz-MenuBarHoverText при наведении цвет текста переднего плана.
- : Text color for hovered menu items. Often similar to HighlightText . Should be used with the -moz-MenuHover background color. Цвет текста для зависших пунктов меню. Часто похоже на выделение текста HighlightText . Следует использовать с -moz-MenuHover наведите цвет фона.
- : цвет текста в строках меню. Часто похоже на текст меню » MenuText «. Должен использоваться поверх фона Menu .
- : Цвет для зависшего текста в строках меню. Часто похоже на -moz-MenuHoverText меню наведения текста. Следует использовать поверх -moz-MenuHover наведите фон.
- : цвет гиперссылки платформы по умолчанию.
- : цвет фона для нечётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText . В версиях Gecko до 1.9, используйте -moz-Field . Смотрите также -moz-EvenTreeRow .
- : следует использовать для текста в объектах с — moz-appearance :- moz-win-communications-toolbox; .
- : следует использовать для текста в объектах с — moz-appearance :- moz-win-media-toolbox .
- : Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.
- : Используется для доступа к цвету текста, размещённого над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.
Расширения Цветовых Предпочтений Mozilla
Пользовательское предпочтение цвета текста активных ссылок. Должен использоваться с цветом фона документа по умолчанию.
предпочтения пользователя для цвета фона документа.
предпочтения пользователя для цвета текста.
Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.
Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.
Интерполяция
В анимации и градиентах значения интерполируются на каждый из их красных, зелёных и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени (en-US) .
Соображения доступности
Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.
Технические характеристики
Specification CSS Color Module Level 4
# color-syntaxСовместимость браузера
BCD tables only load in the browser
Смотреть также
- Свойство непрозрачность позволяет определить прозрачность на уровне элемента.
- Некоторые общие свойства, которые используют этот тип данных: цвет , фон , бордюр-колор , окно-тень , контур-цвет , текст-тень
- Применение цвета к элементам HTML с помощью CSS
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 30 окт. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Цвет ссылок
С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.
Задание цвета всех ссылок на странице
Цвета ссылок задаются в качестве атрибутов тега . Атрибуты являются необязательными и если они не указаны используются значения по умолчанию.
link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).
alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.
vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.
В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb , где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).
Пример 1. Задание цветов ссылок
Цвет ссылок Содержание сайта
Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.
Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A .
visited — Стиль для посещенной ссылки.
active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
hover — Стиль для ссылки при наведении на нее мышью.
В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей. Для этого воспользуемся стилевым свойством color , оно задает цвет определенного текста, в данном случае, ссылок.
Пример 2. Цвет ссылок, заданных через стили
Использование стилей Содержание сайта
Задание цвета отдельных ссылок на странице
Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.
Пример 3. Изменение цвета ссылки с помощью стилей
Цвет ссылок Содержание сайта
Интернет-маркетинг
Юзабилити
В данном примере приведены три разных способа задания цвета с помощью стилей.