Цветовая таблица. Цветовая диаграмма 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. Цвета на веб-странице

Нажмите на цветовую ячейку, чтобы получить цветовой код HTML для этого цвета.

Селектор цвета HTML

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


Теория цветовых кодов HTML

Вы задаетесь вопросом: "Значит ли что-нибудь эта странная комбинация букв и цифр?" Ответ на этот вопрос - "Да, значит". И вот что она значит:)

формат кодов HTML:
Каждый код HTML состоит из символа "#" и 6 букв или цифр. Используется шестнадцатеричная система счисления. Например, "FF" в шестнадцатеричной системе соответствует 255 в десятеричной.

Значение символов:
Первыми двумя символами в коде цвета HTML обозначается насыщенность красного цвета. 00 - наименее насыщенный и FF - наиболее насыщенный. Третий и четвертый символы означают насыщенность зеленого, а пятый и шестой - синего. Таким образом, комбинируя разные по насыщенности оттенки красного, зеленого и синего, мы можем получить фактически любой угодный нам цвет;)

Примеры:
#FF0000 - Этим кодом HTML мы сообщаем браузеру команду отображать максимально возможный красный цвет и вообще не отображать зеленый и синий. В результате, естественно, мы получаем чистый красный цвет:

#00FF00 - Этот код HTML отображает только зеленый, без красного и синего. Результат:

#0000FF - Этот код HTML отображает только синий, без красного и зеленого. Результат:

#FFFF00 - Сочетание красного и зеленого цветов дает нам желтый:

#CCEEFF -Взять немного красного, чуть больше зеленого и по максимуму синего для получения небесно-голубого:

Поддержите этот сайт

HTML color codes

Если вы хотите поправить цвет текста на вашем сайте или цвет фона - то вам надо, как минимум, узнать и видеть web-цвета. Далее принцип работы простой - вы просто копируете html-код цвета и вставляете его к себе в css-стилевой файл. В данной статье будут рассмотрены популярные web-цвета...

Цвет текста html

Очень часто требуется поменять цвет текста на сайте , мало кто из начинающих к этому прибегает, так как для этого нужно знать html и css. Но, если вы знаете эти основы web-строительства, то вы без труда с этой задачей справитесь и в помощь ниже вам будет дана таблица с цветами. Обычно начинающие меняют цвет текста маленькими абзацами, например, через встроенные редакторы статей. Но, у меня, к примеру, часто возникает задача поменять цвет текста на всем сайте и, поэтому коды цветов в html формате - для меня необходимы - "как воздух".

Меняем цвет текста на сайте

1) Если вам нужно поменять цвет текста на всем сайте , то html код необходимого вам цвета вставляем в специальный файл css, обычно он называется style.css - вот такие примерно строки появятся в нем:

Это был пример: мы вставили корректировку, а именно назначили цвет текста белым: color:#FFF - это и есть код белого цвета в html . Не пугайтесь #FFF - это сокращенная форма, это тоже самое, что и #FFFFFF. Для экономии времени часто пользуются сокращенным кодом белого цвета в html.

Примерно может выглядеть так изменение цвета текста тела сайта - тег body:

body {color:#FFF;}

На закрытых движках типа ucoz - это делается по-другому, хотя там этот css-файл выведен отдельной ссылкой(об этом напишу позже).

2) Если вам нужно поменять цвет текста в отдельном абзаце , то встраивается такая конструкция (но она не приветствуется профессионалами, но на это мало кто смотрит и не смотрят поисковики типа Яндекса и Google, Mail, Rambler - то есть основным ПС это безразлично, потому что это "не ошибка")

А вставляется такая конструкция:

style="color:#FFF;"

То есть применительно к абзацу, а это тег p, конструкция будет иметь следующий вид:

В общем ничего сложного! Только смотрите внимательно, белый цвет тут был приведен для примера, если вы назначите белый цвет для белого фона, то текста вы, конечно же, не увидите.

тут текст ссылки

Если вы еще не знаете, что такое тег a - то мы уже об этом писали тут - "как вставить ссылку на сайт ". Вообще изменение цвета ссылки через html код страницы редко делают, во-первых это муторно, а во-вторых также считается, если не дурным тоном, то что-то типа того.

Таблица цветов html

Ниже приведена таблица цветов html, только также не забывайте вставить знак решетки перед кодом:

