Выбрать цвет css. Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA. Приоритетные цвета: свойство color

В web-дизайне существует несколько способов представления цвета

HEX – шестнадцатеричная система представления цвета по основанию 16. Для данной системы используются арабские десятичные цифры от 0 до 9 и латинские буквы от A до F для дополнения цифрового количества до 16. Для web-дизайна взяты 16 основных (ключевых) цветов, так называемый шестнадцатеричный код цвета #RRGGBB, где каждая пара отвечает за свою долю цвета: RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.

Два других представления цвета в web-дизайне это: в виде RGB(*,*,*), где каждая «*» доля цвета представлена десятичными цифрами от 0 до 255 и по наименованиям цвета на английском языке.

При создании цветного изображения главной проблемой является правильная передача цветов на разных типах компьтеров, мониторов и браузеров. Если браузер не может правильно отобразить цвет, то он подбирает похожий или смешивает несколько цветов. А иногда может заменить на какой-то совсем другой цвет.

Таблица 16 основных цветов , которые используются во всех браузерах

Название Цвет 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)

Таблица серого цвета и его оттенков

Название Цвет Hex (RGB)
Gray (Серый) #808080 (128,128,128)
Gray (Серый) #bebebe (190,190,190)
(Серый-оттенок) #858585 (133,133,133)
Gray33 (Серый-33) #545454 (084,084,084)
(Серого шифера) #708090 (112,128,144)
(Кварцевый) #99958с (153,149,140)
(Светло-серый) #bbbbbb (187,187,187)
(Серебристый) #c0c0c0 (192,192,192)
(Серо-белый) #f0f0f0 (240,240,240)
(Бороды Абдель-Керима) #e0e0e0 (224,224,224)
LightGray (Серый светлый) #d3d3d3 (211,211,211)
LightStateGray () #778899 (119,136,153)
StateGray-1 (Бледно-васильковый1) #c6e2ff (198,226,255)
StateGray-2 (Бледно-васильковый2) #b9d3ee (185,211,238)
StateGray3 () #9fb6cd (159,182,205)
StateGray4 () #6c7b8b (108,123,139)

Цвета html обозначаются шестью символами после символа слеш - например, #000000. Эти шесть символов обозначают доли различных цветов (Красного, Зеленого и Синего цветов (Red, Green, Blue)) в итоговом цвете. В мониторе вашего комьютера изображение формируется из огромного количества точек, называемых пикселями. Каждый пиксел - это маленький источник света, назовём его "фонарик", который в свою очередь состоит из трех фонариков - красного, зеленого и синего цвета. Уменьшая или увеличивая интенсивность свечения отдельных цветных фонариков, мы получаем нужный цвет.

Коды цветов html

Цвета в HTML обозначаются шестнадцатиричным (HEX) обозначением сочетания красного, синего и зеленого цвета (RGB).

Наименьшим значением цвета является 0 (шестнадцатиричное 00). Наибольшим значением цвета является 255 (шестнадцатиричное FF).

Шестнадцатиричное значение цвета представляет из себя три цифры, начинающиеся со знака #.

Коды (значения) цветов

Цвет Код HEX Код RGB
#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 при нулевых значениях синего и зеленого цветов:

Красный Код HEX Код RGB
#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)

Оттенки серого

Для получение оттенков серого цвета используются равные доли всех цветов. Для облегчения выбора нужного цвета мы приводим вам коды оттенков серого цвета

Оттенки серого Код HEX Код RGB
#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

Цвет в языке CSS можно задавать разными способами:

  • по названию,
  • по шестнадцатеричному значению,
  • в форматах RGB и RGBA,
  • в форматах HSL и HSLA.

Задание цвета по названию

Браузеры поддерживают указание некоторых цветов элементам по названиям. В этой таблице некоторые ключевые слова (английские названия цветов), используемые для задания свойств цвета, RGB код, шестнадцатеричный код (HEX) и HSL код.

