Белый цвет в html коде. Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA. Коды цветов html
На этой странице приведена таблица с ключевыми словами, которые можно использовать для обозначения цветов в таких языках 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 .
|
|
Коды цветов в CSS используются для указания цвета. Как правило, коды цвета или цветовые значения используются для установки цвета либо для переднего плана элемента (например, цвет текста, ссылки), либо для фона элемента (цвет фона, блока). Они также могут использоваться для изменения цвета кнопки, границ, маркера, при наведении и других декоративных эффектов.
Вы можете задать свои значения цвета в различных форматах. В следующей таблице перечислены все возможные форматы:
Ниже более подробно описаны перечисленные форматы.
Цвета CSS - шестнадцатеричные коды
Шестнадцатеричный код цвета - это шестизначное представление цвета. Первые две цифры (RR) - представляют собой красное значение, следующие две - это зеленое значение (GG), а последние - синее значение (BB).
Цвета CSS - короткие шестнадцатеричные коды
Короткий шестнадцатеричный код цвета - это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.
Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.
Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.
Цвета CSS - RGB значения
RGB значение - это код цвета, который задается с помощью свойства rgb(). Это свойство принимает три значения: по одному для красного, зеленого и синего. Значение может быть целым числом, от 0 до 255, или процентом.
Примечание: не все браузеры поддерживают свойство rgb() цвета, поэтому не рекомендуется его использовать.
Ниже приведен пример, показывающий несколько цветов с использованием значений RGB.
Генератор цветовых кодов
Вы можете создавать миллионы цветовых кодов с помощью нашего сервиса .
Безопасные цвета браузера
Ниже представлена таблица из 216 цветов, которые наиболее безопасные и независимые от компьютера. Эти цвета в CSS варьируются от 000000 до FFFFFF шестнадцатеричного кода. Они безопасны в использовании, поскольку гарантируют, что все компьютеры будут правильно отображать цвет при работе с 256 цветовой палитрой.
Таблица «безопасных» цветов в CSS | |||||
#000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
#003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
#006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
#009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
#00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
#00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
#330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
#333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
#336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
#339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
#33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
#33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
#660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
#663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
#666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
#669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
#66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
#66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
#990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
#993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
#996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
#999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
#99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
#99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
#CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
#CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
#CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
#CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
#CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
#CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
#FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
#FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
#FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
#FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
#FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
#FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Модуль CSS color подробно описывает значения, которые позволяют авторам определять цвета и непрозрачность html-элементов, а также значения свойства color .
Свойство color
1. Приоритетные цвета: свойство color
Свойство задаёт цвет шрифта с помощью различных систем цветопередачи. Свойство описывает цвет текстового содержимого элемента. Кроме того, оно используется для предоставления потенциального косвенного значения (currentColor) для любых других свойств, которые принимают значения цвета.
Свойство наследуется.
2. Значения цвета
2.1. Основные ключевые слова
Список основных ключевых слов включает в себя следующие значения:
Название | HEX | RGB | Цвет |
---|---|---|---|
black | #000000 | 0,0,0 | |
silver | #C0C0C0 | 192,192,192 | |
gray | #808080 | 128,128,128 | |
white | #FFFFFF | 255,255,255 | |
maroon | #800000 | 128,0,0 | |
red | #FF0000 | 255,0,0 | |
purple | #800080 | 128,0,128 | |
fuchsia | #FF00FF | 255,0,255 | |
green | #008000 | 0,128,0 | |
lime | #00FF00 | 0,255,0 | |
olive | #808000 | 128,128,0 | |
yellow | #FFFF00 | 255,255,0 | |
navy | #000080 | 0,0,128 | |
blue | #0000FF | 0,0,255 | |
teal | #008080 | 0,128,128 | |
aqua | #00FFFF | 0,255,255 |
Названия цветов не чувствительны к регистру.
Синтаксис
Color: teal;
2.2. Числовые значения цвета
2.2.1. Цвета модели RGB
Формат значения RGB в шестнадцатеричном формате — это знак # , за которым сразу следуют три или шесть шестнадцатеричных символов. Трехзначная запись RGB #rgb преобразуется в шестизначную форму #rrggbb путем копирования цифр, а не путем добавления нулей. Например, #fb0 расширяется до #ffbb00 . Это гарантирует, что белый #ffffff может быть указан в короткой записи #fff , и удаляет любые зависимости от глубины цвета дисплея.
Формат значения RGB в функциональной нотации — rgb(, за которым следует разделенный запятыми список из трех числовых значений (либо трех целочисленных значений, либо трех процентных значений), за которыми следует символ) . Целочисленное значение 255 соответствует 100% и F или FF в шестнадцатеричной записи:
Rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF
Символы пробела допускаются вокруг числовых значений.
>>Управление цветом
Шестнадцатеричные значения цвета RGB
Способы описания и обработки цвета отличаются друг от друга тем, для какого конечного представления предназначаются. Сравним, например, представления цветов для полиграфии и для мониторов компьютеров. В первом случае за основу берется белый цвет бумаги, на которую в последствии наносятся три основные цвета: голубой , пурпурный и желтый . Смешиваясь между собой и с белым цветом бумаги в разных пропорциях, эти три основные цвета дают различные цветовые оттенки, кроме чистого черного, либо при полном отсутствии красок дают белый цвет бумаги. Если к ним добавить еще и черный цвет, то получим CMYK -способ передачи цвета, когда необходимый цвет получается путем вычитания из белого недостающих цветов.
Во втором же случае за основу принимается черный
цвет экрана монитора, каждая ячейка которого, светится одним из трех цветов: red
-красный, green
-зеленый и blue
-синий. Тогда при полном отсутствии какого-либо свечения мы получаем чистый черный цвет экрана, а любой из требуемых цветов задается соотношением каждого из трех цветов. В этом случае мы
получим RGB
-способ передачи цвета. Основные цвета могут иметь значения от 0
до 255
, или от 0%
до 100%
, либо могут быть представлены в виде шестнадцатеричного значения. На рисунке ниже можно увидеть результаты смешения основных цветов.
Шестнадцатеричная система счисления, в отличии от десятичной в своём ряду цифр имеет не десять знаков, а шестнадцать - отсюда и название. Соответственно не повторяющихся вариантов сочетаний из двух цифр может быть только - 256 , для продолжения ряда цифр после 9 используются буквы от A до F , следовательно, ряд будет выглядеть так -
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
В этом случае цвет задается тремя шестнадцатеричными числами, каждое из которых состоит из двух цифр. Первое число определяет интенсивность красного цвета, среднее- зеленого , последнее- синего цвета. Все числа могут принимать значения в диапазоне от 00 до FF (от 0 до 255). Например: зеленый цвет задается как #00FF00 , красный - как #FF0000 , синий - как #0000FF , белый - как #FFFFFF , полное отсутствие цвета или черный задается как #000000 .
В расположенной ниже форме Вы сможете задать любые шестнадцатеричные значения каждого из трех цветов и посмотреть результат их смешения, кликнув в поле вывода.
Примеры некоторых шестнадцатеричных значений цветов RGB: градации красного, синего и зеленого цветов.
вид | код | вид | код | вид | код | вид | код | вид | код | вид | код |
#010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
#100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
#200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
#300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
#400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
#500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
#600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
#700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Задание цвета при помощи строчных литералов
Для удобства пользования некоторым цветам и их сочетаниям были присвоены имена, которые распознаются всеми браузерами и появилась возможность задавать многие из них по имени. В таблице ниже приведены некоторые из названий цветов:
вид | имя | вид | имя | вид | имя | вид | имя |
White | Red | Orange | Yellow | ||||
Green | Blue | Purple | Black | ||||
Aliceblue | Antiquewhite | Aqua | Aquamarine | ||||
Azure | Beige | Bisque | Blanchedalmond | ||||
Blueviolet | Brown | Burlywood | Cadetblue | ||||
Chartreuse | Chocolate | Coral | Cornflowerblue | ||||
Cornsilk | Crimson | Cyan | Darkblue | ||||
Darkcyan | Darkgoldenrod | Darkgray | Darkgreen | ||||
Darkkhaki | Darkmagenta | Darkolivegreen | Darkorange | ||||
Darkorchid | Darkred | Darksalmon | Darkseagreen | ||||
Darkslateblue | Darkslategray | Darkturquoise | Darkviolet | ||||
Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
Firebrick | Floralwhite | Forestgreen | Fuschia | ||||
Gainsboro | Ghostwhite | Gold | Goldenrod | ||||
Gray | Greenyellow | Honeydew | Hotpink | ||||
Indianred | Indigo | Ivory | Khaki | ||||
Lavender | Lavenderblush | Lemonchiffon | Lightblue | ||||
Lightcoral | Lightcyan | Lightcoldenrodyellow | Lightgreen | ||||
Lightgray | Lightpink | Lightsalmon | Lightseagreen | ||||
Lightskyblue | Lightslategray | Lightsteelblue | Lightyellow | ||||
Lime | Limegreen | Linen | Magenta | ||||
Maroon | Mediumaquamarine | Mediumblue | Mediumorchid | ||||
Mediumpurple | Mediumseagreen | Mediumslateblue | Mediumspringgreen | ||||
Mediumturquoise | Mediumvioletred | Midnightblue | Mintcream | ||||
Mistyrose | Navajowhite | Navy | Oldlace | ||||
Olive | Olivedrab | Orangered | Orchid | ||||
Palegoldenrod | Palegreen | Paleturquoise | Palevioletred | ||||
Papayawhip | Peachpuff | Peru | Pink | ||||
Plum | Powderblue | Rosybrown | Royalblue | ||||
Saddlebrown | Seagreen | Seashell | Sienna | ||||
Silver | Skyblue | Slateblue | Slategray | ||||
Snow | Springgreen | Steelblue | Tan | ||||
Teal | Thistle | Tomato | Turquoise | ||||
Violet | Wheat | Whitesmoke | Yellowgreen |
Использование безопасной палитры цветов
К сожалению, на разных платформах, с разными системными настройками, правильная передача цвета является проблемой. Все дело в том, что браузер всегда старается подстроить цветовую палитру документа под системные настройки и возможности монитора, путем самостоятельного смешивания цветов и их замещения. Как результат - иногда пользователь видит не совсем то, что хотел ему показать web-мастер. Выход из этой ситуации был найден в применении палитры, каждый цвет которой гарантированно передается одинаково всеми браузерами на разных платформах. Это так называемая гарантированная палитра, еще ее называют безопасной палитрой. В эту палитру входят цвета, цветовые составляющие которых, принимают следующие значения:00 ,33 ,66 ,99 , CC ,FF , во всех возможных 216 их сочетаниях.
вид | код | вид | код | вид | код | вид | код | вид | код | вид | код |
FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
Цвет в языке CSS можно задавать разными способами:
- по названию,
- по шестнадцатеричному значению,
- в форматах RGB и RGBA,
- в форматах HSL и HSLA.
Задание цвета по названию
Браузеры поддерживают указание некоторых цветов элементам по названиям. В этой таблице некоторые ключевые слова (английские названия цветов), используемые для задания свойств цвета, RGB код, шестнадцатеричный код (HEX) и HSL код.
Имя | Цвет | RGB | HEX | HSL | Описание |
---|---|---|---|---|---|
white | rgb(255, 255, 255) | #ffffff или #fff | hsl(0, 0%, 100%) | Белый | |
silver | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Серый | |
gray | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Темно-серый | |
black | rgb(0, 0, 0) | #000000 или #000 | hsl(0, 0%, 0%) | Черный | |
maroon | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Темно-красный | |
red | rgb(255, 0, 0) | #ff0000 или #f00 | hsl(0, 100%, 50%) | Красный | |
orange | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Оранжевый | |
yellow | rgb(255, 255, 0) | #ffff00 или #ff0 | hsl(60, 100%, 50%) | Желтый | |
olive | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Оливковый | |
lime | rgb(0, 255, 0) | #00ff00 или #0f0 | hsl(120, 100%, 50%) | Светло-зеленый | |
green | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Зеленый | |
aqua | rgb(0, 255, 255) | #00ffff или #0ff | hsl(180, 100%, 50%) | Голубой | |
blue | rgb(0, 0, 255) | #0000ff или #00f | hsl(240, 100%, 50%) | Синий | |
navy | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Темно-синий | |
teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Сине-зеленый | |
fuchsia | rgb(255, 0, 255) | #ff00ff или #f0f | hsl(300, 100%, 50%) | Розовый | |
purple | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Фиолетовый |
Это образец использования имен цветов, навзания цветов взяты из расширеной таблицы.
Вот как работает этот код:
Установка цвета с помощью RGB
RGB - аддитивная цветовая модель. На английском языке addition - добавление. RGB - это аббревиатура английских слов: Red, Green, Blue - красный, зелёный, синий). Из этого понятно что в модели RGB цвета синтезируются путём добавления трёх цветов (красного, зелёного, синего) в различных количествах.
Смешивая красный, зелёный и синий цвета можно получить несколько миллионов оттенков. В памяти компьютеров хранятся все возможные комбинации.
Ближе к делу.
Для установки свойств в этом формате используется запись rgb(r, g, b) , где r, g, b - это три канала для каждого цвета (red, green, blue). Значения для каждого канала задаются в диапазоне от 0 до 255.
Пример кода.
Чтобы всё стало понятно, приведу пример кода:
Вот так должен сработать этот пример:
Рис.1. Цвета в RGB.Пояснения к примеру.
В начале страницы создаём класс div.rgb , он нужен чтобы блоки созданные тегом
Далее, в коде устанавливаем фоновый цвет блока
Попробуйте отредактировать этот пример и указать свои значения, например rgb(100, 100, 100) .
Установка цвета с помощью RGBA
В CSS3 появился новый инструмент для работы с цветом - формат RGBA. Его можно назвать развитием модели RGB, но с добавлением одного нового канала - A или альфа-канала. Этот канал устанавливает прозрачность цвета. Его значения задаются в диапазоне от 0 до 1. Значение равное 0 соответствует полной прозрачности, 1 - полной непрозрачности (цвет будет таким, каким он задан в первых трёх каналах RGB), а промежуточные значения, как 0.4 или 0.6 - полупрозрачности в различной степени.
Пример кода.
Вот как он сработает:
Этот код по своему визуальному представлению аналогичен следующему, использующему модель RGB для задания значения цвета:
Вот его результат:
Значение альфа канала равное нолю делает любой цвет невидимым - абсолютно прозрачным, значение равное единице транслирует цвет в RGB-коде без изменений. Свойство rgba(255,0,0,1.0) показывает красный цвет rgb(255, 0, 0) .
По шестнадцатеричному значению (HEX-код)
В повсежневной жизни мы пользуемся десятичной системой счёта. Её истоки очень просты - у нас десять пальцев на руках, и считать по пальцам в жизни бывало удобно. Если в десятичной системе десять цифр: от 0 до 9, а число 10 - это уже следующий разряд, то в шестнадцатеричная система счисления 16 цифр, а следующим разрядом будет число 16.
Для указания кодов цветов в качестве шестнадцатеричных цифр используются обычные десятичные цифры от 0 до 9 и для обозначения цифр от 10 до 15 используют латинские буквы от A до F то есть (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Для наглядности сведём это в таблицу:
Для записи шестнадцатеричных чисел больше F (15 по десятичной системе), как и в десятичной системе, также используют объединение двух цифр, но уже шестнадцатеричных, что очевидно. Так, для записи десятичного числа 255 в шестнадцатеричной системе используется запись FF.
Шестнадцатеричная система более понятна компьютеру, он быстрее обрабатывает значения, заданные по шестнадцатеричному значению.
Чтобы указать цвет в 16-ричной системе, перед числовым значением нужно ставить знак «#», пример: #FFC0CB . Само значение #FFC0CB состоит из трёх шестнадцатеричных цифр FF , C0 и CB . Смысл этой записи такой же, как и установка цвета в формате RGB (rgb(r, g, b) ) - каждая шестнадцатиричная цифра в HEX-коде указывает насыщение цвета в своём канале модели RGB.
Этот код отобразит следующие элементы:
А вот рисунок с результатом из раздела "Установка цвета с помощью RGB" на этой странице выше.
Рис.1. Цвета в RGB.Мы видим что цвета идентичны.
Допускается сокращенная запись HEX-кода цвета: 6-значное число можно записать как 3-значное. Это допустимо только в случае, когда две цифры в значении цвета одного канала повторяются.
То есть допустимо следующее сокращение записи:
Например, цвет #ff22aa допустимо написать так - #f2a , или цвет #44aa22 допустимо указать в виде #4a2 .
Установка цвета с помощью HSL
В CSS3 появился новый формат для указания цвета.
Формат HSL - это аббревиатура от английских слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).
Оттенок в HSL - это значение цвета на специальном цветовом круге (рисунок 2) и оно задаётся в градусах. Если проводить аналогии с моделью RGB, то 0° соответствует красному, 120° соответствует зелёному, а 240° - синему цвету.
Значение оттенка изменятся в диапазоне от 0 до 359.
Рисунок 2. Цветовой круг HSL.
Второе значение - насыщенность (Saturate) задаётся в процентах. При 100% насыщенности цвет максимально "сочный", по мере движения показателя насыщеннсоти к 0%, цвет становится всё более тусклым и скатывается в серый.
Третье значение - светлота (Lightness) также задаётся в процентах. Чем выше процент, тем более яркий будет цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, при этом неважно, какой цвет из цветового круга был выбран в первом канале. Оптимальным можно считать значение яркости цвета равное 50%.
Установка цвета с помощью HSLA
Формат HSLA соотносится с HSL, так же как и RGB с RGBA. В формате HSLA, как и в RGBA добавлен альфа-канал отвечающий за прозрачность цвета.
Цвет, заданный в формате HSL, читать более просто. Можно сказать что он интуитивно понятен. Например, код hsl(120,60%,50%) можно представить итоговый цвет, если в памяти есть картинка цветового круга HSL. Про форматы RGB и HEX такого сказать нельзя, код цвета заданный в этих форматах становится понятный только после его визуализации на мониторе.
Новые форматы в CSS3 (HSL, HSLA и RGBA) работают в браузерах начиная с версий: IE 9.0, Opera 10.0 Firefox 3.0. Как сделать так, чтобы стили работали на старых браузерах?
Somebloсk { background-color: rgb(255,50,50); background-color: rgba(255,50,50,0.85) }
При использовании такого кода в старых браузерах фоновый цвет для класса .somebloсk хоть и не будет использовать альфа-канал, но будет отображаться в формате RGB.