Rgb фиолетовый. Учeбник 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 |
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 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 и описание.
Имя | Цвет | Код | 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 используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.
Типичный цвет, используемый в HTML, выглядит следующим образом.
Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.
FA | + | 8E | + | 47 | = | FA8E47 |
Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.
Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.
- Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
- Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
- Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.
Рис. 6.1. Цветовой круг
Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 6.2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.
Рис. 6.2. Окно для выбора цвета в программе Photoshop
Веб-цвета
Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых - красной, зеленой и синей - устанавливается одно из шести значений - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 - 216 цветов. Пример веб-цвета - #33FF66.
Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.
Цвета по названию
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.
Имя цвета | Цвет | Описание | Шестнадцатеричное значение |
---|---|---|---|
black | Черный | #000000 | |
blue | Синий | #0000FF | |
fuchsia | Светло-фиолетовый | #FF00FF | |
gray | Темно-серый | #808080 | |
green | Зеленый | #008000 | |
lime | Светло-зеленый | #00FF00 | |
maroon | Темно-красный | #800000 | |
navy | Темно-синий | #000080 | |
olive | Оливковый | #808000 | |
purple | Темно-фиолетовый | #800080 | |
red | Красный | #FF0000 | |
silver | Светло-серый | #C0C0C0 | |
teal | Сине-зеленый | #008080 | |
white | Белый | #FFFFFF | |
yellow | Желтый | #FFFF00 |
Не имеет значения, каким способом вы задаете цвет - по его имени или с помощью шестнадцатеричных чисел. По своему действию эти способы равны. В примере 6.1 показано, как установить цвет фона и текста веб-страницы.
Пример 6.1. Цвет фона и текста
Пример текста
В данном примере цвет фона задается с помощью атрибута bgcolor тега
, а цвет текста через атрибут text . Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal .На этой странице приведена таблица с ключевыми словами, которые можно использовать для обозначения цветов в таких языках 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 .
|
|
Как известно, цвет может влиять на состояние человека: как психическое, так и физическое. Каждый день, просматривая сайты в интернете, глаза оценивают миллионы цветов и оттенков. Веб-дизайнер, который ознакомлен с психологией цвета, может управлять настроением посетителя для достижения каких-либо целей.
Это обусловлено тем, что некоторые оттенки успокаивают, а некоторые наоборот – возбуждают. Далее речь пойдет о том, как синтезируется и отображается цвет с помощью компьютерной техники.
RGB – это цветовая модель, представляющая метод получения всех цветов и их оттенков путем смешивания в различных пропорциях трех главных компонентов, которыми являются:
- красный цвет (Red );
- зеленый цвет (Green );
- синий цвет (Blue ).
Отсюда и происходит сокращенное название RGB . Данные цвета неспроста выбраны основными: причиной является физиология сетчатки человеческого глаза, и то, как она воспринимает их:
RGB -модель на сегодняшний день остается самой популярной и применяется для воспроизведения цветов на экранах телевизоров и компьютерных мониторах. Так как производители наделяют свои изделия различными характеристиками, в 1996 была создана единая система синтеза цветов на основе RGB под названием sRGB , над которой совместно потрудились компании Microsoft и HP .
Числовое представление цвета
Как уже было сказано ранее, RGB цвета формируются путем смешивания основных. Для описания интенсивности каждого из них приняли схему, в которой цвет представляется диапазоном 0-255 (8 бит ), что в шестнадцатеричной системе исчисления соответствует 00-FF .
То есть, основные цвета будут иметь следующий вид:
- Красный – RGB (255,0,0 );
- Зеленый – RGB (0,255,0 );
- Синий – RGB (0,0,255 );
Если же интенсивность цвета принимает значения меньше 255, то получаются различные оттенки красного, зеленого и синего. Далее приведена таблица их градации, а также представлены шестнадцатеричные значения каждого из оттенков:
Таблицы цветов RGB
Естественно, что кроме градаций основных цветов, существуют смешанные, и их количество довольно велико. Поэтому была создана таблица RGB -цветов, в которой представлены все существующие оттенки, а также приведены их названия и числовые представления (в десятичной и шестнадцатеричной форме ).
Ознакомиться с ней можно здесь . Данная таблица здорово облегчает жизнь веб-дизайнерам, так как за несколько секунд можно найти необходимый оттенок и узнать его числовое представление.
Безопасная палитра RGB цветов
Однако в какой-то момент существовала проблема отображения цветов в различных браузерах, и для ее решения была скомпонована так называемая «безопасная » палитра RGB цветов, которые были выведены математическими вычислениями.
Когда браузер не может корректно отобразить цвет, он делает попытки получить близкий к необходимому путем смешивания соседних цветов, и скорее всего результат будет совершенно неприемлем:
Используя коды цветов RGB из данной палитры, веб-разработчик может не бояться за отображение цветов на страницах своего сайта при просмотре с помощью различных браузеров, на различных платформах и мониторах. Хотя на данный момент таблица безопасных цветов теряет свою актуальность (технический прогресс все же не стоит на месте ), при ее использовании можно, что называется, спать спокойно.
Золотой цвет в RGB модели
Впервые слово «золотой», было использовано в начале XIV века для описания цвета химического элемента под названием Aurum – золото. В модели RGB золотой цвет представлен следующими числовыми значениями:
- RGB (255, 215, 0 ) – десятеричная система;
- HEX #FFD700 – шестнадцатеричная система.
Бежевый цвет в RGB модели
Бежевый цвет занимает довольно значимое место в истории, пусть он и не самый выразительный. Многие памятники культуры, особенно античные скульптуры, были изготовлены из стеатита и мыльного камня, обладающих бежевым оттенком. В модели RGB бежевый цвет имеет следующие числовые представления.