Табл. 1. Названия цветов, их RGB, HEX и HSL код.
Имя Цвет RGB HEX HSL Описание
white rgb(255, 255, 255) #ffffff или #fff hsl(0, 0%, 100%) Белый
silver rgb(192, 192, 192) #c0c0c0 hsl(0, 0%, 75%) Серый
gray rgb(128, 128, 128) #808080 hsl(0, 0%, 50%) Темно-серый
black rgb(0, 0, 0) #000000 или #000 hsl(0, 0%, 0%) Черный
maroon rgb(128, 0, 0) #800000 hsl(0, 100%, 25%) Темно-красный
red rgb(255, 0, 0) #ff0000 или #f00 hsl(0, 100%, 50%) Красный
orange rgb(255, 165, 0) #ffa500 hsl(38.8, 100%, 50%) Оранжевый
yellow rgb(255, 255, 0) #ffff00 или #ff0 hsl(60, 100%, 50%) Желтый
olive rgb(128, 128, 0) #808000 hsl(60, 100%, 25%) Оливковый
lime rgb(0, 255, 0) #00ff00 или #0f0 hsl(120, 100%, 50%) Светло-зеленый
green rgb(0, 128, 0) #008000 hsl(120, 100%, 25%) Зеленый
aqua rgb(0, 255, 255) #00ffff или #0ff hsl(180, 100%, 50%) Голубой
blue rgb(0, 0, 255) #0000ff или #00f hsl(240, 100%, 50%) Синий
navy rgb(0,0,128) #000080 hsl(240, 100%, 25%) Темно-синий
teal rgb(0, 128, 128) #008080 hsl(180, 100%, 25%) Сине-зеленый
fuchsia rgb(255, 0, 255) #ff00ff или #f0f hsl(300, 100%, 50%) Розовый
purple rgb(128, 0, 128) #800080 hsl(300, 100%, 25%) Фиолетовый

Это образец использования имен цветов, навзания цветов взяты из расширеной таблицы.

RGB в CSS

MediumTurquoise
brown
crimson
blueviolet
rolivedrab

Вот как работает этот код:

Установка цвета с помощью RGB

RGB - аддитивная цветовая модель. На английском языке addition - добавление. RGB - это аббревиатура английских слов: Red, Green, Blue - красный, зелёный, синий). Из этого понятно что в модели RGB цвета синтезируются путём добавления трёх цветов (красного, зелёного, синего) в различных количествах.

Смешивая красный, зелёный и синий цвета можно получить несколько миллионов оттенков. В памяти компьютеров хранятся все возможные комбинации.

Ближе к делу.

Для установки свойств в этом формате используется запись rgb(r, g, b) , где r, g, b - это три канала для каждого цвета (red, green, blue). Значения для каждого канала задаются в диапазоне от 0 до 255.

Пример кода.

Чтобы всё стало понятно, приведу пример кода:

RGB в CSS

rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)

Вот так должен сработать этот пример:

Рис.1. Цвета в RGB.

Пояснения к примеру.

В начале страницы создаём класс div.rgb , он нужен чтобы блоки созданные тегом

отображались нужным размером: 240px на 40px . Свойству line-height (высота строки) присваиваем значение - 40px , то есть равное высоте блока, это позволит отображать текст в блоке
по центру вертикали. по горизонтали текст центрируем при помощи правила {text-align : center ;} .

Далее, в коде устанавливаем фоновый цвет блока

при момощи атрибута style успользуя свойство background , а значения присваиваем rgb(255, 0, 0) , rgb(0, 255, 0) , и rgb(0, 0, 255) . То есть, мы поочерёдно делаем один канал максимально насыщенным, а остальные каналы не используются для синтеза, так как их значение равно нолю.

Попробуйте отредактировать этот пример и указать свои значения, например rgb(100, 100, 100) .

Установка цвета с помощью RGBA

В CSS3 появился новый инструмент для работы с цветом - формат RGBA. Его можно назвать развитием модели RGB, но с добавлением одного нового канала - A или альфа-канала. Этот канал устанавливает прозрачность цвета. Его значения задаются в диапазоне от 0 до 1. Значение равное 0 соответствует полной прозрачности, 1 - полной непрозрачности (цвет будет таким, каким он задан в первых трёх каналах RGB), а промежуточные значения, как 0.4 или 0.6 - полупрозрачности в различной степени.

Пример кода.

RGBA в CSS3

Вот как он сработает:

Этот код по своему визуальному представлению аналогичен следующему, использующему модель RGB для задания значения цвета:

RGBA в CSS3

Вот его результат:

Значение альфа канала равное нолю делает любой цвет невидимым - абсолютно прозрачным, значение равное единице транслирует цвет в RGB-коде без изменений. Свойство rgba(255,0,0,1.0) показывает красный цвет rgb(255, 0, 0) .

По шестнадцатеричному значению (HEX-код)

В повсежневной жизни мы пользуемся десятичной системой счёта. Её истоки очень просты - у нас десять пальцев на руках, и считать по пальцам в жизни бывало удобно. Если в десятичной системе десять цифр: от 0 до 9, а число 10 - это уже следующий разряд, то в шестнадцатеричная система счисления 16 цифр, а следующим разрядом будет число 16.

