Цвета html обозначаются шестью символами после символа слеш – например, #000000. Эти шесть символов обозначают доли различных цветов (Красного, Зеленого и Синего цветов (Red, Green, Blue)) в итоговом цвете. В мониторе вашего комьютера изображение формируется из огромного количества точек, называемых пикселями. Каждый пиксел – это маленький источник света, назовём его "фонарик", который в свою очередь состоит из трех фонариков – красного, зеленого и синего цвета. Уменьшая или увеличивая интенсивность свечения отдельных цветных фонариков, мы получаем нужный цвет.
Коды цветов html
Цвета в HTML обозначаются шестнадцатиричным (HEX) обозначением сочетания красного, синего и зеленого цвета (RGB).
Наименьшим значением цвета является 0 (шестнадцатиричное 00). Наибольшим значением цвета является 255 (шестнадцатиричное FF).
Шестнадцатиричное значение цвета представляет из себя три цифры, начинающиеся со знака #.
Коды (значения) цветов
#000000 | rgb(0,0,0) |
#FF0000 | rgb(255,0,0) |
#00FF00 | rgb(0,255,0) |
#0000FF | rgb(0,0,255) |
#FFFF00 | rgb(255,255,0) |
#00FFFF | rgb(0,255,255) |
#FF00FF | rgb(255,0,255) |
#C0C0C0 | rgb(192,192,192) |
#FFFFFF | rgb(255,255,255) |
16 миллионов оттенков
Сочетание красного, синего и зеленого цветов со значениями с долей каждого цвета от 0 до 255 дают в сумме более 16 миллионов оттенков (256 x 256 x 256).
Большинство современных мониторов способны отобразить не меньше 16384 различных оттенков (ЖК-мониторы, в основном, способны отображать 262 тысячи 16 миллионов (обновлено в октябре 2013 г.) цветов, а ЭЛТ-мониторы способны отображать практически неограниченное количество цветов).
В цветовой таблице ниже приведено изменение доли красного цвета с 0 до 255 при нулевых значениях синего и зеленого цветов:
#000000 | rgb(0,0,0) |
#080000 | rgb(8,0,0) |
#100000 | rgb(16,0,0) |
#180000 | rgb(24,0,0) |
#200000 | rgb(32,0,0) |
#280000 | rgb(40,0,0) |
#300000 | rgb(48,0,0) |
#380000 | rgb(56,0,0) |
#400000 | rgb(64,0,0) |
#480000 | rgb(72,0,0) |
#500000 | rgb(80,0,0) |
#580000 | rgb(88,0,0) |
#600000 | rgb(96,0,0) |
#680000 | rgb(104,0,0) |
#700000 | rgb(112,0,0) |
#780000 | rgb(120,0,0) |
#800000 | rgb(128,0,0) |
#880000 | rgb(136,0,0) |
#900000 | rgb(144,0,0) |
#980000 | rgb(152,0,0) |
#A00000 | rgb(160,0,0) |
#A80000 | rgb(168,0,0) |
#B00000 | rgb(176,0,0) |
#B80000 | rgb(184,0,0) |
#C00000 | rgb(192,0,0) |
#C80000 | rgb(200,0,0) |
#D00000 | rgb(208,0,0) |
#D80000 | rgb(216,0,0) |
#E00000 | rgb(224,0,0) |
#E80000 | rgb(232,0,0) |
#F00000 | rgb(240,0,0) |
#F80000 | rgb(248,0,0) |
#FF0000 | rgb(255,0,0) |
Оттенки серого
Для получение оттенков серого цвета используются равные доли всех цветов. Для облегчения выбора нужного цвета мы приводим вам коды оттенков серого цвета
#000000 | rgb(0,0,0) |
#080808 | rgb(8,8,8) |
#101010 | rgb(16,16,16) |
#181818 | rgb(24,24,24) |
#202020 | rgb(32,32,32) |
#282828 | rgb(40,40,40) |
#303030 | rgb(48,48,48) |
#383838 | rgb(56,56,56) |
#404040 | rgb(64,64,64) |
#484848 | rgb(72,72,72) |
#505050 | rgb(80,80,80) |
#585858 | rgb(88,88,88) |
#606060 | rgb(96,96,96) |
#686868 | rgb(104,104,104) |
#707070 | rgb(112,112,112) |
#787878 | rgb(120,120,120) |
#808080 | rgb(128,128,128) |
#888888 | rgb(136,136,136) |
#909090 | rgb(144,144,144) |
#989898 | rgb(152,152,152) |
#A0A0A0 | rgb(160,160,160) |
#A8A8A8 | rgb(168,168,168) |
#B0B0B0 | rgb(176,176,176) |
#B8B8B8 | rgb(184,184,184) |
#C0C0C0 | rgb(192,192,192) |
#C8C8C8 | rgb(200,200,200) |
#D0D0D0 | rgb(208,208,208) |
#D8D8D8 | rgb(216,216,216) |
#E0E0E0 | rgb(224,224,224) |
#E8E8E8 | rgb(232,232,232) |
#F0F0F0 | rgb(240,240,240) |
#F8F8F8 | rgb(248,248,248) |
#FFFFFF | rgb(255,255,255) |
Кросс-браузерные (для всех браузеров) названия цветов html
Коллекция из 150 названий цветов в html, поддерживаемых во всех браузерах.
Стандартизированные названия цветов
Консорциум W3C перечисляет 16 валидных названий цветов для HTML и CSS: aqua (аквамарин), black (черный), blue (синий), fuchsia (фуксиновый), gray (серый), green (зеленый), lime (лайм или салатовый), maroon (каштановый), navy (ультрамарин), olive (оливковый), purple (пурпурный), red (красный), silver (серебристый), teal (сизый), white (белый) и yellow (желтый).
При использовании цветов, не входящих в этот список, правильнее будет использовать их шестнадцатиричный код (HEX) или код RGB.
Безопасные цвета
Несколько лет назад, когда компьютеры могли поддерживать максимум 256 различных цветов, был предложен список из 216 «Безопасных web-цветов» с 40 цветами, зарезервированными для системы.
Эта 216-цветная палитра была создана для того, чтобы правильно отобразить цвета в режиме 256-цветной палитры.
Теперь это не важно, потому что большинство компьютеров во всем мире поддерживают миллионы оттенков цвета. В любом случае вот список этих цветов:
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 |
Интересное:
Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!
Подробную информацию об использовании цветов в HTML и CSS, способах указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов, вы сможете найти в следующих статьях учебников:
В HTML цвет чаще всего задаются RGB-кодом. Любой цвет разлагается на три основные составляющие:
Любой цвет задается сочетанием трех чисел, каждое из которых отражает долю одного из трех основных цветов. Каждая доля занимает 1 байт и может варьироваться от 00 до FF (в шестнадцатеричной системе счисления) или от 0 до 255 (в десятичной системе счисления).
Если цвет задается в шестнадцатеричном формате, то перед последовательностью шестнадцатеричных цифр ставится знак решетки ( # ). Порядок чисел, указывающих насыщенность основных цветов, должен выдерживаться строго. Сначала – красный, затем – зеленый, в конце – синий.
Если цвет задается в десятичном формате, то сначала идет ключевое слово rgb, затем в скобках через запятую десятичные числа насыщенности основных цветов.
Для наиболее популярных цветов были введены символьные имена.
Пример серебристого цвета
Подбор RGB цвета
Таблица цветов
Ассоциативный ряд цветов:
- Таблица "безопасных" цветов
- Правильное сочетание цветов
- Сводная таблица стилей
- Сводная таблица специальных символов
- Accessibility color wheel – сервис подбора цветов для фона и текста с учетом пользователей с ограниченными способностями.
Accessibility color wheel поможет выбрать оптимальную пару цветов. В интерфейсе присутствует панель, имитирующая 3 вида цветовой слепоты.
Для использования локально на компьютере, можно скачать архив.
.
Источник: