Таблица цветовых кодов RGB
Палитра цветов RGB
Таблица цветовых кодов RGB
Наведите курсор на цвет, чтобы получить шестнадцатеричный и десятичный цветовые коды ниже:
| Шестнадцатеричный: # |
| Красный: |
| Зеленый: |
| Синий: |
Цветовое пространство RGB
Красный, зеленый и синий используют по 8 бит каждый, которые имеют целочисленные значения от 0 до 255. Это дает 256 * 256 * 256 = 16777216 возможных цветов.
RGB ≡ красный, зеленый, синий
Таким образом, каждый пиксель на светодиодном мониторе отображает цвета за счет комбинации красного, зеленого и синего светодиодов (светоизлучающих диодов).
Когда красный пиксель установлен на 0, светодиод выключен. Когда красный пиксель установлен на 255, светодиод будет полностью включен.
Любое значение между ними устанавливает частичное излучение светодиода.
Цветовой формат и расчет RGB
Код RGB имеет формат 24 бита (биты 0..23):
| КРАСНЫЙ [7: 0] | ЗЕЛЕНЫЙ [7: 0] | СИНИЙ [7: 0] | |||||||||||||||||||||
| 23 | 16 | 15 | 8 | 7 | 0 | ||||||||||||||||||
Примеры расчетов
Белый цвет RGB
White RGB code = 255*65536+255*256+255 = #FFFFFF
Синий цвет RGB
Blue RGB code = 0*65536+0*256+255 = #0000FF
Красный цвет RGB
Red RGB code = 255*65536+0*256+0 = #FF0000
Зеленый цвет RGB
Green RGB code = 0*65536+255*256+0 = #00FF00
Серый цвет RGB
Gray RGB code = 128*65536+128*256+128 = #808080
Желтый цвет RGB
Yellow RGB code = 255*65536+255*256+0 = #FFFF00
Таблица RGB-цветов
В HTML цвет чаще всего задаются RGB-кодом. Любой цвет разлагается на три основные составляющие:
Любой цвет задается сочетанием трех чисел, каждое из которых отражает долю одного из трех основных цветов. Каждая доля занимает 1 байт и может варьироваться от 00 до FF (в шестнадцатеричной системе счисления) или от 0 до 255 (в десятичной системе счисления).
Если цвет задается в шестнадцатеричном формате, то перед последовательностью шестнадцатеричных цифр ставится знак решетки ( # ). Порядок чисел, указывающих насыщенность основных цветов, должен выдерживаться строго. Сначала – красный, затем – зеленый, в конце – синий.
Если цвет задается в десятичном формате, то сначала идет ключевое слово rgb, затем в скобках через запятую десятичные числа насыщенности основных цветов.
Для наиболее популярных цветов были введены символьные имена.
Пример серебристого цвета
Подбор RGB цвета
Таблица цветов
| Цветовая константа | Red | Green | Blue | Образец | |||
|---|---|---|---|---|---|---|---|
| alicemblue | F0 | F8 | FF | ||||
| antiquewhite | FA | EB | D7 | ||||
| aqua | 00 | FF | FF | ||||
| aquamarine | 7F | FF | D4 | ||||
| azure | F0 | FF | FF | ||||
| beige | F5 | F5 | DC | ||||
| bisque | FF | E4 | C4 | ||||
| black | 00 | 00 | 00 | ||||
| blanchedalmond | FF | EB | CD | ||||
| blue | 00 | 00 | FF | ||||
| blueviolet | 8A | 2B | E2 | ||||
| brown | A5 | 2A | 2A | ||||
| burlywood | DE | B8 | 87 | ||||
| cadetblue | 5F | 9E | A0 | ||||
| chartreuse | 7F | FF | 00 | ||||
| chocolate | D2 | 69 | 1E | ||||
| coral | FF | 7F | 50 | ||||
| cornflowerblue | 64 | 95 | ED | ||||
| cornsilk | FF | F8 | DC | ||||
| crimson | DC | 14 | 3C | ||||
| cyan | 00 | FF | FF | ||||
| darkblue | 00 | 00 | 8B | ||||
| darkcyan | 00 | 8B | 8B | ||||
| darkgoldenrod | B8 | 86 | 0B | ||||
| darkgray | A9 | A9 | A9 | ||||
| darkgreen | 00 | 64 | 00 | ||||
| darkkhaki | BD | B7 | 6B | ||||
| darkmagenta | 8B | 00 | 8b | ||||
| darkolivegreen | 55 | 6B | 2F | ||||
| darkorange | FF | 8C | 00 | ||||
| darkochid | 99 | 32 | CC | ||||
| darkred | 8B | 00 | 00 | ||||
| darksalmon | E9 | 96 | 7A | ||||
| darkseagreen | 8F | BC | 8F | ||||
| darkslateblue | 48 | 3D | 8B | ||||
| darkslategray | 2F | 4F | 4F | ||||
| darkturquoise | 00 | CE | D1 | ||||
| darkviolet | 94 | 00 | D3 | ||||
| deeppink | FF | 14 | 93 | ||||
| deepskyblue | 00 | BF | FF | ||||
| dimgray | 69 | 69 | 69 | ||||
| dodgerblue | 1E | 90 | FF | ||||
| firebrick | B2 | 22 | 22 | ||||
| floralwhite | FF | FA | F0 | ||||
| forestgreen | 22 | 8B | 22 | ||||
| fushsia | FF | 00 | FF | ||||
| gainsboro | DC | DC | DC | ||||
| ghostwhite | F8 | F8 | FF | ||||
| gold | FF | D7 | 00 | ||||
| goldenrod | DA | A5 | 20 | ||||
| gray | 80 | 80 | 80 | ||||
| green | 00 | 80 | 00 | ||||
| greenyellow | AD | FF | 2F | ||||
| honeydew | F0 | FF | F0 | ||||
| hotpink | FF | 69 | B4 | ||||
| indiandred | CD | 5C | 5C | ||||
| indigo | 4B | 00 | 82 | ||||
| ivory | FF | FF | F0 | ||||
| khaki | F0 | E6 | 8C | ||||
| lavender | E6 | E6 | FA | ||||
| lavenderblush | FF | F0 | F5 | ||||
| lawngreen | 7C | FC | 00 | ||||
| lemonchiffon | FF | FA | CD | ||||
| ligtblue | AD | D8 | E6 | ||||
| lightcoral | F0 | 80 | 80 | ||||
| lightcyan | E0 | FF | FF | ||||
| lightgoldenrodyellow | FA | FA | D2 | ||||
| lightgreen | 90 | EE | 90 | ||||
| lightgrey | D3 | D3 | D3 | ||||
| lightpink | FF | B6 | C1 |
| Цветовая константа | Red | Green | Blue | Образец | |||
|---|---|---|---|---|---|---|---|
| lightsalmon | FF | A0 | 7A | ||||
| lightseagreen | 20 | B2 | AA | ||||
| lightscyblue | 87 | CE | FA | ||||
| lightslategray | 77 | 88 | 99 | ||||
| lightsteelblue | B0 | C4 | DE | ||||
| lightyellow | FF | FF | E0 | ||||
| lime | 00 | FF | 00 | ||||
| limegreen | 32 | CD | 32 | ||||
| linen | FA | F0 | E6 | ||||
| magenta | FF | 00 | FF | ||||
| maroon | 80 | 00 | 00 | ||||
| mediumaquamarine | 66 | CD | AA | ||||
| mediumblue | 00 | 00 | CD | ||||
| mediumorchid | BA | 55 | D3 | ||||
| mediumpurple | 93 | 70 | DB | ||||
| mediumseagreen | 3C | B3 | 71 | ||||
| mediumslateblue | 7B | 68 | EE | ||||
| mediumspringgreen | 00 | FA | 9A | ||||
| mediumturquoise | 48 | D1 | CC | ||||
| medium violetred | C7 | 15 | 85 | ||||
| midnightblue | 19 | 19 | 70 | ||||
| mintcream | F5 | FF | FA | ||||
| mistyrose | FF | E4 | E1 | ||||
| moccasin | FF | E4 | B5 | ||||
| navajowhite | FF | DE | AD | ||||
| navy | 00 | 00 | 80 | ||||
| oldlace | FD | F5 | E6 | ||||
| olive | 80 | 80 | 00 | ||||
| olivedrab | 6B | 8E | 23 | ||||
| orange | FF | A5 | 00 | ||||
| orengered | FF | 45 | 00 | ||||
| orchid | DA | 70 | D6 | ||||
| palegoldenrod | EE | E8 | AA | ||||
| palegreen | 98 | FB | 98 | ||||
| paleturquose | AF | EE | EE | ||||
| palevioletred | DB | 70 | 93 | ||||
| papayawhop | FF | EF | D5 | ||||
| peachpuff | FF | DA | B9 | ||||
| peru | CD | 85 | 3F | ||||
| pink | FF | C0 | CB | ||||
| plum | DD | A0 | DD | ||||
| powderblue | B0 | E0 | E6 | ||||
| purple | 80 | 00 | 80 | ||||
| red | FF | 00 | 00 | ||||
| rosybrown | BC | 8F | 8F | ||||
| royalblue | 41 | 69 | E1 | ||||
| saddlebrown | 8B | 45 | 13 | ||||
| salmon | FA | 80 | 72 | ||||
| sandybrown | F4 | A4 | 60 | ||||
| seagreen | 2E | 8B | 57 | ||||
| seashell | FF | F5 | EE | ||||
| sienna | A0 | 52 | 2D | ||||
| silver | C0 | C0 | C0 | ||||
| skyblue | 87 | CE | EB | ||||
| slateblue | 6A | 5A | CD | ||||
| slategray | 70 | 80 | 80 | ||||
| snow | FF | FA | FA | ||||
| springgreen | 00 | FF | 7F | ||||
| steelblue | 46 | 82 | B4 | ||||
| tan | D2 | B4 | 8C | ||||
| teal | 00 | 80 | 80 | ||||
| thistle | D8 | BF | D8 | ||||
| tomato | FF | 63 | 47 | ||||
| turquose | 40 | E0 | D0 | ||||
| violet | EE | 82 | EE | ||||
| wheat | F5 | DE | B3 | ||||
| white | FF | FF | FF | ||||
| whitesmoke | F5 | F5 | F5 | ||||
| yellow | FF | FF | 00 | ||||
| yellowgreen | 9A | CD | 32 |
| Название | Цвет | Hex | (RGB) |
| Aqua (морская волна) | #00FFFF | (000,255,255) | |
| Black (черный) | #000000 | (000,000,000) | |
| Blue (голубой) | #0000FF | (000,000,255) | |
| Fuchsia (фуксин) | #FF00FF | (255,000,255) | |
| Gray (серый) | #808080 | (128,128,128) | |
| Green (зеленый) | #008000 | (000,128,000) | |
| Lime (ярко-зеленый) | #00FF00 | (000,255,000) | |
| Maroon (темно-бордовый) | #800000 | (128,000,000) | |
| Navy (темно-синий) | #000080 | (000,000,128) | |
| Olive (оливковый) | #808000 | (128,128,000) | |
| Purple (фиолетовый) | #800080 | (128,000,128) | |
| Red (красный) | #FF0000 | (255,000,000) | |
| Silver (серебряный) | #C0C0C0 | (192,192,192) | |
| Teal (серо-зеленый) | #008080 | (000,128,128) | |
| White (белый) | #FFFFFF | (255,255,255) | |
| Yellow (желтый) | #FFFF00 | (255,255,000) |
Таблица пурпурного цвета и его оттенков
| Название | Цвет | Hex | (RGB) |
| Magenta (пурпурный) | #FFCBDB | (255,203,219) | |
| Magenta (пурпурный) | #FF0099 | (255,000,153) | |
| Magenta (маджента) | #F95A61 | (249,090,097) | |
| Fuchsia (фуксия) | #FF00FF | (255,000,255) | |
| Мовеин (анилиновый пурпур) | #EF0097 | (239,000,151) | |
| Salmon pink (оранжево розовый) | #FF91A4 | (255,145,164) | |
| Cenise (оттенок пурпурного) | #DE3163 | (153,149,140) | |
| Aubergine Eggplant (баклажановый) | #990066 | (153,000,132) | |
| Lavender blush (розовато-лавандовый) |  #FFF0F5 | (255,240,245) | |
| Lilac (сиреневый) | #C8A2C8 | (200,162,200) | |
| Magenta (маджента) | #FF008F | (255,000,143) | |
| Orchid (орхидея) | #DA70D6 | (218,112,214) | |
| Red-violet (фиолетово-красный) | #C71585 | (199,021,133) | |
| Sanguine (сангиновый) | #92000A | (146,000,010) | |
| Thistle (оттенок пурпурного) | #D8BFD8 | (185,211,238) | |
| Violet-eggplant (оттенок пурпурного) | #991199 | (153,017,153) | |
| Rosa vivo (насыщено розовый) | #FF007F | (255,000,127) | |
| Lavender-rose (оттенок пурпурного) | #FBA0E3 | (108,123,139) | |
| Mountbatten pink (розовый Маунбаттена) | #997ABD | (153,122,141) |
Таблица серого цвета и его оттенков
HTML Цвета
Перед тем как мы перейдем с Вами к изучению способов указания цвета в 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
Шаблон:Глубина цвета Шаблон:HTML Существуют несколько основных способов представления цветов в вебе.
Содержание
Имена цветов в HTML [ ]
В спецификации HTML 4.01 [1] определены следующие 16 ключевых цветов (в данном контексте можно использовать как заглавные, так и строчные буквы:
| Цвет | Код | Цвет | Код | Цвет | Код | Цвет | Код |
|---|---|---|---|---|---|---|---|
| aqua (морская волна, cyan) | #00ffff | black (чёрный) | #000000 | blue (синий) | #0000ff | fuchsia (фуксия, magenta) | #ff00ff |
| gray (серый) | #808080 | green (зелёный) | #008000 | lime (лайм, lightgreen) | #00ff00 | maroon (тёмно-бордовый) | #800000 |
| navy (тёмно-синий) | #000080 | olive (оливковый) | #808000 | purple (пурпурный) | #800080 | red (красный) | #ff0000 |
| silver (серебряный) | #c0c0c0 | teal (сине-зелёный) | #008080 | white (белый) | #ffffff | yellow (жёлтый) | #ffff00 |
Шаблон:Fnb В спецификации используются английские названия цветов.
Безопасная палитра Netscape [ ]
К концу 90-х годов, с полным исчезновением 8-битного цвета с рабочих столов ОС, это требование исчезло. Тем не менее, Adobe Photoshop и поныне оснащён опцией «Только Web-цвета» ( Шаблон:Lang-en ).
Названия цветов в X11 [ ]
Цвета CSS [ ]
Язык Cascading Style Sheets определяет такое же количество имен для цветов, как и HTML 4, — 16 перечисленных выше. Дополнительно CSS 2.1 добавляет название ‘orange’ [2] :
Спецификация CSS3 также вводит цветовую модель HSV :