Для указания кодов цветов в качестве шестнадцатеричных цифр используются обычные десятичные цифры от 0 до 9 и для обозначения цифр от 10 до 15 используют латинские буквы от A до F то есть (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Для наглядности сведём это в таблицу:

Для записи шестнадцатеричных чисел больше F (15 по десятичной системе), как и в десятичной системе, также используют объединение двух цифр, но уже шестнадцатеричных, что очевидно. Так, для записи десятичного числа 255 в шестнадцатеричной системе используется запись FF.

Шестнадцатеричная система более понятна компьютеру, он быстрее обрабатывает значения, заданные по шестнадцатеричному значению.

Чтобы указать цвет в 16-ричной системе, перед числовым значением нужно ставить знак «#», пример: #FFC0CB . Само значение #FFC0CB состоит из трёх шестнадцатеричных цифр FF , C0 и CB . Смысл этой записи такой же, как и установка цвета в формате RGB (rgb(r, g, b) ) - каждая шестнадцатиричная цифра в HEX-коде указывает насыщение цвета в своём канале модели RGB.

HEX код в CSS

#FF0000
#00FF00
#0000FF

Этот код отобразит следующие элементы:

А вот рисунок с результатом из раздела "Установка цвета с помощью RGB" на этой странице выше.

Рис.1. Цвета в RGB.

Мы видим что цвета идентичны.

Допускается сокращенная запись HEX-кода цвета: 6-значное число можно записать как 3-значное. Это допустимо только в случае, когда две цифры в значении цвета одного канала повторяются.

То есть допустимо следующее сокращение записи:

Например, цвет #ff22aa допустимо написать так - #f2a , или цвет #44aa22 допустимо указать в виде #4a2 .

Установка цвета с помощью HSL

В CSS3 появился новый формат для указания цвета.

Формат HSL - это аббревиатура от английских слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).

Оттенок в HSL - это значение цвета на специальном цветовом круге (рисунок 2) и оно задаётся в градусах. Если проводить аналогии с моделью RGB, то 0° соответствует красному, 120° соответствует зелёному, а 240° - синему цвету.

Значение оттенка изменятся в диапазоне от 0 до 359.


Рисунок 2. Цветовой круг HSL.

Второе значение - насыщенность (Saturate) задаётся в процентах. При 100% насыщенности цвет максимально "сочный", по мере движения показателя насыщеннсоти к 0%, цвет становится всё более тусклым и скатывается в серый.

Третье значение - светлота (Lightness) также задаётся в процентах. Чем выше процент, тем более яркий будет цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, при этом неважно, какой цвет из цветового круга был выбран в первом канале. Оптимальным можно считать значение яркости цвета равное 50%.

Установка цвета с помощью HSLA

Формат HSLA соотносится с HSL, так же как и RGB с RGBA. В формате HSLA, как и в RGBA добавлен альфа-канал отвечающий за прозрачность цвета.

Цвет, заданный в формате HSL, читать более просто. Можно сказать что он интуитивно понятен. Например, код hsl(120,60%,50%) можно представить итоговый цвет, если в памяти есть картинка цветового круга HSL. Про форматы RGB и HEX такого сказать нельзя, код цвета заданный в этих форматах становится понятный только после его визуализации на мониторе.

Новые форматы в CSS3 (HSL, HSLA и RGBA) работают в браузерах начиная с версий: IE 9.0, Opera 10.0 Firefox 3.0. Как сделать так, чтобы стили работали на старых браузерах?

Somebloсk { background-color: rgb(255,50,50); background-color: rgba(255,50,50,0.85) }

При использовании такого кода в старых браузерах фоновый цвет для класса .somebloсk хоть и не будет использовать альфа-канал, но будет отображаться в формате RGB.

Для html страниц цвета обозначаются в основном в шестнадцатеричной системе. Для этого используют два вида записи кода - полную или сокращенную. Чтобы правильно указать html цвет полной записью необходимо прописать шесть знаков (цифры и/или английские буквы) после решетки, например, черный записывается так: #000000. Сокращенная запись указания html цветов состоит из решетки и трех цифр и/или букв за ней. При этом данный вид запаси можно использовать только в том случае, если полная запись данного цвета состоит одинаковых символов после решетки. Например, этот же черный цвет можно записать так: #000. Указывать html цвета можно как большими, так и маленькими символами, так как они не чувствительны к регистру.

