Коды HTML цветов

RGB и RGBA

Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255. Рассмотрим RGB-код для темно-фиолетового цвета: rgb(204, 51, 255), его можно например применить к CSS свойству, отвечающему за цвет шрифта:

color: rgb(205, 51, 255);

Система RGBA добавляет еще одно число, которое описывает прозрачность цвета, значение может варьироваться от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Значение 0.5 делает цвет полупрозрачным, рассмотрим полупрозрачную версию темно-фиолетового цвета, заданную с помощью RGBA системы:

color: rgba(204, 51, 255, 0.5);

Вы можете увидеть, что значения красного, зеленого и синего цветов аналогичны системе RGB. Четвертое число - 0.5 является степенью прозрачности. Буква "A" в RGBA означает альфа-канал, который является термином из графического дизайна означающим прозрачность.

RGBA цвета удобно использовать для создания полупрозрачных элементов, обеспечивающих видимость элементов, располагающихся под ними.

По названию

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. Названия цветов

• 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%)   Фиолетовый

Серые цвета

• Gainsboro    #DCDCDC RGB (220,220,220)
• светло-серый     # D3D3D3    RGB (211 211 211)
• Серебряный   # C0C0C0    RGB (192,192,192)
• темно-серый  # A9A9A9    RGB (169 169 169)
• серый    # 808080    RGB (128,128,128)
• тусклый  # 696969    RGB (105 105 105)
• свет     # 778899    RGB (119,136,153)
• шифер серый  # 708090    rgb (112,128,144)
• темно-серый  # 2F4F4F    RGB (47,79,79)
• черный   # 000000    rgb (0,0,0)

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.

Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.

Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.

Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.

Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.

Draft (Черновик спецификации) — первая черновая версия стандарта.

Цветовые модели HSL и HSLA

К еще одному методу задания цвета в CSS относится система , её можно значительно реже встретить на страницах сайтов. HSL это аббревиатура, которая объединяет в себе первые буквы трех следующих признаков:

Hue — тон.

Saturation — насыщенность.

Lightness — осветленность.

Фиолетовые цвета

• лаванда  # E6E6FA    RGB (230,230,250)
• чертополох   # D8BFD8    RGB (216,191,216)
• слива    # DDA0DD    RGB (221 160 221)
• Виолетта     # EE82EE    RGB (238 130 238)
• орхидея  # DA70D6    RGB (218 112 214)
• фуксия   # FF00FF    RGB (255,0,255)
• пурпурный    # FF00FF    RGB (255,0,255)
• среднеорхид  # BA55D3    RGB (186,85,211)
• среднефиолетовый     # 9370DB    RGB (147 112 219)
• сине-фиолетовый  # 8A2BE2    RGB (138,43,226)
• темно-фиолетовый     # 9400D3    RGB (148,0 211)
• Darkorchid   # 9932CC    RGB (153,50,204)
• темно-пурпурный  # 8B008B    RGB (139,0,139)
• фиолетовый   # 800080    RGB (128,0,128)
• индиго   # 4B0082    RGB (75,0,130)

С помощью RGB

Можно определить цвет, используя значения красной, зелёной и синей составляющей в десятичном исчислении. Каждая из трёх компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).