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

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

Влад Мержевич

В 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 приведены имена популярных названий цветов.

Табл. 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 .

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

Коды Майнкрафт цветов , или же Майнкрафт коды форматирования, позволяют любому игроку добавлять цветы и всячески форматировать текст прямо в Minecraft. Цветовые коды от &0-9 – до &a-f. Добавьте их перед вашим текстом. Сообщения от игроков могут содержать цветовые коды, которые позволяют добавлять краски в ваши предложения.

Цвета и коды форматирования

Знак амперсанта (&), за которым идёт шестнадцатеричное число в сообщения даёт сигнал клиенту для переключения цвета при отображении текста. Кроме того, текст может быть отформатирован с помощью символа & , за которым следует буква. Вы можете добавлять различные цвета в книги, командные блоки, имя сервера, описание сервера (motd ), в название миров, в таблички и даже в имена игроков.

Очень легко отформатировать ваш текст в конфигах или в игре, используя таблицу цветов ниже. &r используется для сброса всех кодов, т.е. &mААА&rБББ будет отображаться как ААА БББ.

Таблица цветовых кодов

Код Название Тех.название Цвет символа Цвет тени символа
R G B Hex R G B Hex
&0 Черный black 0 0 0 000000 0 0 0 000000
&1 Тёмно-синий dark_blue 0 0 170 0000AA 0 0 42 00002A
&2 Тёмно-зелёный dark_green 0 170 0 00AA00 0 42 0 002A00
&3 Тёмно-сине-зелёный dark_aqua 0 170 170 00AAAA 0 42 42 002A2A
&4 Тёмно-красный dark_red 170 0 0 AA0000 42 0 0 2A0000
&5 Тёмно-фиолетовый dark_purple 170 0 170 AA00AA 42 0 42 2A002A
&6 Золотой gold 255 170 0 FFAA00 42 42 0 2A2A00
&7 Серый gray 170 170 170 AAAAAA 42 42 42 2A2A2A
&8 Тёмно-серый dark_gray 85 85 85 555555 21 21 21 151515
&9 Голубой blue 85 85 255 5555FF 21 21 63 15153F
&a Зелёный green 85 255 85 55FF55 21 63 21 153F15
&b Сине-зелёный aqua 85 255 255 55FFFF 21 63 63 153F3F
&c Красный red 255 85 85 FF5555 63 21 21 3F1515
&d Светло-фиолетовый light_purple 255 85 255 FF55FF 63 21 63 3F153F
&e Жёлтый yellow 255 255 85 FFFF55 63 63 21 3F3F15
&f Белый white 255 255 255 FFFFFF 63 63 63 3F3F3F

Таблица кодов форматирования

Иногда бывает нужно подчеркнуть, зачеркнуть, выделить какой-либо текст . Для этого используется форматирование текста. Используется точно так же как и цвета(перед текстом ставим код , например &lMinecraft = Minecraft.

Код Название
&k Магический текст
(&kТекст)
&l Жирный текст
(&lТекст)
&m Зачеркнутый текст
(&mТекст)
&n Подчеркнутый текст
(&uТекст)
&o Курсивный текст
(&iТекст)
&r Текст без форматирования
(&rТекст)

На этой странице приведена таблица с ключевыми словами, которые можно использовать для обозначения цветов в таких языках 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

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 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. Цвета на веб-странице

 

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