Каждый символ, записанный после "#" соответствует определенной доли красного, зеленого и синего цветов. В свою очередь все мониторы состоят из огромного количества пикселей (микроскопических точек), каждый из которых включает в себя по 3 так называемых "фонарика" (источника света): красны, зеленый и синий. Затем, регулируя интенсивность излучаемого света этими "фонариками", монитор отображает нужный нам цвет.

Сочетая интенсивность излучения красного, синего и зеленого света (от 0 для 256) мониторы могут отображать 16.000.000 различных оттенков.

Также цвета для сайтов могут указываться словесно или в RGB коде.

На сегодняшний день словесно можно прописать 147 цветов. При этом важно знать, что некоторые разные названия могут обозначать одинаковые цвета, например Gray и Grey - это серый цвет (#808080).

Безопасные цвета для сайтов.

Не каждый монитор и браузер может правильно отображать все 16 миллионов html цветов.

Если, например, попадается такой цвет, который браузер не может правильно отобразить, то:

  1. Браузер заменяет его на тот, который больше всего на него похож и может быть удачно воспроизведен;
  2. Для правильного отображения браузер может смешать несколько цветов и воспроизвести результат.

Чтобы гарантированно получить на выходе в любом браузере и на любом мониторе тот цвет, который Вы прописали в коде, рекомендуется использовать "Безопасные цвета". Они были определены не вручную или по чьему-то желанию, а математически. Таких на 100% безопасных цветов для html документов существует 216. И хотя сегодняшние технологии дошли до того, что современные мониторы и браузеры распознают миллионы оттенков, мы рекомендуем для гарантии цветопередачи использовать именно эти безопасные цвета.

Таблица безопасных цветов html.
Шестнадцатеричная система цветов. Коды цветов в RGB (Red, Green, Blue).
Код html цвета: #000000 Цвет RGB: 0 0 0
Код html цвета: #333333 Цвет RGB: 51 51 51
Код html цвета: #666666 Цвет RGB: 102 102 102
Код html цвета: #999999 Цвет RGB: 153 153 153
Код html цвета: #CCCCCC Цвет RGB: 204 204 204
Код html цвета: #FFFFFF Цвет RGB: 255 255 255
Код html цвета: #666600 Цвет RGB: 102 102 0
Код html цвета: #999900 Цвет RGB: 153 153 0
Код html цвета: #999933 Цвет RGB: 153 153 51
Код html цвета: #999966 Цвет RGB: 153 153 102
Код html цвета: #CCCC33 Цвет RGB: 204 204 51
Код html цвета: #CCCC66 Цвет RGB: 204 204 102
Код html цвета: #333300 Цвет RGB: 51 51 0
Код html цвета: #666633 Цвет RGB: 102 102 51
Код html цвета: #CCCC99 Цвет RGB: 204 204 153
Код html цвета: #CCFF33 Цвет RGB: 204 255 51
Код html цвета: #CCFF00 Цвет RGB: 204 255 0
Код html цвета: #CCFF66 Цвет RGB: 204 255 102
Код html цвета: #669900 Цвет RGB: 102 153 0
Код html цвета: #99CC33 Цвет RGB: 153 204 51
Код html цвета: #99CC00 Цвет RGB: 153 204 0
Код html цвета: #99CC66 Цвет RGB: 153 204 102
Код html цвета: #99FF33 Цвет RGB: 153 255 51
Код html цвета: #99FF00 Цвет RGB: 153 255 0
Код html цвета: #336600 Цвет RGB: 51 102 0
Код html цвета: #669933 Цвет RGB: 102 153 51
Код html цвета: #66CC33 Цвет RGB: 102 204 51
Код html цвета: #66CC00 Цвет RGB: 102 204 0
Код html цвета: #99FF66 Цвет RGB: 153 255 102
Код html цвета: #CCFF99 Цвет RGB: 204 255 153
Код html цвета: #009900 Цвет RGB: 0 153 0
Код html цвета: #339900 Цвет RGB: 51 153 0
Код html цвета: #33CC00 Цвет RGB: 51 204 0
Код html цвета: #33FF00 Цвет RGB: 51 255 0
Код html цвета: #66FF33 Цвет RGB: 102 255 51
Код html цвета: #66FF00 Цвет RGB: 102 255 0
Код html цвета: #00CC33 Цвет RGB: 0 204 51
Код html цвета: #33CC33 Цвет RGB: 51 204 51
Код html цвета: #00CC00 Цвет RGB: 0 204 0
Код html цвета: #00FF00 Цвет RGB: 0 255 0
Код html цвета: #00FF33 Цвет RGB: 0 255 51
Код html цвета: #33FF33 Цвет RGB: 51 255 51
Код html цвета: #003300 Цвет RGB: 0 51 0
Код html цвета: #336633 Цвет RGB: 51 102 51
Код html цвета: #669966 Цвет RGB: 102 153 102
Код html цвета: #66CC66 Цвет RGB: 102 204 102
Код html цвета: #99CC99 Цвет RGB: 153 204 153
Код html цвета: #CCFFCC Цвет RGB: 204 255 204
Код html цвета: #006600 Цвет RGB: 0 102 0
Код html цвета: #339933 Цвет RGB: 51 153 51
Код html цвета: #00FF66 Цвет RGB: 0 255 102
Код html цвета: #33FF66 Цвет RGB: 51 255 102
Код html цвета: #66FF66 Цвет RGB: 102 255 102
Код html цвета: #99FF99 Цвет RGB: 153 255 153
Код html цвета: #009933 Цвет RGB: 0 153 51
Код html цвета: #00CC66 Цвет RGB: 0 204 102
Код html цвета: #33CC66 Цвет RGB: 51 204 102
Код html цвета: #00FF99 Цвет RGB: 0 255 153
Код html цвета: #33FF99 Цвет RGB: 51 255 153
Код html цвета: #66FF99 Цвет RGB: 102 255 153
Код html цвета: #006633 Цвет RGB: 0 102 51
Код html цвета: #009966 Цвет RGB: 0 153 102
Код html цвета: #339966 Цвет RGB: 51 153 102
Код html цвета: #00CC99 Цвет RGB: 0 204 153
Код html цвета: #33CC99 Цвет RGB: 51 204 153
Код html цвета: #66CC99 Цвет RGB: 102 204 153
Код html цвета: #009999 Цвет RGB: 0 153 153
Код html цвета: #33CCCC Цвет RGB: 51 204 204
Код html цвета: #00FFCC Цвет RGB: 0 255 204
Код html цвета: #33FFCC Цвет RGB: 51 255 204
Код html цвета: #66FFCC Цвет RGB: 102 255 204
Код html цвета: #99FFCC Цвет RGB: 153 255 204
Код html цвета: #00CCCC Цвет RGB: 0 204 204
Код html цвета: #00FFFF Цвет RGB: 0 255 255
Код html цвета: #33FFFF Цвет RGB: 51 255 255
Код html цвета: #66FFFF Цвет RGB: 102 255 255
Код html цвета: #99FFFF Цвет RGB: 153 255 255
Код html цвета: #CCFFFF Цвет RGB: 204 255 255
Код html цвета: #336666 Цвет RGB: 51 102 102
Код html цвета: #006666 Цвет RGB: 0 102 102
Код html цвета: #669999 Цвет RGB: 102 153 153
Код html цвета: #339999 Цвет RGB: 51 153 153
Код html цвета: #66CCCC Цвет RGB: 102 204 204
Код html цвета: #99CCCC Цвет RGB: 153 204 204
Код html цвета: #003333 Цвет RGB: 0 51 51
Код html цвета: #0099CC Цвет RGB: 0 153 204
Код html цвета: #3399CC Цвет RGB: 51 153 204
Код html цвета: #00CCFF Цвет RGB: 0 204 255
Код html цвета: #33CCFF Цвет RGB: 51 204 255
Код html цвета: #66CCFF Цвет RGB: 102 204 255
Код html цвета: #006699 Цвет RGB: 0 102 153
Код html цвета: #336699 Цвет RGB: 51 102 153
Код html цвета: #6699CC Цвет RGB: 102 153 204
Код html цвета: #0099FF Цвет RGB: 0 153 255
Код html цвета: #3399FF Цвет RGB: 51 153 255
Код html цвета: #99CCFF Цвет RGB: 153 204 255
Код html цвета: #003366 Цвет RGB: 0 51 102
Код html цвета: #003399 Цвет RGB: 0 51 153
Код html цвета: #0033FF Цвет RGB: 0 51 255
Код html цвета: #3366CC Цвет RGB: 51 102 204
Код html цвета: #0066CC Цвет RGB: 0 102 204
Код html цвета: #0066FF Цвет RGB: 0 102 255
Код html цвета: #000033 Цвет RGB: 0 0 51
Код html цвета: #0033CC Цвет RGB: 0 51 204
Код html цвета: #0000CC Цвет RGB: 0 0 204
Код html цвета: #0000FF Цвет RGB: 0 0 255
Код html цвета: #3366FF Цвет RGB: 51 102 255
Код html цвета: #6699FF Цвет RGB: 102 153 255
Код html цвета: #000066 Цвет RGB: 0 0 102
Код html цвета: #000099 Цвет RGB: 0 0 153
Код html цвета: #3333CC Цвет RGB: 51 51 204
Код html цвета: #3300CC Цвет RGB: 51 0 204
Код html цвета: #3300FF Цвет RGB: 51 0 255
Код html цвета: #3333FF Цвет RGB: 51 51 255
Код html цвета: #333366 Цвет RGB: 51 51 102
Код html цвета: #333399 Цвет RGB: 51 51 153
Код html цвета: #666699 Цвет RGB: 102 102 153
Код html цвета: #6666CC Цвет RGB: 102 102 204
Код html цвета: #6666FF Цвет RGB: 102 102 255
Код html цвета: #9999CC Цвет RGB: 153 153 204
Код html цвета: #330066 Цвет RGB: 51 0 102
Код html цвета: #330099 Цвет RGB: 51 0 153
Код html цвета: #6600FF Цвет RGB: 102 0 255
Код html цвета: #6633FF Цвет RGB: 102 51 255
Код html цвета: #9999FF Цвет RGB: 153 153 255
Код html цвета: #CCCCFF Цвет RGB: 204 204 255
Код html цвета: #330033 Цвет RGB: 51 0 51
Код html цвета: #663399 Цвет RGB: 102 51 153
Код html цвета: #6633CC Цвет RGB: 102 51 204
Код html цвета: #6600CC Цвет RGB: 102 0 204
Код html цвета: #9966FF Цвет RGB: 153 102 255
Код html цвета: #9966CC Цвет RGB: 153 102 204
Код html цвета: #663366 Цвет RGB: 102 51 102
Код html цвета: #660099 Цвет RGB: 102 0 153
Код html цвета: #9900FF Цвет RGB: 153 0 255
Код html цвета: #9933FF Цвет RGB: 153 51 255
Код html цвета: #9933CC Цвет RGB: 153 51 204
Код html цвета: #CC99FF Цвет RGB: 204 153 255
Код html цвета: #660066 Цвет RGB: 102 0 102
Код html цвета: #996699 Цвет RGB: 153 102 153
Код html цвета: #9900CC Цвет RGB: 153 0 204
Код html цвета: #CC00FF Цвет RGB: 204 0 255
Код html цвета: #CC33FF Цвет RGB: 204 51 255
Код html цвета: #CC66FF Цвет RGB: 204 102 255
Код html цвета: #993399 Цвет RGB: 153 51 153
Код html цвета: #990099 Цвет RGB: 153 0 153
Код html цвета: #CC33CC Цвет RGB: 204 51 204
Код html цвета: #CC00CC Цвет RGB: 204 0 204
Код html цвета: #CC66CC Цвет RGB: 204 102 204
Код html цвета: #CC99CC Цвет RGB: 204 153 204
Код html цвета: #CC3399 Цвет RGB: 204 51 153
Код html цвета: #FF00FF Цвет RGB: 255 0 255
Код html цвета: #FF33FF Цвет RGB: 255 51 255
Код html цвета: #FF66FF Цвет RGB: 255 102 255
Код html цвета: #FF99FF Цвет RGB: 255 153 255
Код html цвета: #FFCCFF Цвет RGB: 255 204 255
Код html цвета: #990066 Цвет RGB: 153 0 102
Код html цвета: #CC0099 Цвет RGB: 204 0 153
Код html цвета: #CC6699 Цвет RGB: 204 102 153
Код html цвета: #FF33CC Цвет RGB: 255 51 204
Код html цвета: #FF00CC Цвет RGB: 255 0 204
Код html цвета: #FF66CC Цвет RGB: 255 102 204
Код html цвета: #660033 Цвет RGB: 102 0 51
Код html цвета: #993366 Цвет RGB: 153 51 102
Код html цвета: #CC0066 Цвет RGB: 204 0 102
Код html цвета: #FF0099 Цвет RGB: 255 0 153
Код html цвета: #FF3399 Цвет RGB: 255 51 153
Код html цвета: #FF99CC Цвет RGB: 255 153 204
Код html цвета: #663333 Цвет RGB: 102 51 51
Код html цвета: #996666 Цвет RGB: 153 102 102
Код html цвета: #CC3366 Цвет RGB: 204 51 102
Код html цвета: #FF0066 Цвет RGB: 255 0 102
Код html цвета: #FF3366 Цвет RGB: 255 51 102
Код html цвета: #FF6699 Цвет RGB: 255 102 153
Код html цвета: #330000 Цвет RGB: 51 0 0
Код html цвета: #990033 Цвет RGB: 153 0 51
Код html цвета: #993333 Цвет RGB: 153 51 51
Код html цвета: #CC3333 Цвет RGB: 204 51 51
Код html цвета: #CC6666 Цвет RGB: 204 102 102
Код html цвета: #CC9999 Цвет RGB: 204 153 153
Код html цвета: #CC0033 Цвет RGB: 204 0 51
Код html цвета: #FF0033 Цвет RGB: 255 0 51
Код html цвета: #FF3333 Цвет RGB: 255 51 51
Код html цвета: #FF6666 Цвет RGB: 255 102 102
Код html цвета: #FF9999 Цвет RGB: 255 153 153
Код html цвета: #FFCCCC Цвет RGB: 255 204 204
Код html цвета: #990000 Цвет RGB: 153 0 0
Код html цвета:#CC0000 Цвет RGB: 204 0 0
Код html цвета: #FF0000 Цвет RGB: 255 0 0
Код html цвета: #FF3300 Цвет RGB: 255 51 0
Код html цвета: #CC3300 Цвет RGB: 204 51 0
Код html цвета: #FF6633 Цвет RGB: 255 102 51
Код html цвета: #660000 Цвет RGB: 102 0 0
Код html цвета: #993300 Цвет RGB: 153 51 0
Код html цвета: #CC6633 Цвет RGB: 204 102 51
Код html цвета: #FF6600 Цвет RGB: 255 102 0
Код html цвета: #FF9966 Цвет RGB: 255 153 102
Код html цвета: #FFCC99 Цвет RGB: 255 204 153
Код html цвета: #663300 Цвет RGB: 102 51 0
Код html цвета: #996633 Цвет RGB: 153 102 51
Код html цвета: #CC6600 Цвет RGB: 204 102 0
Код html цвета: #CC9966 Цвет RGB: 204 153 102
Код html цвета: #FF9933 Цвет RGB: 255 153 51
Код html цвета: #FF9900 Цвет RGB: 255 153 0
Код html цвета: #996600 Цвет RGB: 153 102 0
Код html цвета: #CC9933 Цвет RGB: 204 153 51
Код html цвета: #CC9900 Цвет RGB: 204 153 0
Код html цвета: #FFCC33 Цвет RGB: 255 204 51
Код html цвета: #FFCC00 Цвет RGB: 255 204 0
Код html цвета: #FFCC66 Цвет RGB: 255 204 102
Код html цвета: #CCCC00 Цвет RGB: 204 204 0
Код html цвета: #FFFF00 Цвет RGB: 255 255 0
Код html цвета: #FFFF33 Цвет RGB: 255 255 51
Код html цвета: #FFFF66 Цвет RGB: 255 255 102
Код html цвета: #FFFF99 Цвет RGB: 255 255 153
Код html цвета: #FFFFCC Цвет RGB: 255 255 204

Данная таблица включает в себя 216 кодов безопасных html цветов. Каждый цвет имеет значение в RGB для определения цвета в графических редакторах и HEX для указания цвета на html страницах.

Таблица (палитра) цветов html предоставляет вам возможность самостоятельно подобрать нужный вам тон. Значение цвета отображается в трех форматах: Hex, RGB и HSV.

  • Hex состоит из трех двух символьных значений в шестнадцатеричной системе счисления. Например: #ff00b3, где первая пара чисел - красный, вторая - зеленый, а третья - синий.
  • RGB (RedGreenBlue) имеет вид "200,100,255", обозначающее количество соответствующего тона(красный,зеленый,синий) в получаемом цвете.
  • HSV (Hue, Saturation, Value - тон, насыщенность, значение) - цветовая модель, в которой в качестве координат являются:
    • Hue - цветовой тон, может варьироваться в пределах от 0° до 360°.
    • Saturation - насыщенность, варьируется в пределах 0-100 или 0-1. Чем больше этот параметр, тем «чище» цвет, поэтому этот параметр иногда называют чистотой цвета. А чем ближе этот параметр к нулю, тем ближе цвет к нейтральному серому.
    • Value (значение цвета) - задает яркость, значение так же может варьироваться в пределах 0-100 или 0-1.

Введите код цвета: GO

Список цветов с названиями

В таблице перечислены названия цветов на английском языке (которые можно использовать в качестве значений), поддерживаемые всеми браузерами, и их шестнадцатеричные значения. Все перечисленные цвета являются "безопасными", то есть во всех браузерах будут отображаться одинаково.

Название цвета HEX Цвет
Black #000000
Navy #000080
DarkBlue #00008B
MediumBlue #0000CD
Blue #0000FF
DarkGreen #006400
Green #008000
Teal #008080
DarkCyan #008B8B
DeepSkyBlue #00BFFF
DarkTurquoise #00CED1
MediumSpringGreen #00FA9A
Lime #00FF00
SpringGreen #00FF7F
Aqua #00FFFF
Cyan #00FFFF
MidnightBlue #191970
DodgerBlue #1E90FF
LightSeaGreen #20B2AA
ForestGreen #228B22
SeaGreen #2E8B57
DarkSlateGray #2F4F4F
LimeGreen #32CD32
MediumSeaGreen #3CB371
Turquoise #40E0D0
RoyalBlue #4169E1
SteelBlue #4682B4
DarkSlateBlue #483D8B
MediumTurquoise #48D1CC
Indigo #4B0082
DarkOliveGreen #556B2F
CadetBlue #5F9EA0
CornflowerBlue #6495ED
MediumAquaMarine #66CDAA
DimGray #696969
SlateBlue #6A5ACD
OliveDrab #6B8E23
SlateGray #708090
LightSlateGray #778899
MediumSlateBlue #7B68EE
LawnGreen #7CFC00
Chartreuse #7FFF00
Aquamarine #7FFFD4
Maroon #800000
Purple #800080
Olive #808000
Gray #808080
SkyBlue #87CEEB
LightSkyBlue #87CEFA
BlueViolet #8A2BE2
DarkRed #8B0000
DarkMagenta #8B008B
SaddleBrown #8B4513
DarkSeaGreen #8FBC8F
LightGreen #90EE90
MediumPurple #9370D8
DarkViolet #9400D3
PaleGreen #98FB98
DarkOrchid #9932CC
YellowGreen #9ACD32
Sienna #A0522D
Brown #A52A2A
DarkGray #A9A9A9
LightBlue #ADD8E6
GreenYellow #ADFF2F
PaleTurquoise #AFEEEE
LightSteelBlue #B0C4DE
PowderBlue #B0E0E6
FireBrick #B22222
DarkGoldenRod #B8860B
MediumOrchid #BA55D3
RosyBrown #BC8F8F
DarkKhaki #BDB76B
Silver #C0C0C0
MediumVioletRed #C71585
IndianRed #CD5C5C
Peru #CD853F
Chocolate #D2691E
Tan #D2B48C
LightGray #D3D3D3
PaleVioletRed #D87093
Thistle #D8BFD8
Orchid #DA70D6
GoldenRod #DAA520
Crimson #DC143C
Gainsboro #DCDCDC
Plum #DDA0DD
BurlyWood #DEB887
LightCyan #E0FFFF
Lavender #E6E6FA
DarkSalmon #E9967A
Violet #EE82EE
PaleGoldenRod #EEE8AA
LightCoral #F08080
Khaki #F0E68C
AliceBlue #F0F8FF
HoneyDew #F0FFF0
Azure #F0FFFF
SandyBrown #F4A460
Wheat #F5DEB3
Beige #F5F5DC
WhiteSmoke #F5F5F5
MintCream #F5FFFA
GhostWhite #F8F8FF
Salmon #FA8072
AntiqueWhite #FAEBD7
Linen #FAF0E6
LightGoldenRodYellow #FAFAD2
OldLace #FDF5E6
Red #FF0000
Fuchsia #FF00FF
Magenta #FF00FF
DeepPink #FF1493
OrangeRed #FF4500
Tomato #FF6347
HotPink #FF69B4
Coral #FF7F50
Darkorange #FF8C00
LightSalmon #FFA07A
Orange #FFA500
LightPink #FFB6C1
Pink #FFC0CB
Gold #FFD700
PeachPuff #FFDAB9
NavajoWhite #FFDEAD
Moccasin #FFE4B5
Bisque #FFE4C4
MistyRose #FFE4E1
BlanchedAlmond #FFEBCD
PapayaWhip #FFEFD5
LavenderBlush #FFF0F5
SeaShell #FFF5EE
Cornsilk #FFF8DC
LemonChiffon #FFFACD
FloralWhite #FFFAF0
Snow #FFFAFA
Yellow #FFFF00
LightYellow #FFFFE0
Ivory #FFFFF0
White #FFFFFF
В продолжение темы:
Linux

Социальная сеть «Фотострана» многим не нравится своей навязчивостью, что также проявляется, когда пользователь желает удалить свой аккаунт. В самой сети есть подводные камни,...

Новые статьи
/
Популярные