Что означает буква а в формате rgba

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.

По шестнадцатеричному значению

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 и описание.

Табл. 1. Названия цветов

Имя	Цвет	Код	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.

Источник

Что такое 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 также позволяет сделать все быстро и легко, и за это мы ее любим.

Источник

Цвета в CSS

Свойство color

Итак, свойство color позволяет задать основной цвет элемента. При настройке этого свойства можно использовать различные значения:

Именованные цвета

CSS поддерживает стандартные наименования цветов, которые можно использовать, просто указывая в качестве значения свойства color имя нужного цвета. Вот как это выглядит:

Вот, если интересно, полный список имён цветов. Тут стоит сказать о том, что некоторые имена цветов поддерживаются не во всех браузерах.

Здесь я использую красный цвет ( red ) для того чтобы быстро показать обводку всех элементов страницы. Цвет red популярен в подобных ситуациях, мне даже доводилось видеть мемы об этом.

Шестнадцатеричные цветовые значения

Шестнадцатеричный код цвета состоит из шести символов. Например, значение #ffffff представляет белый цвет. При описании цветов с использованием шестнадцатеричных значений есть одна особенность, позволяющая, в определённых ситуациях, использовать сокращённую запись кода цвета.

Дело в том, что если пара значений в описании одного компонента цвета идентична, одно из таких значений можно убрать. Каждая пара значений представляет собой описание одного из компонентов цвета. Это, соответственно, компоненты Red (красный), Green (зелёный) и Blue (Синий). Рассмотрим следующий пример:

Сокращение шестнадцатеричных кодов цветов

Цвета, задаваемые в формате RGB/RGBA

При использовании цветовой модели RGB (Red, Green, Blue — красный, зелёный, синий) цвета представляют тремя значениями, описывающими цветовые каналы — соответственно — красный, зелёный и синий канал. Каждое из значений можно представить числом, находящимся в диапазоне от 0 до 255, или процентным значением — от 0 до 100%.

Если три значения равны 0, то получится чёрный цвет. А если все три цветовых компонента установлены в значение 255, то получится белый. То же самое справедливо и при использовании процентных значений.

При описании цветов с использованием цветовой модели RGB можно, помимо цветовых компонентов, указывать и значение, соответствующее альфа-каналу, которое позволяет управлять прозрачностью цвета. Это помогает в работе с насыщенностью цветов, что весьма полезно. Ниже мы рассмотрим некоторые варианты использования цветов, при описании которых используется альфа-канал. Для работы с такими цветами применяется функция rgba() :

Если значение, соответствующее альфа-каналу, равно нулю, тогда основной или фоновый цвет элемента окажется полностью прозрачным, то есть — невидимым.

Цвета, задаваемые в формате HSL

Я редко вижу использование цветовой модели HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота), но в последнее время эта цветовая модель стала привлекать к себе всё больше внимания со стороны дизайнеров и разработчиков.

На цветовом круге каждому цвету соответствует определённый угол, описывающий цветовой тон (hue). Для описания HSL-цвета, помимо тона, нужно указать значения, отвечающие за насыщенность и светлоту цвета.

Разберём процесс описания HSL-цветов. Представим, что нас интересует цветовой тон, показанный на следующем рисунке.

Выбор цветового тона

Для выбора насыщенности и светлоты можно воспользоваться удобным инструментом, который находится здесь. А именно, после выбора тона, насыщенность и светлоту цвета можно представить так, как показано ниже.

Выбор насыщенности и светлоты

Шкала насыщенности, в начале, представлена серым цветом, а в конце — цветом, который мы выбрали на цветовом круге. Шкала светлоты начинается с чёрного цвета, доходит до выбранного цветового тона и заканчивается белым цветом.

Эта гибкость может оказаться очень кстати. Например, можно выбрать цветовой тон, а потом подстроить насыщенность и светлоту в соответствии со своими нуждами. Такой подход позволяет создавать динамичные и лёгкие в использовании цветовые палитры.

Ключевое слово currentColor

Интересной особенностью currentColor является тот факт, что это ключевое слово можно использовать и на уровне родительского элемента, и для дочерних элементов.

В этом примере currentColor можно использовать и для элемента

, и для элемента :

Использование инструментов разработчика для исследования цветов

