Кодирование цвета в HTML
(система RGB)
Изображение, которое мы видим на экране, сторится из точек. Каждая точка
(или группа точек) имеет свой оттенок. Одна экранная точка называется пикселом (pixel).
Если пиксел сильно увеличить, то можно различить в нем 3 люминофора (светящихся элемента),
каждый из которых имеет свой цвет: красный, зеленый, синий. Кодируя цвет, мы задаем силу
свечения каждого из люминофоров. Кодировка происходит чаще всего при помощи атрибута color,
после которого ставится знак "=" и в кавычках указывается код цвета c "решеткой" в начале (то есть color="#ff00dd").
Это и есть система кодирования цвета RGB (от английских слов Red, Green, Blue). Каждый цвет
кодируется двумя цифрами или буквами, таким образом мы имее 6 ячеек для кодировки цветов и их
оттенков. В каждой из ячеек может быть любой символ из следующего ряда:
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f |
min.........................max |
Таким образом, если все цвета будут на минимуме ("#000000"), мы получим на экране чёрный,
а если на максимуме ("#ffffff") - белый:
Если на максимум поставить только один цвет, то мы его и получим:
Red | красный | "#ff0000" | |
Green | зеленый | "#00ff00" | |
Blue | синий | "#0000ff" | |
Из этих трех цветов комбинируются все цвета и оттенки.
Таблица базовых цветов:
Цвет |
Код |
| #000000 |
| #888888 |
| #cccccc |
| #ffffff |
| #ff0000 |
| #ff00ff |
| #880000 |
| #880088 |
| #000088 |
| #0000ff |
| #00ffff |
| #008800 |
| #00ff00 |
| #008888 |
| #ffff00 |
| #888800 |
Градации красного
Код
| Цвет
| Код
| Цвет
|
#000000 |
| #880000 |
|
#110000 |
| #990000 |
|
#200000 |
| #aa0000 |
|
#330000 |
| #bb0000 |
|
#440000 |
| #cc0000 |
|
#550000 |
| #dd0000 |
|
#660000 |
| #ee0000 |
|
#770000 |
| #ff0000 |
|
Код
| Цвет
| Код
| Цвет
|
#ff0000 |
| #ff8888 |
|
#ff1111 |
| #ff9999 |
|
#ff2222 |
| #ffaaaa |
|
#ff3333 |
| #ffbbbb |
|
#ff4444 |
| #ffcccc |
|
#ff5555 |
| #ffdddd |
|
#ff6666 |
| #ffeeee |
|
#ff7777 |
| #ffffff |
|
Градации зеленого
Код
| Цвет
| Код
| Цвет
|
#000000 |
| #008800 |
|
#001100 |
| #009900 |
|
#002200 |
| #00aa00 |
|
#003300 |
| #00bb00 |
|
#004400 |
| #00cc00 |
|
#005500 |
| #00dd00 |
|
#006600 |
| #00ee00 |
|
#007700 |
| #00ff00 |
|
Код
| Цвет
| Код
| Цвет
|
#00ff00 |
| #88ff88 |
|
#11ff11 |
| #99ff99 |
|
#22ff22 |
| #aaffaa |
|
#33ff33 |
| #bbffbb |
|
#44ff44 |
| #ccffcc |
|
#55ff55 |
| #ddffdd |
|
#66ff66 |
| #eeffee |
|
#77ff77 |
| #ffffff |
|
Градации синего
Код
| Цвет
| Код
| Цвет
|
#000000 |
| #000088 |
|
#000011 |
| #000099 |
|
#000022 |
| #0000aa |
|
#000033 |
| #0000bb |
|
#000044 |
| #0000cc |
|
#000055 |
| #0000dd |
|
#000066 |
| #0000ee |
|
#000077 |
| #0000ff |
|
Код
| Цвет
| Код
| Цвет
|
#000000 |
| #000088 |
|
#000011 |
| #000099 |
|
#000022 |
| #0000aa |
|
#000033 |
| #0000bb |
|
#000044 |
| #0000cc |
|
#000055 |
| #0000dd |
|
#000066 |
| #0000ee |
|
#000077 |
| #0000ff |
|
Палитра всех оттенков
Код |
Цвет |
#00ffff | |
#00eeff | |
#00ddff | |
#00ccff | |
#00bbff | |
#00aaff | |
#0099ff | |
#0088ff | |
#0077ff | |
#0066ff | |
#0055ff | |
#0044ff | |
#0033ff | |
#0022ff | |
#0011ff | |
#0000ff | |
#1100ff | |
#2200ff | |
#3300ff | |
#4400ff | |
#5500ff | |
#6600ff | |
#7700ff | |
#8800ff | |
#9900ff | |
#aa00ff | |
#bb00ff | |
#cc00ff | |
#dd00ff | |
#ee00ff | |
#ff00ff | |
#ff00ee | |
#ff00dd | |
#ff00cc | |
#ff00bb | |
#ff00aa | |
#ff0099 | |
#ff0088 | |
#ff0077 | |
#ff0066 | |
#ff0055 | |
#ff0044 | |
#ff0033 | |
#ff0022 | |
#ff0011 | |
#ff0000 | |
#ff1100 | |
#ff2200 | |
#ff3300 | |
#ff4400 | |
#ff5500 | |
#ff6600 | |
#ff7700 | |
#ff8800 | |
#ff9900 | |
#ffaa00 | |
#ffbb00 | |
#ffcc00 | |
#ffdd00 | |
#ffee00 | |
#ffff00 | |
#eeff00 | |
#ddff00 | |
#ccff00 | |
#bbff00 | |
#aaff00 | |
#99ff00 | |
#88ff00 | |
#77ff00 | |
#66ff00 | |
#55ff00 | |
#44ff00 | |
#33ff00 | |
#22ff00 | |
#11ff00 | |
#00ff00 | |
#00ff11 | |
#00ff22 | |
#00ff33 | |
#00ff44 | |
#00ff55 | |
#00ff66 | |
#00ff77 | |
#00ff88 | |
#00ff99 | |
#00ffaa | |
#00ffbb | |
#00ffcc | |
#00ffdd | |
#00ffee | |
#00ffff | |
В данной таблице все оттенки имеют среднюю яркость.
Чтобы сделать оттенок темнее, надо уменьшить имеющиеся цвета;
Чтобы сделать оттенок светлее, надо пропорционально увеличить все цвета.
Рассмотрим на примере цвета "#0088ff" (в середине таблицы)
Код | Цвет |
#eeffff | |
#cceeff | |
#aaddff | |
#88ccff | |
#66bbff | |
#44aaff | |
#2299ff | |
#0088ff | |
#0077dd | |
#0066bb | |
#005599 | |
#004477 | |
#003355 | |
#002233 | |
#001122 | |
#000000 | |
НАЗАД
ДАЛЬШЕ