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

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

Для 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 страницах.

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

По названию

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

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

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

С помощью RGB

Internet Explorer Chrome Opera Safari Firefox Android iOS
5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb , а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).

RGBA

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.

HSL

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° - зелёному, а 240° - синему. Значение оттенка может изменяться от 0 до 359.

Рис. 1. Цветовой круг

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

HSLA

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Цвета

Предупреждение

Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Авторы не гарантируют вашей безопасности при их использовании и снимают с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!

Арррргх!

Результат данного примера показан на рис. 2.

Рис. 2. Цвета на веб-странице

Коды цветов в CSS используются для указания цвета. Как правило, коды цвета или цветовые значения используются для установки цвета либо для переднего плана элемента (например, цвет текста, ссылки), либо для фона элемента (цвет фона, блока). Они также могут использоваться для изменения цвета кнопки, границ, маркера, при наведении и других декоративных эффектов.

Вы можете задать свои значения цвета в различных форматах. В следующей таблице перечислены все возможные форматы:

Ниже более подробно описаны перечисленные форматы.

Цвета CSS - шестнадцатеричные коды

Шестнадцатеричный код цвета - это шестизначное представление цвета. Первые две цифры (RR) - представляют собой красное значение, следующие две - это зеленое значение (GG), а последние - синее значение (BB).

Цвета CSS - короткие шестнадцатеричные коды

Короткий шестнадцатеричный код цвета - это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.

Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.

Цвета CSS - RGB значения

RGB значение - это код цвета, который задается с помощью свойства rgb(). Это свойство принимает три значения: по одному для красного, зеленого и синего. Значение может быть целым числом, от 0 до 255, или процентом.

Примечание: не все браузеры поддерживают свойство rgb() цвета, поэтому не рекомендуется его использовать.

Ниже приведен пример, показывающий несколько цветов с использованием значений RGB.

Генератор цветовых кодов

Вы можете создавать миллионы цветовых кодов с помощью нашего сервиса .

Безопасные цвета браузера

Ниже представлена таблица из 216 цветов, которые наиболее безопасные и независимые от компьютера. Эти цвета в CSS варьируются от 000000 до FFFFFF шестнадцатеричного кода. Они безопасны в использовании, поскольку гарантируют, что все компьютеры будут правильно отображать цвет при работе с 256 цветовой палитрой.

Таблица «безопасных» цветов в CSS
#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 .