При проведении экспериментов с CSS-цветами можно воспользоваться одной полезной возможностью инструментов разработчика Chrome. Для вызова этой возможности нужно выбрать некий элемент, цвета которого заданы в шестнадцатеричном формате, и переключиться в режим его исследования. Затем нужно щёлкнуть по маленькому квадратику, который представляет цвет, используемый элементом в данный момент.

Этот приём подходит только для шестнадцатеричных цветов и для свойств, при настройке которых используются CSS-переменные:

Тут надо сказать о том, что при использовании HSL-цветов в комбинации с CSS-переменными всё ещё можно столкнуться с неоднородным поведением браузеров. Например, вывод вышеприведённого примера в Firefox не приведёт к показу цветного квадратика. Вот как это выглядит в разных браузерах.

Браузеры по-разному работают с переменными

Синий квадратик, выводимый в Safari, демонстрирует вычисленное значение используемого CSS-свойства. Это лучше, чем ничего.

Возможно, вы сейчас задаётесь вопросом о том, зачем нам вообще нужен этот квадратик, представляющий вычисленный цвет и выводимый около CSS-свойства? Дело в том, что без него мы не сможем открыть средства инструментов разработчика для работы с цветом, которые помогают исследовать доступность используемого цветового решения.

Цветовые значения, разделённые пробелами

Обычно функции rgb() и hsl() вызывают, передавая им значения, разделённые запятыми. Существует и другой способ вызова таких функций, достаточно новый, но пользующийся отличной браузерной поддержкой. При его использовании значения, передаваемые функциям, разделяют пробелами.

Учитывайте то, что отделение сведений о прозрачности с помощью косой черты — это лишь дополнительная возможность. Ей стоит пользоваться только тогда, когда нужно настроить прозрачность цвета.

Хочу отметить, что хотя я и порекомендовал пользоваться в функциях цветовыми значениями, разделёнными пробелами, я не применял их в статье, так как это — достаточно новая возможность CSS. А мне не хотелось бы запутывать читателей.

Глобальные значения (inherit, initial, unset)

▍Ключевое слово inherit

Вот HTML-код верхней части страницы, в которой имеется заголовок, описание и ссылка:

Цвет ссылок, используемый по умолчанию, выглядит так:

▍Ключевое слово unset

На MDN можно узнать о том, что ключевое слово unset позволяет сбросить значение свойства до унаследованного значения в том случае, если свойство естественным образом наследует это значение от родительского элемента. В противном случае значение сбрасывается до его исходного значения.

Вернёмся к предыдущему примеру и сделаем так, чтобы ссылка унаследовала бы цвет от родительского элемента:

Здесь со всем этим можно поэкспериментировать.

Сценарии использования и практические примеры

Пожалуй, теории на сегодня хватит. Поэтому предлагаю рассмотреть практические примеры работы с цветами в CSS.

▍Полупрозрачный RGBA-цвет

Мне часто приходилось видеть, как функция rgba() используется в CSS для создания дизайна, вариант которого представлен на следующем рисунке.

Обратите внимание на то, что у окружностей имеются границы, которые темнее, чем фон этих окружностей. Как сделать это динамически? А сделать это можно, воспользовавшись границей, полупрозрачный цвет которой задан с применением функции rgba() :

Ту же идею можно использовать и при работе с элементами, у которых имеется фон, в случае, когда их дочерние элементы являются их более тёмными вариантами. Взгляните на следующий рисунок.

▍Использование HSL-цветов

Это может пригодиться в паре ситуаций. Например, тогда, когда нужно сделать так, чтобы светлота цвета кнопки становилась бы меньше при наведении на эту кнопку мыши.

Кнопка становится темнее при наведении на неё указателя мыши

Эту идею можно развить, скомбинировав функцию hsl() и CSS-переменные для создания цветовой палитры, которая легко поддаётся изменениям.

Указывая основной тон, мы можем использовать его, задавая цвета, позволяющие делать элементы светлее или темнее.

Особенно мне здесь нравится организация работы с оттенками серого цвета. Мне всегда было тяжело запоминать правильные шестнадцатеричные значения для оттенков серого. При использовании hsl() работа с такими цветами значительно упрощается.

Обратите внимание на то, как я создал цветовую палитру, основываясь лишь на одном цветовом тоне и меняя светлоту итогового цвета.

Цвет и изменение светлоты

Полагаю, никто не станет спорить с тем, что при таком подходе очень просто работать с оттенками серого. Мне это очень нравится, я планирую использовать этот приём в своих будущих проектах.

