HTML5. Учебник цветов
Цвета отображаются, сочетая КРАСНЫЙ (RED) , ЗЕЛЁНЫЙ (GREEN) и СИНИЙ (BLUE) свет.
Названия цветов
В каскадной таблице стилей CSS цвета можно установить с помощью названий цветов:
Пример:
| Цвет | Название |
|---|---|
| Red (красный) | |
| Yellow (жёлтый) | |
| Cyan (бирюзовый) | |
| Blue (синий) | |
| Magenta (пурпурный) |
CSS значения цветов
С помощью CSS цвета могут быть указаны разными способами:
- По названию цветов
- Как RGB значение
- Как шестнадцятеричные значения (HEX)
- Как HSL значение (CSS3)
- Как HWB значение (CSS4)
RGB Цвета
RGB значения цветов поддерживаются во всех браузерах.
Значение цвета RGB задаётся с помощью: rgb ( RED , GREEN , BLUE ).
Каждый параметр определяет интенсивность цвета как целое число от 0 до 255.
Например, rgb (0,0,255) отображается как синий, потому что синий параметр установлен на его самое высокое значение (255), а другие — на 0.
Пример:
| Цвет | RGB | Цвет |
|---|---|---|
| rgb(255,0,0) | Красный | |
| rgb(0,255,0) | Зелёний | |
| rgb(0,0,255) | Синий |
Оттенки серого наиболее часто определяются с использованием равных значений для всех трёх источников света:
Пример:
| Цвет | RGB | Цвет |
|---|---|---|
| rgb(0,0,0) | Чёрный | |
| rgb(128,128,128) | Серый | |
| rgb(255,255,255) | Белый |
Шестнадцатеричные цвета (HEX)
Шестнадцатеричные значения цветов также поддерживаются во всех браузерах.
Шестнадцатеричный цвет задаётся с помощью: # RR GG BB .
RR (красный), GG (зелёний) и BB (синий) это шестнадцатеричные целые числа между 00 и FF, что определяют интенсивность цвета.
Например, #0000FF отображается в виде синего цвета, потому что синий компонент установлен на его самое высокое значение (FF), а другие — на 00.
Пример:
| Цвет | HEX | RGB | Цвет |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Красный | |
| #00FF00 | rgb(0,255,0) | Зелёний | |
| #0000FF | rgb(0,0,255) | Синий |
Оттенки серого часто определяются с использованием равных значений для всех трёх источников света:
Пример:
| Цвет | HEX | RGB | Цвет |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Чёрный | |
| #808080 | rgb(128,128,128) | Серый | |
| #FFFFFF | rgb(255,255,255) | Белый |
Верхний или нижний регистр?
Для задания шестнадцатеричных значений (HEX) можно использовать буквы как верхнего регистра, так и буквы нижнего регистра.
Нижний регистр легче писать. Верхний регистр легче читать.
Названия цветов
В следующем разделе вы найдёте полный алфавитный список названий цветов с шестнадцатеричнымы значениями:
Цвета в CSS
Цвета играют жизненно важную роль в формировании внешнего вида веб-страниц. С помощью CSS мы можем управлять основным цветом элементов и их фоновым цветом. Для этого, соответственно, используются свойства color и background . Когда, много лет назад, я изучал CSS, мне не удалось найти доходчивого руководства по использованию цветов в CSS. Поэтому я решил написать такое руководство сам. В этом материале я расскажу о типах цветов и о ключевых словах, используемых при работе с цветами. Мы поговорим о том, в каких ситуациях используются те или иные методики работы с цветами и рассмотрим примеры. Сразу скажу, что здесь я не буду касаться теории цвета.
Свойство color
На MDN можно найти сведения о том, что CSS-свойство color позволяет задавать основной цвет элемента (foreground color, его также называют «цветом переднего плана»), который описывает цвет текста элемента и цвет элементов оформления текста. На основе значения этого свойства устанавливается значение currentColor .
Итак, свойство color позволяет задать основной цвет элемента. При настройке этого свойства можно использовать различные значения:
- Названия именованных цветов.
- Шестнадцатеричные коды цветов.
- Цвета, задаваемые с помощью функций rgb() и hsl() .
- Глобальные значения inherit , initial , unset .
- Ключевое слово currentColor .
Именованные цвета
CSS поддерживает стандартные наименования цветов, которые можно использовать, просто указывая в качестве значения свойства color имя нужного цвета. Вот как это выглядит:
Вот, если интересно, полный список имён цветов. Тут стоит сказать о том, что некоторые имена цветов поддерживаются не во всех браузерах.
В целом, я — не фанат именованных цветов, так как мне нелегко запомнить то, как именно выглядят такие цвета. Например, иногда я вижу, как веб-разработчики, в качестве значения свойства color , используют имена цветов white или black . Это, конечно, нельзя назвать неприемлемым, я не берусь осуждать тех, кто так поступает. Но, в целом, я не рекомендовал бы пользоваться именованными цветами. Вот единственная ситуация, в которой я воспользовался бы такими цветами:
Здесь я использую красный цвет ( red ) для того чтобы быстро показать обводку всех элементов страницы. Цвет red популярен в подобных ситуациях, мне даже доводилось видеть мемы об этом.
Шестнадцатеричные цветовые значения
Шестнадцатеричный код цвета состоит из шести символов. Например, значение #ffffff представляет белый цвет. При описании цветов с использованием шестнадцатеричных значений есть одна особенность, позволяющая, в определённых ситуациях, использовать сокращённую запись кода цвета.
Дело в том, что если пара значений в описании одного компонента цвета идентична, одно из таких значений можно убрать. Каждая пара значений представляет собой описание одного из компонентов цвета. Это, соответственно, компоненты Red (красный), Green (зелёный) и Blue (Синий). Рассмотрим следующий пример:
Значение #222222 эквивалентно значению #222 . Если представить исходный шестнадцатеричный код в виде 22 , 22 , 22 , то, чтобы получить из него код 2 , 2 , 2 , достаточно взять из каждой пары значений по одному.
Сокращение шестнадцатеричных кодов цветов
Цвета, задаваемые в формате RGB/RGBA
При использовании цветовой модели RGB (Red, Green, Blue — красный, зелёный, синий) цвета представляют тремя значениями, описывающими цветовые каналы — соответственно — красный, зелёный и синий канал. Каждое из значений можно представить числом, находящимся в диапазоне от 0 до 255, или процентным значением — от 0 до 100%.
Если три значения равны 0, то получится чёрный цвет. А если все три цветовых компонента установлены в значение 255, то получится белый. То же самое справедливо и при использовании процентных значений.
При описании цветов с использованием цветовой модели RGB можно, помимо цветовых компонентов, указывать и значение, соответствующее альфа-каналу, которое позволяет управлять прозрачностью цвета. Это помогает в работе с насыщенностью цветов, что весьма полезно. Ниже мы рассмотрим некоторые варианты использования цветов, при описании которых используется альфа-канал. Для работы с такими цветами применяется функция rgba() :
Если значение, соответствующее альфа-каналу, равно нулю, тогда основной или фоновый цвет элемента окажется полностью прозрачным, то есть — невидимым.
Цвета, задаваемые в формате HSL
Я редко вижу использование цветовой модели HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота), но в последнее время эта цветовая модель стала привлекать к себе всё больше внимания со стороны дизайнеров и разработчиков.
Цветовой круг
На цветовом круге каждому цвету соответствует определённый угол, описывающий цветовой тон (hue). Для описания HSL-цвета, помимо тона, нужно указать значения, отвечающие за насыщенность и светлоту цвета.
Разберём процесс описания HSL-цветов. Представим, что нас интересует цветовой тон, показанный на следующем рисунке.
Выбор цветового тона
Для выбора насыщенности и светлоты можно воспользоваться удобным инструментом, который находится здесь. А именно, после выбора тона, насыщенность и светлоту цвета можно представить так, как показано ниже.
Выбор насыщенности и светлоты
Шкала насыщенности, в начале, представлена серым цветом, а в конце — цветом, который мы выбрали на цветовом круге. Шкала светлоты начинается с чёрного цвета, доходит до выбранного цветового тона и заканчивается белым цветом.
Эта гибкость может оказаться очень кстати. Например, можно выбрать цветовой тон, а потом подстроить насыщенность и светлоту в соответствии со своими нуждами. Такой подход позволяет создавать динамичные и лёгкие в использовании цветовые палитры.
Ключевое слово currentColor
Ключевое слово currentColor хранит значение CSS-свойства color . Его можно использовать для настройки элементов, которые, по умолчанию, не наследуют цвета от их родительских элементов. Вот некоторые свойства, значения которых, по умолчанию, устанавливаются равными currentColor :
- border-color
- text-decoration-color
- outline-color
- box-shadow
Как думаете, каким будет значение свойства border-color ? Очевидно — таким же, как и значение свойства color . Это так из-за того, что, по умолчанию, значением border-color является значение currentColor . Возможно, это легче представить себе, если переписать предыдущий пример так:
Интересной особенностью currentColor является тот факт, что это ключевое слово можно использовать и на уровне родительского элемента, и для дочерних элементов.
В этом примере currentColor можно использовать и для элемента <h1> , и для элемента <span> :
Использование инструментов разработчика для исследования цветов
При проведении экспериментов с CSS-цветами можно воспользоваться одной полезной возможностью инструментов разработчика Chrome. Для вызова этой возможности нужно выбрать некий элемент, цвета которого заданы в шестнадцатеричном формате, и переключиться в режим его исследования. Затем нужно щёлкнуть по маленькому квадратику, который представляет цвет, используемый элементом в данный момент.
Переключатель
Этот приём подходит только для шестнадцатеричных цветов и для свойств, при настройке которых используются CSS-переменные:
Тут надо сказать о том, что при использовании HSL-цветов в комбинации с CSS-переменными всё ещё можно столкнуться с неоднородным поведением браузеров. Например, вывод вышеприведённого примера в Firefox не приведёт к показу цветного квадратика. Вот как это выглядит в разных браузерах.
Браузеры по-разному работают с переменными
Синий квадратик, выводимый в Safari, демонстрирует вычисленное значение используемого CSS-свойства. Это лучше, чем ничего.
Возможно, вы сейчас задаётесь вопросом о том, зачем нам вообще нужен этот квадратик, представляющий вычисленный цвет и выводимый около CSS-свойства? Дело в том, что без него мы не сможем открыть средства инструментов разработчика для работы с цветом, которые помогают исследовать доступность используемого цветового решения.
Вышеописанная проблема проявляется не всегда. Например, основной цвет кнопки задан в виде color: #fff , а её фоновый цвет указан с использованием hsl() . В такой ситуации можно открыть палитру инструментов разработчика, обратившись к свойству color , и взглянуть на уровень контраста. Правда, для элементов, которые используют HSLA-значения с CSS-переменными, этого сделать нельзя.
Цветовые значения, разделённые пробелами
Обычно функции rgb() и hsl() вызывают, передавая им значения, разделённые запятыми. Существует и другой способ вызова таких функций, достаточно новый, но пользующийся отличной браузерной поддержкой. При его использовании значения, передаваемые функциям, разделяют пробелами.
Учитывайте то, что отделение сведений о прозрачности с помощью косой черты — это лишь дополнительная возможность. Ей стоит пользоваться только тогда, когда нужно настроить прозрачность цвета.
Новый способ описания цветов лучше старого. Рекомендуется пользоваться именно им, так как новые CSS-функции, используемые для описания цвета ( lab() , lch() и color() ), будут работать только с переданными им значениями, разделёнными пробелами. Поэтому полезно будет привыкнуть к такому формату описания цветов, предусмотрев, что несложно, запасной вариант для тех браузеров, которые этот формат не поддерживают.
Хочу отметить, что хотя я и порекомендовал пользоваться в функциях цветовыми значениями, разделёнными пробелами, я не применял их в статье, так как это — достаточно новая возможность CSS. А мне не хотелось бы запутывать читателей.
Глобальные значения (inherit, initial, unset)
Для того чтобы элемент унаследовал бы цвет от родительского элемента, можно воспользоваться глобальным значением inherit . Для того чтобы сбросить цвет, можно прибегнуть к значениям initial и unset . Рассмотрим пример, который поможет нам понять особенности использования этих значений.
▍Ключевое слово inherit
Вот HTML-код верхней части страницы, в которой имеется заголовок, описание и ссылка:
Учитывая то, что свойство color родительского элемента установлено в значение #222 , как вы думаете, каким будет цвет дочерних элементов? Элементы <h2><font color="#3AC1EF"> и <p> унаследуют этот цвет. А элемент <a> — нет, что обусловлено особенностями его стандартного поведения. Интересно, правда?
Цвет ссылок, используемый по умолчанию, выглядит так:
Если надо — можно, с помощью конструкции color: inherit , сделать так, чтобы ссылка, всё же, унаследовала бы цвет от родительского элемента.
▍Ключевое слово unset
На MDN можно узнать о том, что ключевое слово unset позволяет сбросить значение свойства до унаследованного значения в том случае, если свойство естественным образом наследует это значение от родительского элемента. В противном случае значение сбрасывается до его исходного значения.
Вернёмся к предыдущему примеру и сделаем так, чтобы ссылка унаследовала бы цвет от родительского элемента:
Использование вышеприведённой конструкции позволит сбросить цвет до цвета, который может быть унаследован от элемента .hero . А это — именно то, что нам нужно.
Здесь со всем этим можно поэкспериментировать.
Сценарии использования и практические примеры
Пожалуй, теории на сегодня хватит. Поэтому предлагаю рассмотреть практические примеры работы с цветами в CSS.
▍Полупрозрачный RGBA-цвет
Мне часто приходилось видеть, как функция rgba() используется в CSS для создания дизайна, вариант которого представлен на следующем рисунке.
Внутренняя граница
Обратите внимание на то, что у окружностей имеются границы, которые темнее, чем фон этих окружностей. Как сделать это динамически? А сделать это можно, воспользовавшись границей, полупрозрачный цвет которой задан с применением функции rgba() :
Ту же идею можно использовать и при работе с элементами, у которых имеется фон, в случае, когда их дочерние элементы являются их более тёмными вариантами. Взгляните на следующий рисунок.
Полупрозрачный фон
▍Использование HSL-цветов
Цвета, задаваемые с помощью функции hsla() , нравятся мне тем, что при их подборе выбирают цветовой тон (градус на цветовом круге), после чего можно поэкспериментировать с насыщенностью и светлотой цвета для того чтобы сделать готовый цвет светлее или темнее исходного тона.
Это может пригодиться в паре ситуаций. Например, тогда, когда нужно сделать так, чтобы светлота цвета кнопки становилась бы меньше при наведении на эту кнопку мыши.
Кнопка становится темнее при наведении на неё указателя мыши
Эту идею можно развить, скомбинировав функцию hsl() и CSS-переменные для создания цветовой палитры, которая легко поддаётся изменениям.
Указывая основной тон, мы можем использовать его, задавая цвета, позволяющие делать элементы светлее или темнее.
Особенно мне здесь нравится организация работы с оттенками серого цвета. Мне всегда было тяжело запоминать правильные шестнадцатеричные значения для оттенков серого. При использовании hsl() работа с такими цветами значительно упрощается.
Обратите внимание на то, как я создал цветовую палитру, основываясь лишь на одном цветовом тоне и меняя светлоту итогового цвета.
Цвет и изменение светлоты
Полагаю, никто не станет спорить с тем, что при таком подходе очень просто работать с оттенками серого. Мне это очень нравится, я планирую использовать этот приём в своих будущих проектах.
При работе над большими проектами я использовал бы следующий подход, подразумевающий применение CSS-переменных и задействующий изменение светлоты цвета:
Здесь я определил переменную —primary-h , хранящую сведения о цветовом тоне, и переменную —primary-l , в которую записано значение, представляющее собой базовую светлоту. Самое приятное тут то, что у меня теперь есть возможность настраивать цвет, меняя лишь переменную —primary-l :
Здесь можно найти рабочий пример.
▍Использование ключевого слова currentColor с SVG-иконками
Хороший сценарий использования ключевого слова currentColor представлен ситуациями, когда нужно управлять цветом SVG-иконок. Представим, что у нас имеется иконка, после которой идёт текст. Значок иконки и текст должны быть окрашены в один и тот же цвет.
Значок и текст должны быть одного цвета
Ключевое слово currentColor можно использовать для настройки SVG-атрибута fill , а затем назначить нужный цвет родительскому элементу. Взгляните на следующий HTML-код:
Вот применяемый здесь стиль:
При таком подходе значок будет окрашен в цвет, назначенный родительскому элементу.
Более того, тот же подход можно использовать для того чтобы создавать иконки, заключённые в прямоугольные полупрозрачные области, атрибут fill которых также задаётся с помощью currentColor . Это позволяет использовать CSS-свойство color для решения следующих задач:
- Назначение цвета иконке.
- Назначение прямоугольнику полупрозрачного варианта исходного цвета.
Настройка иконки, заключённой в цветной полупрозрачный прямоугольник
Вот соответствующий CSS-код:
Обратите внимание на то, что у элемента <rect> задан атрибут opacity . В разных вариантах иконки меняется лишь значение, соответствующее цветовому тону. Такой подход может оказаться крайне полезным в дизайн-системах, так как он позволяет, не прибегая к каким-то сложным конструкциям, создавать различные варианты значков и согласовывать их цвет с цветом обрамляющих их элементов.
Итоги
Сегодня мы обсудили некоторые особенности описания цветов в CSS, рассмотрели практические приёмы работы с цветами. Хочется надеяться, вам пригодится то, о чём вы сегодня узнали.
Какие CSS-механизмы вы обычно используете, настраивая цвета в своих проектах?
<color>
Тип <color> CSS data type предоставляет цвет в цветовом спектре sRGB. В <color> может включать значения прозрачности Альфа-канала (alpha-channel), указывающие, как цвет сочетается с его фоном.
В <color> может быть определена любым из следующих способов can.
- Использование или подключённого свойства ведённого в параметр (например, blue или transparent )
- Использование кубической системы координат RGB (via the #-hexadecimal or the rgb() and rgba() functional notations)
- Использование цилиндрической системы координат HSL (через функциональные обозначения hsl() и hsla() )
**Примечание:**В этой статье подробно описывается тип данных <color>. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к элементам HTML с помощью CSS.
Синтаксис
Для типа данных задаётся <color> с помощью одного из следующих параметров.
Примечание: значения <color> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили устройств вывода.
Ключевые цвета
Ключевые слова для цвета — это идентификаторы без учёта регистра, представляющие определённый цвет, например red , blue , black или lightseagreen . Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имён.
Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:
-
распознает только 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). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <color> для двух свойств CSS: background и border . Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, transparent был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <color> .
currentColor ключевое слово
Ключевое слово currentColor представляет значение свойства элемента color (en-US). Это позволяет использовать значение color для свойств, которые не получают его по умолчанию.
Если текущий цвет используется в качестве значения свойства color , он вместо этого принимает его значение из наследуемого значения свойства color .
currentColor пример
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 .
Шестнадцатеричное представление: #RGB[A]
R (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трёхзначная нотация ( #RGB ) является более короткой версией шестизначной формы ( #RRGGBB ). Например, #f09 имеет тот же цвет, что и #ff0099 . Кроме того, четырёхзначная нотация RGB ( #RGB ) является более короткой версией восьмизначной формы ( #RRGGBBAA ). Например, #0f38 имеет тот же цвет, что и #00ff3388 .
Функциональная нотация: rgb(R, G, B[, A]) или rgba(R, G, B, A)
R (красный), G (зелёный) и B (синий) могут быть либо <number> s, либо <percentage> s, где число 255 соответствует 100% . А (Альфа) может быть <number> между 0 и 1 или <percentage> , где число 1 соответствует 100% (полная непрозрачность).
Функциональная нотация: rgb(R G B[ A]) or rgba(R G B A)
CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.
Пример
RGB варианты синтаксиса
В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.
RGB вариации прозрачности
Цвет HSL
Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.
Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и лёгкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).
Синтаксис
Цвета HSL выражаются через функциональные обозначения hsl() и hsla() .
Примечание: Начиная с уровня цветов CSS 4, hsla() является псевдонимом для hsl() . В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.
H (hue) — это <угол> цветового круга, заданного в deg S, rad s, градусах или поворотах CSS Color Module Level 4. При записи в виде unitless <number> он интерпретируется как Градусы, как указано в 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 <number> between 0 and 1 , or a <percentage> , where the number 1 corresponds to 100% (full opacity). A (Альфа) может быть <number> между 0 и 1 или <percentage> , где число 1 соответствует 100% (полная непрозрачность).
Функциональная нотация: hsl(H S L[ A]) or hsla(H S L A)
CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.
Examples
HSL варианты синтаксиса
Полностью насыщенные цвета
Нотация Описание: Итог 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
Системный цвет
Не все системные цвета поддерживаются на всех системах. Устарело для использования на общедоступных веб-страницах.
Активная граница окна.
Активный заголовок окна. Должен использоваться с текстом 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 <select> s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight . цвет фона для выделенного элемента в HTML <select> s. должен использоваться с цветом переднего плана -moz-html-CellHighlight . До Gecko 1.9, используйте -moz-CellHighlightText .
- : цвет текста для -moz-html-CellHighlight выделенных элементов в HTML <select> 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
Пользовательское предпочтение цвета текста активных ссылок. Должен использоваться с цветом фона документа по умолчанию.
предпочтения пользователя для цвета фона документа.
предпочтения пользователя для цвета текста.
Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.
Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.
Интерполяция
В анимации и градиентах значения <color> интерполируются на каждый из их красных, зелёных и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени (en-US) .
Соображения доступности
Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.
HTML Цвета
В HTML существует три способа задания цвета. Рассмотрим их.
Как задать цвет, используя значение Hex
HEX – шестнадцатеричная система представления цвета, которая использует арабские десятичные цифры от 0 до 9 и латинские буквы от A до F. В веб-дизайне используются 16 ключевых цветов, так называемый шестнадцатеричный код цвета #RRGGBB, RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.
Регистр букв в Hex не имеет значение. К примеру, определением белого цвета могут быть как заглавные буквы #FFFFFF, так и строчные #ffffff.
Для задания цвета используйте атрибут style, где свойством цвета будет код Hex.
Пример
Результат
В приведенной ниже таблице вы можете найти Hex код для каждого цвета. Получить код необходимого вам цвета вы также можете при помощи инструмента Пипетка/Color Picker.
Как задать цвет, используя название цветов
Для того, чтобы изменить цвет, необходимо указать его название на английском (blue, red, etc.) вместо значения Hex из предыдущего примера.
Пример
Результат
Как задать цвет, используя значение RGB
Для задания цвета используйте атрибут style, где свойством цвета будет код RGB