Имя цвета в HTML и CSS HEX RGB
Красные тона:
IndianRed #CD5C5C 205, 92, 92
LightCoral #F08080 240, 128, 128
Salmon #FA8072 250, 128, 114
DarkSalmon #E9967A 233, 150, 122
LightSalmon #FFA07A 255, 160, 122
Crimson #DC143C 220, 20, 60
Red #FF0000 255, 0, 0
FireBrick #B22222 178, 34, 34
DarkRed #8B0000 139, 0, 0
Розовые тона:
Pink #FFC0CB 255, 192, 203
LightPink #FFB6C1 255, 182, 193
HotPink #FF69B4 255, 105, 180
DeepPink #FF1493 255, 20, 147
MediumVioletRed #C71585 199, 21, 133
PaleVioletRed #DB7093 219, 112, 147
Оранжевые тона:
LightSalmon #FFA07A 255, 160, 122
Coral #FF7F50 255, 127, 80
Tomato #FF6347 255, 99, 71
OrangeRed #FF4500 255, 69, 0
DarkOrange #FF8C00 255, 140, 0
Orange #FFA500 255, 165, 0
Жёлтые тона:
Gold #FFD700 255, 215, 0
Yellow #FFFF00 255, 255, 0
LightYellow #FFFFE0 255, 255, 224
LemonChiffon #FFFACD 255, 250, 205
LightGoldenrodYellow #FAFAD2 250, 250, 210
PapayaWhip #FFEFD5 255, 239, 213
Moccasin #FFE4B5 255, 228, 181
PeachPuff #FFDAB9 255, 218, 185
PaleGoldenrod #EEE8AA 238, 232, 170
Khaki #F0E68C 240, 230, 140
DarkKhaki #BDB76B 189, 183, 107
Фиолетовые тона:
Lavender #E6E6FA 230, 230, 250
Thistle #D8BFD8 216, 191, 216
Plum #DDA0DD 221, 160, 221
Violet #EE82EE 238, 130, 238
Orchid #DA70D6 218, 112, 214
Fuchsia #FF00FF 255, 0, 255
Magenta #FF00FF 255, 0, 255
MediumOrchid #BA55D3 186, 85, 211
MediumPurple #9370DB 147, 112, 219
BlueViolet #8A2BE2 138, 43, 226
DarkViolet #9400D3 148, 0, 211
DarkOrchid #9932CC 153, 50, 204
DarkMagenta #8B008B 139, 0, 139
Purple #800080 128, 0, 128
Indigo #4B0082 75, 0, 130
SlateBlue #6A5ACD 106, 90, 205
DarkSlateBlue #483D8B 72, 61, 139
Коричневые тона:
Cornsilk #FFF8DC 255, 248, 220
BlanchedAlmond #FFEBCD 255, 235, 205
Bisque #FFE4C4 255, 228, 196
NavajoWhite #FFDEAD 255, 222, 173
Wheat #F5DEB3 245, 222, 179
BurlyWood #DEB887 222, 184, 135
Tan #D2B48C 210, 180, 140
RosyBrown #BC8F8F 188, 143, 143
SandyBrown #F4A460 244, 164, 96
Goldenrod #DAA520 218, 165, 32
DarkGoldenRod #B8860B 184, 134, 11
Peru #CD853F 205, 133, 63
Chocolate #D2691E 210, 105, 30
SaddleBrown #8B4513 139, 69, 19
Sienna #A0522D 160, 82, 45
Brown #A52A2A 165, 42, 42
Maroon #800000 128, 0, 0
Основные цвета:
Black #000000 0, 0, 0
Gray #808080 128, 128, 128
Silver #C0C0C0 192, 192, 192
White #FFFFFF 255, 255, 255
Fuchsia #FF00FF 255, 0, 255
Purple #800080 128, 0, 128
Red #FF0000 255, 0, 0
Maroon #800000 128, 0, 0
Yellow #FFFF00 205, 92, 92
Olive #808000 240, 128, 128
Lime #00FF00 250, 128, 114
Green #008000 233, 150, 122
Aqua #00FFFF 205, 92, 92
Teal #008080 240, 128, 128
Blue #0000FF 250, 128, 114
Navy #000080 233, 150, 122
Имя цвета в HTML и CSS HEX RGB
Зелёные тона:
GreenYellow #ADFF2F 173, 255, 47
Chartreuse #7FFF00 127, 255, 0
LawnGreen #7CFC00 124, 252, 0
Lime #00FF00 0, 255, 0
LimeGreen #32CD32 50, 205, 50
PaleGreen #98FB98 152, 251, 152
LightGreen #90EE90 144, 238, 144
MediumSpringGreen #00FA9A 0, 250, 154
SpringGreen #00FF7F 0, 255, 127
MediumSeaGreen #3CB371 60, 179, 113
SeaGreen #2E8B57 46, 139, 87
ForestGreen #228B22 34, 139, 34
Green #008000 0, 128, 0
DarkGreen #006400 0, 100, 0
YellowGreen #9ACD32 154, 205, 50
OliveDrab #6B8E23 107, 142, 35
Olive #808000 128, 128, 0
DarkOliveGreen #556B2F 85, 107, 47
MediumAquamarine #66CDAA 102, 205, 170
DarkSeaGreen #8FBC8F 143, 188, 143
LightSeaGreen #20B2AA 32, 178, 170
DarkCyan #008B8B 0, 139, 139
Teal #008080 0, 128, 128
Синие тона:
Aqua #00FFFF 0, 255, 255
Cyan #00FFFF 0, 255, 255
LightCyan #E0FFFF 224, 255, 255
PaleTurquoise #AFEEEE 175, 238, 238
Aquamarine #7FFFD4 127, 255, 212
Turquoise #40E0D0 64, 224, 208
MediumTurquoise #48D1CC 72, 209, 204
DarkTurquoise #00CED1 0, 206, 209
CadetBlue #5F9EA0 95, 158, 160
SteelBlue #4682B4 70, 130, 180
LightSteelBlue #B0C4DE 176, 196, 222
PowderBlue #B0E0E6 176, 224, 230
LightBlue #ADD8E6 173, 216, 230
SkyBlue #87CEEB 135, 206, 235
LightSkyBlue #87CEFA 135, 206, 250
DeepSkyBlue #00BFFF 0, 191, 255
DodgerBlue #1E90FF 30, 144, 255
CornflowerBlue #6495ED 100, 149, 237
MediumSlateBlue #7B68EE 123, 104, 238
RoyalBlue #4169E1 65, 105, 225
Blue #0000FF 0, 0, 255
MediumBlue #0000CD 0, 0, 205
DarkBlue #00008B 0, 0, 139
Navy #000080 0, 0, 128
MidnightBlue #191970 25, 25, 112
Белые тона:
White #FFFFFF 255, 255, 255
Snow #FFFAFA 255, 250, 250
Honeydew #F0FFF0 240, 255, 240
MintCream #F5FFFA 245, 255, 250
Azure #F0FFFF 240, 255, 255
AliceBlue #F0F8FF 240, 248, 255
GhostWhite #F8F8FF 248, 248, 255
WhiteSmoke #F5F5F5 245, 245, 245
Seashell #FFF5EE 255, 245, 238
Beige #F5F5DC 245, 245, 220
OldLace #FDF5E6 253, 245, 230
FloralWhite #FFFAF0 255, 250, 240
Ivory #FFFFF0 255, 255, 240
AntiqueWhite #FAEBD7 250, 235, 215
Linen #FAF0E6 250, 240, 230
LavenderBlush #FFF0F5 255, 240, 245
MistyRose #FFE4E1 255, 228, 225
Серые тона:
Gainsboro #DCDCDC 220, 220, 220
LightGrey #D3D3D3 211, 211, 211
LightGray #D3D3D3 211, 211, 211
Silver #C0C0C0 192, 192, 192
DarkGray #A9A9A9 169, 169, 169
DarkGrey #A9A9A9 169, 169, 169
Gray #808080 128, 128, 128
Grey #808080 128, 128, 128
DimGray #696969 105, 105, 105
DimGrey #696969 105, 105, 105
LightSlateGray #778899 119, 136, 153
LightSlateGrey #778899 119, 136, 153
SlateGray #708090 112, 128, 144
SlateGrey #708090 112, 128, 144
DarkSlateGray #2F4F4F 47, 79, 79
DarkSlateGrey #2F4F4F 47, 79, 79
Black #000000 0, 0, 0

В 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

Коды цветов (фон) по насыщенности и оттенку.

 

 
Это интересно: