В HTML цвет можно задавать тремя способами:
Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:
Цвет текста – красный
Наиболее популярные цвета стандарта Консорциума Всемирной паутины (англ. World Wide Web Consortium, W3C):
Цвет | Название | Цвет | Название | Цвет | Название | Цвет | Название |
---|---|---|---|---|---|---|---|
Black | Gray | Silver | White | ||||
Yellow | Lime | Aqua | Fuchsia | ||||
Red | Green | Blue | Purple | ||||
Maroon | Olive | Navy | Teal |
Пример использования различных цветовых названий:
При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red) , G — зеленый (green) , В — синий (blue) . Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255. Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:
Значения R G B также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки # , например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки # можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.
Список широко распространённых цветов (название, HEX и RGB):
Английское название | Русское название | Образец | HEX | RGB | ||
---|---|---|---|---|---|---|
Amaranth | Амарантовый | #E52B50 | 229 | 43 | 80 | |
Amber | Янтарный | #FFBF00 | 255 | 191 | 0 | |
Aqua | Сине-зеленый | #00FFFF | 0 | 255 | 255 | |
Azure | Лазурный | #007FFF | 0 | 127 | 255 | |
Black | Черный | #000000 | 0 | 0 | 0 | |
Blue | Синий | #0000FF | 0 | 0 | 255 | |
Bondi Blue | Вода пляжа Бонди | #0095B6 | 0 | 149 | 182 | |
Brass | Латунный | #B5A642 | 181 | 166 | 66 | |
Brown | Коричневый | #964B00 | 150 | 75 | 0 | |
Cerulean | Лазурный | #007BA7 | 0 | 123 | 167 | |
Dark spring green | Тёмный весенне-зелёный | #177245 | 23 | 114 | 69 | |
Emerald | Изумрудный | #50C878 | 80 | 200 | 120 | |
Eggplant | Баклажановый | #990066 | 153 | 0 | 102 | |
Fuchsia | Фуксия | #FF00FF | 255 | 0 | 255 | |
Gold | Золотой | #FFD700 | 250 | 215 | 0 | |
Gray | Серый | #808080 | 128 | 128 | 128 | |
Green | Зелёный | #00FF00 | 0 | 255 | 0 | |
Indigo | Индиго | #4B0082 | 75 | 0 | 130 | |
Jade | Нефритовый | #00A86B | 0 | 168 | 107 | |
Lime | Лайм | #CCFF00 | 204 | 255 | 0 | |
Malachite | Малахитовый | #0BDA51 | 11 | 218 | 81 | |
Navy | Тёмно-синий | #000080 | 0 | 0 | 128 | |
Ochre | Охра | #CC7722 | 204 | 119 | 34 | |
Olive | Оливковый | #808000 | 128 | 128 | 0 | |
Orange | Оранжевый | #FFA500 | 255 | 165 | 0 | |
Peach | Персиковый | #FFE5B4 | 255 | 229 | 180 | |
Pumpkin | Тыква | #FF7518 | 255 | 117 | 24 | |
Purple | Фиолетовый | #800080 | 128 | 0 | 128 | |
Red | Красный | #FF0000 | 255 | 0 | 0 | |
Saffron | Шафрановый | #F4C430 | 244 | 196 | 48 | |
Sea Green | Зелёное море | #2E8B57 | 46 | 139 | 87 | |
Swamp green | Болотный | #ACB78E | 172 | 183 | 142 | |
Teal | Сине-зелёный | #008080 | 0 | 128 | 128 | |
Ultramarine | Ультрамариновый | #120A8F | 18 | 10 | 143 | |
Violet | Фиолетовый | #8B00FF | 139 | 0 | 255 | |
Yellow | Жёлтый | #FFFF00 | 255 | 255 | 0 |
Коды цветов (фон) по насыщенности и оттенку.
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.
Имя | Цвет | Код | RGB | HSL | Описание |
---|---|---|---|---|---|
white | #ffffff или #fff | rgb(255,255,255) | hsl(0,0%,100%) | Белый | |
silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Серый | |
gray | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Темно-серый | |
black | #000000 или #000 | rgb(0,0,0) | hsl(0,0%,0%) | Черный | |
maroon | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Темно-красный | |
red | #ff0000 или #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Красный | |
orange | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Оранжевый | |
yellow | #ffff00 или #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Желтый | |
olive | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Оливковый | |
lime | #00ff00 или #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Светло-зеленый | |
green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Зеленый | |
aqua | #00ffff или #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Голубой | |
blue | #0000ff или #00f | rgb(0,0,255) | hsl(240,100%,50%) | Синий | |
navy | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Темно-синий | |
teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Сине-зеленый | |
fuchsia | #ff00ff или #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Розовый | |
purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Фиолетовый |
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb , а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° - зелёному, а 240° - синему. Значение оттенка может изменяться от 0 до 359.
Рис. 1. Цветовой круг
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Авторы не гарантируют вашей безопасности при их использовании и снимают с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!
Результат данного примера показан на рис. 2.
Рис. 2. Цвета на веб-странице
К сожалению, вкусовые ощущения на сайте отобразить пока невозможно. Но это можно сполна компенсировать с помощью цветовой гаммы. Ведь цвета html позволяют отобразить любой из миллионов оттенков. Так что «цветных карандашей » в его наборе намного больше, чем семь.
В html цвет может быть задан в нескольких форматах:
1. В виде шестнадцатеричного значения – используются код, заданный в шестнадцатеричной системе исчисления. Такие коды цветов в html состоят из трех пар шестнадцатеричных чисел. Каждая пара отвечает за насыщенность оттенка своим основным цветом:
В начале кода (перед цифрами ) ставится решетка. Так обозначается шестнадцатеричный цветовой код. Кроме чисел от 1 до 9 в этой системе исчисления используются буквы латинского алфавита (A, B, C, D, E, F).
Например, код белого цвета в html будет иметь вид #FFFFFF :
2. Ключевым словом – сейчас html поддерживает около 147 ключевых слов. Но не все из этих слов являются уникальными. Некоторые из них ссылаются на один и тот же цветовой оттенок.
Серый цвет обозначается двумя ключевыми словами: grey и gray . Их шестнадцатеричный код (HEX ) задается одним и тем же значением #808080 .
Пример :
#808080
3. В формате RGB – эта кодировка цветов в html основана на использовании трех значений, задаваемых в диапазоне от 0 до 255. Каждое из них определяет насыщенность оттенка одним из основных цветов:
Номер цвета в формате RGB записывается в таком виде: rgb(0, 210, 100).
background-color:rgb(100,186,43)
4. В формате RGBA – он представляет собой усовершенствованный формат RGB , где четвертым значением задается прозрачность цвета в виде десятичной дроби от 0 до 1.
Пример использования:
background-color:rgba(100,86,143,0.2)
background-color:rgba(100,86,143,0.5)
background-color:rgba(100,86,143,0.8)
background-color:rgba(100,86,143,1)
При таком большом разбросе форматов установки цвета легко запутаться. Поэтому была придумана специальная таблица цветов. В ней к 147 ключевым названиям цветовых оттенков приведены коды соответствия во всех основных стандартах представления цвета. Дополнительно каждое поле снабжено планкой для визуального подбора цвета. Одна из таких таблиц представлена на сайте colorscheme.ru :
Но даже с помощью такой структуризации соответствия подбор нужного оттенка может оказаться затруднительным. Да и не факт, что в таблице кодов цветов найдется нужный.
Чтобы обойти эту преграду и максимально упростить подбор нужного оттенка, были разработаны интерактивные веб-сервисы. Их пользовательский интерфейс может несколько разниться между собой.
На сайте html-color-codes.info генератор цветов имеет такой вид:
А в рамках сервиса color-picker.appsmaster.co этот инструмент реализован немного иначе:
Насыщенность каждого цвета в генераторе задается с помощью специальных ползунков. Визуально оттенок отображается цветом рамки и прямоугольника с левой стороны. Внизу в 3 полях отображается цветовой код в основных форматах.
Но генератор цветов доступен не только на специализированных сайтах. Подобным инструментом снабжены почти все графические редакторы. Например, Photoshop :
А было это давно, еще в эпоху видеокарт, поддерживающих всего 256 цветов. В те далекие времена операционные системы могли без искажений отображать лишь определенное количество восьми битных оттенков.
Тогда была выведена великая таблица безопасных цветов. В ней указывалось 216 оттенков, которые могли быть отображены без искажения в любом из браузеров того времени. И по сей день эта «великая рукопись » еще доступна на некоторых ресурсах:
В наше время все изменилось. Поэтому все правила техники безопасности при работе с цветом в html полностью аннулируются. Ведь современное компьютерное железо поддерживает более 16 миллионов различных оттенков. И 216 безопасных цветов канули в лету.
Эти данные полностью подтверждаются статистикой. Судя по ней, в 2014 году всего лишь 0.5% пользователей имеют компьютеры, поддерживающие лишь 256 оттенков.
Природным гармоничным чувством вкуса наделены далеко не все из нас. Поэтому правильный подбор цвета может стать настоящим испытанием. Но, хвала науке, даже цветовую гармонию ей удалось описать в виде нескольких схем. Все они основаны на использовании цветового круга. Схемы гармоничного подбора цветов в html :
Реализация всех этих схем хорошо представлена в рамках сервиса paletton.com . Он позволяет без труда осуществить гармоничный подбор цвета.
Коды цветов в CSS используются для указания цвета. Как правило, коды цвета или цветовые значения используются для установки цвета либо для переднего плана элемента (например, цвет текста, ссылки), либо для фона элемента (цвет фона, блока). Они также могут использоваться для изменения цвета кнопки, границ, маркера, при наведении и других декоративных эффектов.
Вы можете задать свои значения цвета в различных форматах. В следующей таблице перечислены все возможные форматы:
Ниже более подробно описаны перечисленные форматы.
Шестнадцатеричный код цвета - это шестизначное представление цвета. Первые две цифры (RR) - представляют собой красное значение, следующие две - это зеленое значение (GG), а последние - синее значение (BB).
Короткий шестнадцатеричный код цвета - это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.
Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.
Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.
RGB значение - это код цвета, который задается с помощью свойства rgb(). Это свойство принимает три значения: по одному для красного, зеленого и синего. Значение может быть целым числом, от 0 до 255, или процентом.
Примечание: не все браузеры поддерживают свойство rgb() цвета, поэтому не рекомендуется его использовать.
Ниже приведен пример, показывающий несколько цветов с использованием значений RGB.
Вы можете создавать миллионы цветовых кодов с помощью нашего сервиса .
Ниже представлена таблица из 216 цветов, которые наиболее безопасные и независимые от компьютера. Эти цвета в CSS варьируются от 000000 до FFFFFF шестнадцатеричного кода. Они безопасны в использовании, поскольку гарантируют, что все компьютеры будут правильно отображать цвет при работе с 256 цветовой палитрой.
Таблица «безопасных» цветов в CSS | |||||
#000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
#003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
#006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
#009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
#00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
#00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
#330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
#333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
#336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
#339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
#33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
#33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
#660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
#663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
#666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
#669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
#66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
#66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
#990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
#993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
#996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
#999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
#99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
#99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
#CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
#CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
#CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
#CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
#CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
#CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
#FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
#FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
#FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
#FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
#FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
#FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |