Для html страниц цвета обозначаются в основном в шестнадцатеричной системе. Для этого используют два вида записи кода - полную или сокращенную. Чтобы правильно указать html цвет полной записью необходимо прописать шесть знаков (цифры и/или английские буквы) после решетки, например, черный записывается так: #000000. Сокращенная запись указания html цветов состоит из решетки и трех цифр и/или букв за ней. При этом данный вид запаси можно использовать только в том случае, если полная запись данного цвета состоит одинаковых символов после решетки. Например, этот же черный цвет можно записать так: #000. Указывать html цвета можно как большими, так и маленькими символами, так как они не чувствительны к регистру.
Каждый символ, записанный после "#" соответствует определенной доли красного, зеленого и синего цветов. В свою очередь все мониторы состоят из огромного количества пикселей (микроскопических точек), каждый из которых включает в себя по 3 так называемых "фонарика" (источника света): красны, зеленый и синий. Затем, регулируя интенсивность излучаемого света этими "фонариками", монитор отображает нужный нам цвет.
Сочетая интенсивность излучения красного, синего и зеленого света (от 0 для 256) мониторы могут отображать 16.000.000 различных оттенков.
Также цвета для сайтов могут указываться словесно или в RGB коде.
На сегодняшний день словесно можно прописать 147 цветов. При этом важно знать, что некоторые разные названия могут обозначать одинаковые цвета, например Gray и Grey - это серый цвет (#808080).
Безопасные цвета для сайтов.
Не каждый монитор и браузер может правильно отображать все 16 миллионов html цветов.
Если, например, попадается такой цвет, который браузер не может правильно отобразить, то:
- Браузер заменяет его на тот, который больше всего на него похож и может быть удачно воспроизведен;
- Для правильного отображения браузер может смешать несколько цветов и воспроизвести результат.
Чтобы гарантированно получить на выходе в любом браузере и на любом мониторе тот цвет, который Вы прописали в коде, рекомендуется использовать "Безопасные цвета". Они были определены не вручную или по чьему-то желанию, а математически. Таких на 100% безопасных цветов для html документов существует 216. И хотя сегодняшние технологии дошли до того, что современные мониторы и браузеры распознают миллионы оттенков, мы рекомендуем для гарантии цветопередачи использовать именно эти безопасные цвета.
| Шестнадцатеричная система цветов. | Коды цветов в 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 страницах.
Как известно, цвет может влиять на состояние человека: как психическое, так и физическое. Каждый день, просматривая сайты в интернете, глаза оценивают миллионы цветов и оттенков. Веб-дизайнер, который ознакомлен с психологией цвета, может управлять настроением посетителя для достижения каких-либо целей.
Это обусловлено тем, что некоторые оттенки успокаивают, а некоторые наоборот – возбуждают. Далее речь пойдет о том, как синтезируется и отображается цвет с помощью компьютерной техники.
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 бежевый цвет имеет следующие числовые представления.
Влад Мержевич
В 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 .Таблица (палитра) цветов 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 |
На этой странице приведена таблица с ключевыми словами, которые можно использовать для обозначения цветов в таких языках 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 .
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
