Голубой цвет css. Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA
В 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 цвет можно задавать тремя способами:
Задание цвета в HTML по его названию
Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:
Цвет текста – красный
Наиболее популярные цвета стандарта Консорциума Всемирной паутины (англ. World Wide Web Consortium, W3C):
Цвет | Название | Цвет | Название | Цвет | Название | Цвет | Название |
---|---|---|---|---|---|---|---|
Black | Gray | Silver | White | ||||
Yellow | Lime | Aqua | Fuchsia | ||||
Red | Green | Blue | Purple | ||||
Maroon | Olive | Navy | Teal |
Пример использования различных цветовых названий:
Пример: задание цвета по его названию
- Попробуй сам »
Заголовок на красном фоне
Заголовок на оранжевом фоне
Заголовок на фоне лайм
Белый текст на синем фоне
Заголовок на красном фоне
Заголовок на оранжевом фоне
Заголовок на фоне лайм
Белый текст на синем фоне
Задание цвета с помощью RGB
При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red) , G — зеленый (green) , В — синий (blue) . Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255. Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:
Пример: Задание цвета с помощью RGB
- Попробуй сам »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Задание цвета по шестнадцатеричному значению
Значения R G B также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки # , например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки # можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.
Пример: Цвет HEX
- Попробуй сам »
красный: #FF0000
зеленый: #00FF00
синий: #0000FF
красный: #FF0000
зеленый: #00FF00
синий: #0000FF
красный+зеленый=желтый: #FFFF00
красный+синий=фиолетовый: #FF00FF
зеленый+синий=голубой: #00FFFF
Список широко распространённых цветов (название, HEX и RGB):
Английское название | Русское название | Образец | HEX | RGB | ||
---|---|---|---|---|---|---|
Amaranth | Амарантовый | #E52B50 | 229 | 43 | 80 | |
Amber | Янтарный | #FFBF00 | 255 | 191 | 0 | |
Aqua | Сине-зеленый | #00FFFF | 0 | 255 | 255 | |
Azure | Лазурный | #007FFF | 0 | 127 | 255 | |
Black | Черный | #000000 | 0 | 0 | 0 | |
Blue | Синий | #0000FF | 0 | 0 | 255 | |
Bondi Blue | Вода пляжа Бонди | #0095B6 | 0 | 149 | 182 | |
Brass | Латунный | #B5A642 | 181 | 166 | 66 | |
Brown | Коричневый | #964B00 | 150 | 75 | 0 | |
Cerulean | Лазурный | #007BA7 | 0 | 123 | 167 | |
Dark spring green | Тёмный весенне-зелёный | #177245 | 23 | 114 | 69 | |
Emerald | Изумрудный | #50C878 | 80 | 200 | 120 | |
Eggplant | Баклажановый | #990066 | 153 | 0 | 102 | |
Fuchsia | Фуксия | #FF00FF | 255 | 0 | 255 | |
Gold | Золотой | #FFD700 | 250 | 215 | 0 | |
Gray | Серый | #808080 | 128 | 128 | 128 | |
Green | Зелёный | #00FF00 | 0 | 255 | 0 | |
Indigo | Индиго | #4B0082 | 75 | 0 | 130 | |
Jade | Нефритовый | #00A86B | 0 | 168 | 107 | |
Lime | Лайм | #CCFF00 | 204 | 255 | 0 | |
Malachite | Малахитовый | #0BDA51 | 11 | 218 | 81 | |
Navy | Тёмно-синий | #000080 | 0 | 0 | 128 | |
Ochre | Охра | #CC7722 | 204 | 119 | 34 | |
Olive | Оливковый | #808000 | 128 | 128 | 0 | |
Orange | Оранжевый | #FFA500 | 255 | 165 | 0 | |
Peach | Персиковый | #FFE5B4 | 255 | 229 | 180 | |
Pumpkin | Тыква | #FF7518 | 255 | 117 | 24 | |
Purple | Фиолетовый | #800080 | 128 | 0 | 128 | |
Red | Красный | #FF0000 | 255 | 0 | 0 | |
Saffron | Шафрановый | #F4C430 | 244 | 196 | 48 | |
Sea Green | Зелёное море | #2E8B57 | 46 | 139 | 87 | |
Swamp green | Болотный | #ACB78E | 172 | 183 | 142 | |
Teal | Сине-зелёный | #008080 | 0 | 128 | 128 | |
Ultramarine | Ультрамариновый | #120A8F | 18 | 10 | 143 | |
Violet | Фиолетовый | #8B00FF | 139 | 0 | 255 | |
Yellow | Жёлтый | #FFFF00 | 255 | 255 | 0 |
Коды цветов (фон) по насыщенности и оттенку.
Цвета 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 |
На этой странице приведена таблица с ключевыми словами, которые можно использовать для обозначения цветов в таких языках Web-разработчика как: HTML, CSS, JavaScript, Flash, и др.
В старых спецификацияк концерна WC3 было прописано лишь 16 ключевых слов, при помощи которых устанавливались цвета в HTML и CSS. В дальнейших, более современных спецификациях, было добавлено ещё 130 ключевых слов для обозначения названий цветов. Следующая таблица содержит имена цветов, шестнадцатеричный и RGB коды, которым они соответствуют.
В соответствии с правилами CSS имена цвето не чувствительны к регистру. Записи цвета IndianRed и indianred равнозначны.
Также стоит обратить внимание, что из 146 ключевых слов таблицы, цветов в ней на самом деле меньше. Это вызвано тем, что некоторые ключевые слова обозначают один и тот же цвет. Так имена Grey , и Gray обозначают 50-процентный серый цвет с кодом #808080 , а слово Magenta - это синоним HTML цвета Fuchsia , соответствующего шестнадцатеричному коду #FF00FF . Также синонимами являются слова Aqua и Cyan , они соответствуют коду #00FFFF .
|
|