При работе над большими проектами я использовал бы следующий подход, подразумевающий применение CSS-переменных и задействующий изменение светлоты цвета:

Здесь можно найти рабочий пример.

▍Использование ключевого слова currentColor с SVG-иконками

Хороший сценарий использования ключевого слова currentColor представлен ситуациями, когда нужно управлять цветом SVG-иконок. Представим, что у нас имеется иконка, после которой идёт текст. Значок иконки и текст должны быть окрашены в один и тот же цвет.

Значок и текст должны быть одного цвета

Вот применяемый здесь стиль:

При таком подходе значок будет окрашен в цвет, назначенный родительскому элементу.

Настройка иконки, заключённой в цветной полупрозрачный прямоугольник

Вот соответствующий CSS-код:

Итоги

Сегодня мы обсудили некоторые особенности описания цветов в CSS, рассмотрели практические приёмы работы с цветами. Хочется надеяться, вам пригодится то, о чём вы сегодня узнали.

Какие CSS-механизмы вы обычно используете, настраивая цвета в своих проектах?

Источник

Теория цвета в цифрах

Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код.

Основы

Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.

Насыщенность цвета зависит от того, насколько разные в парах числа. Чем больше значение пар, тем светлее цвет. Вторая цифра каждой пары уточняет оттенок:

То есть величина чисел в парах означает количество цвета, проще говоря, если все числа максимальные, то в результате будет белый цвет — #FFFFFF, если числа минимальные, нули, то цвета нет, получается черный — #000000. Если изменять каждую пару, то получается: #FF0000 — самый яркий красный, #00FF00 — самый яркий зеленый и #0000FF — самый яркий синий. Соответственно, #00FFFF — самый яркий голубой, #FF00FF — самый яркий пурпурный и #FFFF00 — самый яркий желтый.

Распознавание цвета

Шестнадцатеричный код может быть сокращен с шести символов до трех. Например цвет #FAE означает #FFAAEE. Такая возможность иногда помогает упростить код, и что важнее, легко сократить количество оттенков, если это требуется.

В большинстве случаев распознать цвет по hex-коду можно, учитывая только первые цифры пар. В примере ниже понятно, что цвет смешан из большого количества красного, немного синего, а зеленого совсем нет.

Понимание цвета по hex-коду позволяет веб-дизайнеру быстрее ориентироваться в коде страницы, кроме того, можно всегда произвести впечатление на коллег или клиентов, сказав «Ах, какой прекрасный оттенок бордового».

Можно также легко менять яркость, оттенок или насыщенность цвета, отредактировав лишь его шестнадцатеричный код. В первом примере ниже одна из пар меняется с шагом в 10%, при этом растет яркость цвета. Во втором примере яркость растет, но насыщенность падает:

Подчеркивание ссылок

По умолчанию браузеры подчеркивают гиперссылки на веб-страницах. При использовании не слишком крупных шрифтов подчеркивание может смешиваться с буквами ссылки, и выглядит такая конструкция не очень. Но можно сделать подчеркивание менее насыщенным:

Получившиеся ссылки легче читаются, т.к. подчеркивание не смешивается с символами. Однако добавлять span в каждую ссылку не очень рационально. Поэтому можно убрать подчеркивание ссылок, но при этом добавить border-bottom:

Цвета контента

Зачастую на сайтах используется один и тот же цвет для заголовков и основного текста. Но при таком подходе снижается читабельность контента: чем мельче шрифт, тем контрастнее он должен быть. Пример:

Уменьшение первых цифр в парах hex-кода повысит контрастность текста, а значит читабельность улучшится:

Редактирование фона

Легко управлять фоном, изменяя hex-код цвета:

Фон страницы визуально более чувствителен к изменениям цвета, чем контент. Поэтому можно легко сделать его теплее или холоднее, корректируя и вторую цифру в парах hex-кода. Например:

Подбор и комбинирование цветов

Понимание структуры шестнадцатеричного кода цветов дает дизайнеру возможность точно подбирать комбинации цветов и выбирать цветовые схемы. Самая простая техника — это переставлять одну пару в разные места кода. Еще один способ — удвоение первой цифры в первой паре и разделение на два остальных первых цифр. Также можно комбинировать цвета, взятые из фото. Описанные способы наглядно продемонстрированы на рисунке ниже:

Источник