lightpink
FFB6C1 pink
FFC0CB crimson
DC143C lavenderblush
FFF0F5 palevioletred
DB7093 hotpink
FF69B4 deeppink
FF1493 mediumvioletred
C71585 orchid
DA70D6 thistle
D8BFD8 plum
DDA0DD violet
EE82EE magenta
FF00FF fuchsia
FF00FF darkmagenta
8B008B purple
800080 mediumorchid
BA55D3 darkviolet
9400D3 darkorchid
9932CC indigo
4B0082 blueviolet
8A2BE2 mediumpurple
9370DB mediumslateblue
7B68EE slateblue
6A5ACD darkslateblue
483D8B lavender
E6E6FA ghostwhite
F8F8FF blue
0000FF mediumblue
0000CD midnightblue
191970 darkblue
00008B navy
000080 royalblue
4169E1 cornflowerblue
6495ED lightsteelblue
B0C4DE lightslategray
778899 slategray
708090 dodgerblue
1E90FF aliceblue
F0F8FF steelblue
4682B4 lightskyblue
87CEFA skyblue
87CEEB deepskyblue
00BFFF lightblue
ADD8E6 powderblue
B0E0E6 cadetblue
5F9EA0 azure
F0FFFF lightcyan
E0FFFF paleturquoise
AFEEEE cyan
00FFFF aqua
00FFFF darkturquoise
00CED1 darkslategray
2F4F4F darkcyan
008B8B teal
008080 mediumturquoise
48D1CC lightseagreen
20B2AA turquoise
40E0D0 aquamarine
7FFFD4 mediumaquamarine
66CDAA mediumspringgreen
00FA9A mintcream
F5FFFA springgreen
00FF7F mediumseagreen
3CB371 seagreen
2E8B57 honeydew
F0FFF0 lightgreen
90EE90 palegreen
98FB98 darkseagreen
8FBC8B limegreen
32CD32 lime
00FF00 forestgreen
228B22 green
008000 darkgreen
006400 chartreuse
7FFF00 lawngreen
7CFC00 greenyellow
ADFF2F darkolivegreen
556B2F yellowgreen
9ACD32 olivedrab
6B8E23 beige
F5F5DC lightgoldenrodyellow
FAFAD2
ivory
FFFFF0 lightyellow
FFFFE0 yellow
FFFF00 olive
808000 darkkhaki
BDB76B lemonchiffon
FFFACD palegoldenrod
EEE8AA khaki
F0E68C gold
FFD700 cornsilk
FFF8DC goldenrod
DAA520 darkgoldenrod
B8860B floralwhite
FFFAF0 oldlace
FDF5E6 wheat
F5DEB3 moccasin
FFE4B5 orange
FFA500 papayawhip
FFEFD5 blanchedalmond
FFEBCD navajowhite
FFDEAD antiquewhite
FAEBD7 tan
D2B48C burlywood
DEB887 bisque
FFE4C4 darkorange
FF8C00 linen
FAF0E6 peru
CD853F peachpuff
FFDAB9 sandybrown
F4A460 chocolate
D2691E saddlebrown
8B4513 seashell
FFF5EE sienna
A0522D lightsalmon
FFA07A coral
FF7F50 orangered
FF4500 darksalmon
E9967A tomato
FF6347 mistyrose
FFE4E1 salmon
FA8072 snow
FFFAFA lightcoral
F08080 rosybrown
BC8F8F indianred
CD5C5C red
FF0000 brown
A52A2A firebrick
B22222 darkred
8B0000 maroon
800000 white
FFFFFF whitesmoke
F5F5F5 gainsboro
DCDCDC lightgrey
D3D3D3 silver
C0C0C0 darkgray
A9A9A9 gray
808080 dimgray
696969 black
000000

Вот такая вот таблица html цветов.

html цвета яндекс

Яндекс также предоставляет онлайн-сервис по html-цветам, иногда тоже помогает, но им все же реже пользуюсь. Вот можете потыкать и html цвета онлайн яндекс .

Упрощенная форма html цвет на английском

Если вы знаете хоть немного знаете английский язык то вам еще проще будет освоить упрощенную форму записи популярных цветов в html на английском. К, примеру: brown - коричневый, green - зеленый, blue - синий, red - красный, white - белый, grey - серый, black - черный и тд. Вот как это будет выглядеть:

То есть, все то же самое, просто заменяем код на слова.

Пока на этом все, я надеюсь вам была полезна статья "html цвета", следите за новостями http://сайт.

Я тоже когда-то начинал с азов, а вот как я начинал свое