В HTML цвет чаще всего задаются RGB-кодом. Любой цвет разлагается на три основные составляющие:
Любой цвет задается сочетанием трех чисел, каждое из которых отражает долю одного из трех основных цветов. Каждая доля занимает 1 байт и может варьироваться от 00 до FF (в шестнадцатеричной системе счисления) или от 0 до 255 (в десятичной системе счисления).
Если цвет задается в шестнадцатеричном формате, то перед последовательностью шестнадцатеричных цифр ставится знак решетки ( # ). Порядок чисел, указывающих насыщенность основных цветов, должен выдерживаться строго. Сначала – красный, затем – зеленый, в конце – синий.
Если цвет задается в десятичном формате, то сначала идет ключевое слово rgb, затем в скобках через запятую десятичные числа насыщенности основных цветов.
Для наиболее популярных цветов были введены символьные имена.
Наведите курсор на цвет, чтобы получить шестнадцатеричный и десятичный цветовые коды ниже:
Шестнадцатеричный: #
Красный:
Зеленый:
Синий:
Цветовое пространство RGB
Красный, зеленый и синий используют по 8 бит каждый, которые имеют целочисленные значения от 0 до 255. Это дает 256 * 256 * 256 = 16777216 возможных цветов.
RGB ≡ красный, зеленый, синий
Таким образом, каждый пиксель на светодиодном мониторе отображает цвета за счет комбинации красного, зеленого и синего светодиодов (светоизлучающих диодов).
Когда красный пиксель установлен на 0, светодиод выключен. Когда красный пиксель установлен на 255, светодиод будет полностью включен.
Любое значение между ними устанавливает частичное излучение светодиода.
Перед тем как мы перейдем с Вами к изучению способов указания цвета в HTML, сразу хочу обратить ваше внимание на то, что впоследствии работа с цветом элемента будет происходить в основном с использованием CSS. В рамках изучения HTML мы познакомимся с методами указания цвета для встроенного CSS, а подробное применение рассмотрим уже при изучении CSS 3 в статье «Цветовое оформление в CSS».
В настоящее время цвета могут быть указаны с помощью следующих методов:
Шестнадцатеричные цвета
Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Шестнадцатеричные значение цвета имеет следующий синтаксис:
Все значения должны быть между 00 и FF. Например, значение #0000FF отображается как синий, потому что компонент BB установлен в его самое высокое значение (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.
Допускается сокращать шестнадцатеричные числа до трех символов, если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F.
Пример использования шестнадцатеричных значений:
RGB цвета
Например, значение rgb(0,255,0) отображается как зеленый, так как параметр зеленого установлен в максимальное точке (255), а красный и зелёный установлены в 0. Записывается это следующим образом:
RGBA цвета
RGBA является более современным методом задания цвета, где:
Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:
HSL цвета
К еще одному методу задания цвета относится HSL. HSL это аббревиатура, которая объединяет в себе первые буквы трех признаков:
При этом используется следующий синтаксис:
Ниже приведено изображение, где для каждого блока задано свое значение hsl:
Рис. 16б Пример использования значений hsl
HSLA цвета
По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа-канала, который задает уровень прозрачности со значениями от 0 до 1 (от невидимого до полностью непрозрачного).
Данный формат задания цвета называется HSLA, давайте рассмотрим его применение:
Имена цветов
Кроме вышеуказанных способов задания цвета, существуют и предопределённые (стандартные) цвета, которые вы можете применять к элементам. Ранее мы уже рассматривали примеры с предопределёнными цветами, а полный перечень Вы можете найти в этом разделе.
Цвет
HEX
RGB
Имя
#FF0000
rgb(255,0,0)
Red
#00FF00
rgb(0,255,0)
Green
#0000FF
rgb(0,0,255)
Blue
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Практическое задание № 11.
Нюанс: для выполнения задания вы можете задавать цвет любым методом, но задание считается выполненным если хотя бы один раз было использовано шестнадцатеричное значение, значение RGB, значение HSL и предопределённый цвет.
Если у Вас есть затруднения в выполнении задания, то проинспектируйте код страницы, открыв пример в отдельном окне кликнув по изображению.
Цвета HTML задаются с использованием предопределенных имен цветов, или RGB, Hex, HSL, RGBA, HSLA значений.
Названия цветов
В HTML цвет можно задать с помощью имени цвета:
Цвет фона
Можно задать цвет фона для элементов HTML:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Пример
Hello World
Цвет текста
Вы можете установить цвет текста:
Всем привет
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Пример
Hello World
Цвет границы
Вы можете установить цвет границ:
Всем привет
Всем привет
Всем привет
Example
Hello World
Hello World
Hello World
Значения цвета
В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:
Так же, как название цвет «Tomato»:
Так же, как название цвета «Tomato», но 50% прозрачный:
Пример
Значение RGB
В HTML, цвет может быть указан как RGB значение, используя эту формулу:
Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета между 0 и 255.
Например, RGB (255, 0, 0) отображается красным цветом, так как красный цвет устанавливается в его наивысшее значение (255), а остальные устанавливаются в 0.
Для отображения черного цвета, все параметры цвета должны быть установлены в 0, как это: RGB (0, 0, 0).
Для отображения белого цвета, все параметры цвета должны быть установлены в 255, как это: RGB (255, 255, 255).
Одной из составляющих представления веб-страниц в интернете является цвет, современные браузеры принимают и воспроизводят его, используя цветовые модели RGB, HSL, или же ключевые слова (названия).
Значения цвета в HTML может быть задано одним из следующих способов.
Имена цветов CSS, SVG.
В отличие от Html, в котором стандартными являются 16 цветов, спецификации CSS и SVG, определяют более расширенный список имен, состоящий из 147 названий. Однако, несмотря на наличие в списке сто сорока семи наименований, оригинальные значения имеют только 138, так как все серые цвета могут быть указаны как через «a», так и через «e» (grAy или grEy), а fuchsia и aqua имеют альтернативные имена: magenta и cyan соответственно (последние не поддерживаются HTML 4.01).
Приведенная ниже таблица представляет имена цветов и их значения в HSL и HEX. При использовании имен, следует помнить, что синтаксис SVG отличается от HTML и CSS: атрибут fill, к примеру, применяется как к цвету текста (color), так и объекта (background-color), а stroke используются для задания контура (обводки) элемента.
Имя
R G B
H S L
white
#ffffffhex
0°, 0%, 100%
ivory
#fffff0hex
60°, 100%, 97%
lightyellow
#ffffe0hex
60°, 100%, 94%
yellow
#ffff00hex
60°, 100%, 50%
snow
#fffafahex
0°, 100%, 99%
floralwhite
#fffaf0hex
40°, 100%, 97%
lemonchiffon
#fffacdhex
54°, 100%, 90%
cornsilk
#fff8dchex
48°, 100%, 93%
seashell
#fff5eehex
25°, 100%, 97%
lavenderblush
#fff0f5hex
340°, 100%, 97%
papayawhip
#ffefd5hex
37°, 100%, 92%
blanchedalmond
#ffebcdhex
36°, 100%, 90%
mistyrose
#ffe4e1hex
6°, 100%, 94%
bisque
#ffe4c4hex
33°, 100%, 88%
moccasin
#ffe4b5hex
38°, 100%, 86%
navajowhite
#ffdeadhex
36°, 100%, 84%
peachpuff
#ffdab9hex
28°, 27%, 100%
gold
#ffd700hex
51°, 100%, 50%
pink
#ffc0cbhex
350°, 100%, 88%
lightpink
#ffb6c1hex
351°, 100%, 86%
orange
#ffa500hex
39°, 100%, 50%
lightsalmon
#ffa07ahex
17°, 100%, 74%
darkorange
#ff8c00hex
33°, 100%, 50%
coral
#ff7f50hex
16°, 100%, 66%
hotpink
#ff69b4hex
330°, 100%, 71%
tomato
#ff6347hex
9°, 100%, 64%
orangered
#ff4500hex
16°, 100%, 50%
deeppink
#ff1493hex
328°, 100%, 54%
magenta, fuchsia
#ff00ffhex
300°, 100%, 50%
red
#ff0000hex
0°, 100%, 50%
oldlace
#fdf5e6hex
39°, 85%, 95%
lightgoldenrodyellow
#fafad2hex
60°, 80%, 90%
linen
#faf0e6hex
30°, 67%, 94%
antiquewhite
#faebd7hex
34°, 78%, 91%
salmon
#fa8072hex
6°, 93%, 71%
ghostwhite
#f8f8ffhex
240°, 100%, 99%
mintcream
#f5fffahex
150°, 100%, 98%
whitesmoke
#f5f5f5hex
0°, 0%, 96%
beige
#f5f5dchex
60°, 56%, 91%
wheat
#f5deb3hex
39°, 77%, 83%
sandybrown
#f4a460hex
28°, 87%, 67%
azure
#f0ffffhex
180°, 100%, 97%
honeydew
#f0fff0hex
120°, 100%, 97%
aliceblue
#f0f8ffhex
208°, 100%, 97%
khaki
#f0e68chex
54°, 77%, 75%
lightcoral
#f08080hex
0°, 79%, 72%
palegoldenrod
#eee8aahex
55°, 67%, 80%
violet
#ee82eehex
300°, 76%, 72%
darksalmon
#e9967ahex
15°, 72%, 70%
lavender
#e6e6fahex
240°, 67%, 94%
lightcyan
#e0ffffhex
180°, 100%, 94%
burlywood
#deb887hex
34°, 57%, 70%
plum
#dda0ddhex
300°, 47%, 75%
gainsboro
#dcdcdchex
0°, 0%, 86%
crimson
#dc143chex
348°, 83%, 47%
palevioletred
#db7093hex
340°, 60%, 65%
goldenrod
#daa520hex
43°, 74%, 49%
orchid
#da70d6hex
302°, 59%, 65%
thistle
#d8bfd8hex
300°, 24%, 80%
lightgray, lightgrey
#d3d3d3hex
0°, 0%, 83%
tan
#d2b48chex
34°, 44%, 67%
chocolate
#d2691ehex
25°, 75%, 47%
peru
#cd853fhex
30°, 59%, 53%
indianred
#cd5c5chex
0°, 53%, 58%
mediumvioletred
#c71585hex
322°, 81%, 43%
silver
#c0c0c0hex
0°, 0%, 75%
darkkhaki
#bdb76bhex
56°, 38%, 58%
rosybrown
#bc8f8fhex
0°, 25%, 65%
mediumorchid
#ba55d3hex
288°, 59%, 58%
darkgoldenrod
#b8860bhex
43°, 89%, 38%
firebrick
#b22222hex
0°, 68%, 42%
powderblue
#b0e0e6hex
187°, 52%, 80%
lightsteelblue
#b0c4dehex
214°, 41%, 78%
paleturquoise
#afeeeehex
180°, 65%, 81%
greenyellow
#adff2fhex
84°, 100%, 59%
lightblue
#add8e6hex
195°, 53%, 79%
darkgray, darkgrey
#a9a9a9hex
0°, 0%, 66%
brown
#a52a2ahex
0°, 59%, 41%
sienna
#a0522dhex
19°, 56%, 40%
yellowgreen
#9acd32hex
80°, 61%, 50%
darkorchid
#9932cchex
280°, 61%, 50%
palegreen
#98fb98hex
120°, 93%, 79%
darkviolet
#9400d3hex
282°, 100%, 41%
mediumpurple
#9370dbhex
260°, 60%, 65%
lightgreen
#90ee90hex
120°, 73%, 75%
darkseagreen
#8fbc8fhex
120°, 25%, 65%
saddlebrown
#8b4513hex
25°, 76%, 31%
darkmagenta
#8b008bhex
300°, 100%, 27%
darkred
#8b0000hex
0°, 100%, 27%
blueviolet
#8a2be2hex
271°, 76%, 53%
lightskyblue
#87cefahex
203°, 92%, 76%
skyblue
#87ceebhex
197°, 71%, 73%
gray, grey
#808080hex
0°, 0%, 50%
olive
#808000hex
60°, 100%, 25%
purple
#800080hex
300°, 100%, 25%
maroon
#800000hex
0°, 100%, 25%
aquamarine
#7fffd4hex
160°, 100%, 75%
chartreuse
#7fff00hex
90°, 100%, 50%
lawngreen
#7cfc00hex
91°, 100%, 4%
mediumslateblue
#7b68eehex
249°, 80%, 67%
lightslategray, lightslategrey
#778899hex
210°, 14%, 53%
slategray или slategrey
#708090hex
210°, 13%, 50%
olivedrab
#6b8e23hex
80°, 61%, 35%
slateblue
#6a5acdhex
248°, 54%, 58%
dimgray, dimgrey
#696969hex
0°, 0%, 41%
mediumaquamarine
#66cdaahex
160°, 51%, 60%
rebeccapurple
#663399hex
270°, 50%, 40%
cornflowerblue
#6495edhex
219°, 79%, 66%
cadetblue
#5f9ea0hex
182°, 26%, 50%
darkolivegreen
#556b2fhex
82°, 39%, 30%
indigo
#4b0082hex
275°, 100%, 26%
mediumturquoise
#48d1cchex
178°, 60%, 55%
darkslateblue
#483d8bhex
249°, 39%, 39%
steelblue
#4682b4hex
207°, 44%, 49%
royalblue
#4169e1hex
225°, 73%, 57%
turquoise
#40e0d0hex
174°, 72%, 57%
mediumseagreen
#3cb371hex
147°, 50%, 47%
limegreen
#32cd32hex
120°, 61%, 50%
darkslategray, darkslategrey
#2f4f4fhex
180°, 25%, 25%
seagreen
#2e8b57hex
147°, 50%, 36%
forestgreen
#228b22hex
120°, 61%, 34%
lightseagreen
#20b2aahex
177°, 70%, 41%
dodgerblue
#1e90ffhex
210°, 100%, 56%
midnightblue
#191970hex
240°, 64%, 27%
aqua, cyan
#00ffffhex
180°, 100%, 50%
springgreen
#00ff7fhex
150°, 100%, 50%
lime
#00ff00hex
120°, 100%, 50%
mediumspringgreen
#00fa9ahex
157°, 100%, 49%
darkturquoise
#00ced1hex
181°, 100%, 41%
deepskyblue
#00bfffhex
195°, 100%, 50%
darkcyan
#008b8bhex
180°, 100%, 27%
teal
#008080hex
180°, 100%, 25%
green
#008000hex
120°, 100%, 25%
darkgreen
#006400hex
120°, 100%, 20%
blue
#0000ffhex
240°, 100%, 50%
mediumblue
#0000cdhex
240°, 100%, 40%
darkblue
#00008bhex
240°, 100%, 27%
navy
#000080hex
240°, 100%, 25%
black
#000000hex
0°, 0%, 0%
Для получения информации о других цветах и значениях в HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV воспользуйтесь калькулятором цветов.