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%).