CSS цвета
Мониторы компьютеров, также как и экраны мобильных телефонов, смартфонов и планшетов, состоят из тысяч маленьких квадратиков, называемых пикселями (если внимательно присмотреться к монитору, то можно их увидеть). Выключенный экран черный, поскольку он не излучает свет, когда он включен, каждый пиксель принимает свой цвет, что и создает изображение, которое мы видим глядя на экран.
Имена цветов
RGB и RGBA
Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255. Рассмотрим RGB-код для темно-фиолетового цвета: rgb(204, 51, 255), его можно например применить к CSS свойству, отвечающему за цвет шрифта:
Система RGBA добавляет еще одно число, которое описывает прозрачность цвета, значение может варьироваться от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Значение 0.5 делает цвет полупрозрачным, рассмотрим полупрозрачную версию темно-фиолетового цвета, заданную с помощью RGBA системы:
RGBA цвета удобно использовать для создания полупрозрачных элементов, обеспечивающих видимость элементов, располагающихся под ними.
HSL и HSLA
Система HSL ( h ue, s aturation, l ightness) описывает цвета основанные на оттенке (hue), насыщенности (saturation) и осветлении (lightness). Вот тот же самый темно-фиолетовый цвет, указанный в формате HSL:
Шестнадцатеричные значения цветов
Шестнадцатеричный код цвета представляет собой шесть символов, стоящих после символа # :
Если каждая пара цифр состоит из одинаковых символов, то значение цвета может быть укорочено. Однако если шестнадцатеричный код выглядит, например, так #bbff10, то такую запись сокращать нельзя.
Примечание: браузеры, которые не поддерживают подобные цветовые значения (rgba, hsl и hsla), не связывают с фоном или шрифтом никакой цвет, полностью игнорируя объявление. В этом случае для фона элемента используется значение по умолчанию (он становится полностью прозрачным), а для текста используется либо значение по умолчанию (черный цвет), либо цвет унаследованный от родительского элемента.
Что означает буква а в формате rgba
Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.
По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 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.
По названию
Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.
| Имя | Цвет | Код | 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
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.
Рис. 1. Цветовой круг
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Пример
Предупреждение
Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Авторы не гарантируют вашей безопасности при их использовании и снимают с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!
Что такое RGBA?
Сначала давайте поговорим о том, что такое RGBA. RGB (что означает Red, Green, Blue — красный, зеленый, синий) — цветовая модель, позволяющая задавать цвет с помощью численных значений трех составляющих. Комбинируя их, можно получить множество различных оттенков.
На рисунке ниже показана палитра цветов Photoshop. Обратите внимание, что выбранный нами голубой цвет может обозначаться несколькими способами, включая знакомую шестнадцатеричную запись, которую мы бы использовали в CSS.
body <
background: #3792b3;
>
Можно задать тот же цвет в RGB, используя три десятичных значения (для красного, зеленого и синего).
body <
background: rgb(55,146,179);
>
В обоих случаях получается один и тот же оттенок, но используется разный синтаксис.
RGBA расшифровывается как Red Green Blue Alpha. На W3C объясняется: «В этой спецификации цветовая модель RGB расширена и включает составляющую альфа, позволяющую задать непрозрачность цвета» Это значит, что можно добавить четвертое значение (от 1 до 0), чтобы задать уровень непрозрачности данного RGB-цвета. Для полной непрозрачности используется значение 1, для полной прозрачности — 0.
Например, мы можем сделать наш голубой цвет полупрозрачным, добавив .5 в качестве четвертого значения после значений RGB.
body <
background: rgba (55, 146, 179, .5);
>
Возможность задавать прозрачность цвета легко и быстро прямо в таблице стилей — это прекрасно. Но как насчет собственно свойства opacity и чем оно отличается от RGBA?
В CSS3 можно добавлять прозрачность с помощью свойства opacity. Просто задайте значение от 1 до 0, чтобы определить степень прозрачности любого элемента. Например, если вы хотите добиться непрозрачности 65% для всех абзацев на странице, можно написать такой код.
Значительная разница между opacity и RGBA заключается в том, что opacity задает прозрачность элемента и всего, что в нем содержится, тогда как RGBA задает прозрачность только фона или цвета элемента.
RGBA — необычайно гибкое средство, позволяющее задавать прозрачность цвета с помощью одной простой строки кода. Возможность управлять элементами дизайна через таблицы стилей вместо того, чтобы редактировать изображения, не только облегчает жизнь, но и позволяет работать быстрее и эффективнее — браузер берет на себя всю тяжелую работу. И, опять же, это перспективное направление в CSS, поэтому мы можем уже сейчас начать экспериментировать с новыми возможностями в браузерах, поддерживающих продвинутые стили (такие как RGBA).
К счастью, использование синтаксиса цветовой модели RGBA безопасно для браузеров, которые ее не поддерживают. Например, Internet Explorer просто проигнорирует такое правило.
Сейчас мы лишь поверхностно изучили возможности RGBA. Возможность задавать непрозрачность одновременно с цветом — гибкий и мощный инструмент, а RGBA — всего лишь один из способов добиться этого. Модель RGBA также позволяет сделать все быстро и легко, и за это мы ее любим.
Что означает буква а в формате rgba
Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.
По шестнадцатеричному значению
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.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 и описание.
| Имя | Цвет | Код | 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+ |
| 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 уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
| 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% соответствуют чёрному и белому цвету.
| 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.
Этот термин не определяет, какое цветовое пространство RGB используется. В нем также не указывается, умножены ли цвета на значение альфа, и если да, то не указывается, в каком цветовом пространстве было выполнено предварительное умножение. Это означает, что для определения того, как обрабатывать, требуется больше информации, чем просто «RGBA». картинка.
В некоторых контекстах аббревиатура «RGBA» означает конкретный макет памяти (называемый ниже RGBA8888 ), а другие термины, такие как «BGRA», используются для альтернативных вариантов. В других контекстах «RGBA» означает любой макет.
СОДЕРЖАНИЕ
Представление
В компьютерной графике пиксели, кодирующие информацию о цветовом пространстве RGBA, должны храниться в памяти компьютера (или в файлах на диске). В большинстве случаев используются четыре равных по размеру части смежной памяти, по одной для каждого канала, и 0 в канале указывает черный цвет или прозрачную альфа-канал, а биты «все 1» указывают на белый или полностью непрозрачный альфа-канал. Безусловно, наиболее распространенным форматом является хранение 8 бит (один байт ) для каждого канала, что составляет 32 бита для каждого пикселя.
| Little-endian | С прямым порядком байтов | |
|---|---|---|
| RGBA8888 | ABGR32 | RGBA32 |
| ARGB32 | BGRA8888 | ARGB8888 |
| RGBA32 | ABGR8888 | RGBA8888 |
RGBA8888
В OpenGL и Portable Network Graphics (PNG) используется порядок байтов RGBA, где цвета хранятся в памяти таким образом, что R находится по наименьшему адресу, G после него, B после него и A последним. В архитектуре с прямым порядком байтов это эквивалентно ABGR32.
Во многих системах, когда на канал больше 8 бит (например, 16 бит или с плавающей запятой), каналы сохраняются в порядке RGBA, даже если 8-битные каналы хранятся в другом порядке.
ARGB32
Каналы организованы в памяти таким образом, что одно 32-битное целое число без знака имеет альфа-выборку в самых высоких 8 битах, за которой следуют красная выборка, зеленая выборка и, наконец, синяя выборка в младших 8 битах:
Этот макет стал популярным, когда на персональных компьютерах был введен 24-битный цвет (и 32-битный RGBA). В то время программам было намного быстрее и проще манипулировать одним 32-битным блоком, чем четырьмя 8-битными блоками.
В системах с прямым порядком байтов это эквивалентно порядку байтов BGRA. В системах с прямым порядком байтов это эквивалентно порядку байтов ARGB.
RGBA32
Байты хранятся в памяти на машине с прямым порядком байтов в порядке ABGR.
