Что такое rgb и как используется?

HSL Colors

HSL stands for Hue, Saturation and Lightness.

An HSL color value is specified with: hsl(hue, saturation, lightness).

1. Hue is a degree on the color wheel (from 0 to 360):
   • 0 (or 360) is red
   • 120 is green
   • 240 is blue
2. Saturation is a percentage value: 100% is the full color.
3. Lightness is also a percentage; 0% is dark (black) and 100% is white.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

The following example defines different HSL colors:

Example

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */#p3 {background-color: hsl(120, 100%, 25%);}  /* dark
green */#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

Модель RGB и соотношение форматов яркости и цветности

Все яркости — цветности форматов , используемых в различных телевизионных и видео стандартов , таких как YIQ для NTSC , YUV для PAL , YD _B D _R для СЕКАМ , и YP _B P _R для видео компонент разностных использования цветовых сигналов, с помощью которых RGB цветного изображения может быть закодированы для трансляции / записи, а затем снова декодированы в RGB для их отображения. Эти промежуточные форматы были необходимы для совместимости с существовавшими ранее форматами черно-белого телевидения. Кроме того, эти цветоразностные сигналы требуют меньшей полосы пропускания данных по сравнению с полными сигналами RGB.

Аналогичным образом , ток высокой эффективности цифровых цветных изображений сжатия данных схемы , такие как JPEG и MPEG — магазине RGB цвета внутри в YC _B C _R формате, в цифровом формате яркости-цветности на основе YP _B P _R . Использование YC _B C _R также позволяет компьютерам выполнять субдискретизацию с потерями с каналами цветности (обычно до соотношений 4: 2: 2 или 4: 1: 1), что уменьшает размер результирующего файла.

HSLA

По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.

Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

1. h1 { color: hsl(120, 100%, 50%); } /* зелёный в обычном HSL */
2. h2 { color: hsla(120, 100%, 50%, 1); } /* тот же зелёный в HSLA, потому как непрозрачность: 100% */
3. h3 { color: hsla(120, 100%, 50%, 0.5); } /* непрозрачность: 50% */
4. h4 { color: hsla(120, 100%, 50%, .155); } /* непрозрачность: 15.5% */
5. h5 { color: hsla(120, 100%, 50%, 0); } /* полностью прозрачный */

Дизайн арок из гипсокартона — фото

В нашей галерее представлены наиболее интересные и яркие примеры того, как могут выглядеть арки из гипсокартона в интерьере. Для удобства они сгруппированы по разным типам помещений. Посмотрев снимки, Вы непременно найдете для себя вдохновляющие варианты оформления!

Добро пожаловать в радугу RGB освещения

Начиная с программного обеспечения и заканчивая аппаратным обеспечением, RGB — это все, и одним из самых модных способов использования RGB в современном мире является освещение RGB. Мы говорим об использовании RGB-светодиодов для освещения не только наших экранов, но и задних панелей наших мониторов, телевизоров, игровых аксессуаров, таких как клавиатуры и мыши, материнские платы, видеокарты, корпуса ПК, процессорные кулеры, вентиляторы и даже игровые кресла. !

Освещение RGB проникло в огромное количество устройств и даже в мебель. Хотя некоторые люди думают, что это довольно глупо, другие думают, что это круто. Любите ли вы радугу или предпочитаете освещать все одним цветом, RGB позволяет вам это сделать.

Но как работает освещение RGB? Ответ проще, чем вы думаете, и все это относится к тому, что означает RGB: красный, зеленый, синий . По сути, все устройства и светильники с подсветкой RGB имеют полоски или пучки светодиодов RGB. Светодиод RGB представляет собой сочетание трех разноцветных светодиодов, соединенных вместе: один красный светодиод, один зеленый светодиод и один синий светодиод.

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

Возможно, лучшая реализация RGB-освещения — это та, которую мы все чаще видим в игровых компьютерах. Одна из лучших вещей в этом — то, что вы можете использовать программное обеспечение для настройки и адаптации световых эффектов RGB вашего компьютера, как вы хотите. В качестве примера можно привести программное обеспечение ASUS Aura, которое позволяет синхронизировать световые эффекты RGB и даже иметь специальные внутриигровые эффекты, которые настраиваются на лету в зависимости от действий в вашей игре.

В любом случае, после того, как вы перейдете на RGB-путь, вам, вероятно, понравится, благодаря степени персонализации, которую вы получаете.

У вас есть другие вопросы, касающиеся RGB?

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

Управление цветом

Правильное воспроизведение цветов, особенно в профессиональной среде, требует управления цветом на всех устройствах, участвующих в производственном процессе, многие из которых используют RGB. Управление цветом приводит к нескольким прозрачным преобразованиям между независимым от устройства и зависящим от устройства цветовым пространством (RGB и другими, например, CMYK для цветной печати) в течение типичного производственного цикла, чтобы обеспечить согласованность цвета на протяжении всего процесса. Наряду с творческой обработкой такое вмешательство в цифровые изображения может повредить точность цветопередачи и детализацию изображения, особенно при уменьшении гаммы . Профессиональные цифровые устройства и программные инструменты позволяют обрабатывать изображения 48 бит на пиксель (16 бит на канал), чтобы минимизировать любой такой ущерб.

ICC-совместимые приложения, такие как Adobe Photoshop , используют цветовое пространство Lab или цветовое пространство CIE 1931 в качестве пространства соединения профиля при преобразовании между цветовыми пространствами.

Числовые представления

Типичный селектор цвета RGB в графическом ПО. Каждый ползунок находится в диапазоне от 0 до 255.

Шестнадцатеричные 8-битные RGB-представления 125 основных цветов

Цвет в цветовой модели RGB описывается указанием количества включенного красного, зеленого и синего цветов. Цвет выражается как триплет RGB ( r , g , b ), каждый компонент которого может варьироваться от нуля до определенного максимального значения. Если все компоненты равны нулю, результат будет черным; если все на максимуме, результатом будет самый яркий представимый белый цвет.

Эти диапазоны можно количественно оценить несколькими способами:

• От 0 до 1 с любым промежуточным дробным значением. Это представление используется в теоретическом анализе и в системах, использующих представления с плавающей запятой .
• Значение каждого цветового компонента также можно записать в процентах от 0% до 100%.
• В компьютерах значения компонентов часто хранятся как целые числа в диапазоне от 0 до 255, диапазоне, который может предложить один 8-битный байт . Они часто представлены как десятичные или шестнадцатеричные числа.
• Высококачественное оборудование для обработки цифровых изображений часто может работать с большими целыми диапазонами для каждого основного цвета, такими как 0..1023 (10 бит), 0..65535 (16 бит) или даже больше, за счет расширения 24-битного ( три 8-битных значения) в 32-битные , 48-битные или 64-битные блоки (более или менее независимо от размера слова конкретного компьютера ).

Например, самый яркий насыщенный красный цвет записывается в различных обозначениях RGB как:

Обозначение	RGB триплет
Арифметика	(1,0, 0,0, 0,0)
Процент	(100%, 0%, 0%)
Цифровой 8 бит на канал	(255, 0, 0) или иногда # FF0000 (шестнадцатеричный)
Цифровой 12 бит на канал	(4095, 0, 0)
Цифровой 16 бит на канал	(65535, 0, 0)
Цифровой 24 бита на канал	(16777215, 0, 0)
Цифровой 32-битный на канал	(4294967295, 0, 0)

Во многих средах значения компонентов в пределах диапазонов не управляются как линейные (то есть числа нелинейно связаны с интенсивностями, которые они представляют), как, например, в цифровых камерах и телевещании и приеме из-за гамма-коррекции . Линейные и нелинейные преобразования часто выполняются с помощью цифровой обработки изображений . Представления только с 8 битами на компонент считаются достаточными, если используется гамма-кодирование .

Ниже приводится математическая зависимость между пространством RGB и пространством HSI (оттенок, насыщенность и интенсивность: цветовое пространство HSI ):

язнак равнор+грамм+B3Sзнак равно1-3(р+грамм+B)мин(р,грамм,B)ЧАСзнак равнопотому что-1⁡((р-грамм)+(р-B)2(р-грамм)2+(р-B)(грамм-B))предполагая грамм>B{\ displaystyle {\ begin {align} I & = {\ frac {R + G + B} {3}} \\ S & = 1 \, — \, {\ frac {3} {(R + G + B)} } \, \ min (R, G, B) \\ H & = \ cos ^ {- 1} \ left ({\ frac {(RG) + (RB)} {2 {\ sqrt {(RG) ^ {2 } + (RB) (GB)}}}} \ right) \ qquad {\ text {при условии}} G> B \ end {align}}}

Если , то .
B>грамм{\ displaystyle B> G}ЧАСзнак равно360-ЧАС{\ displaystyle H = 360-H}

Глубина цвета

Цветовая модель RGB — один из наиболее распространенных способов кодирования цвета в вычислениях, и используется несколько различных двоичных цифровых представлений. Основной характеристикой всех из них является квантование возможных значений для каждого компонента (технически выборки ) с использованием только целых чисел в некотором диапазоне, обычно от 0 до некоторой степени двух минус один (2 n  — 1), чтобы подогнать их под некоторые группировки битов . Обычно встречаются кодировки 1, 2, 4, 5, 8 и 16 бит на цвет; общее количество битов, используемых для цвета RGB, обычно называется глубиной цвета .

Список монохромных и RGB палитр

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

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

Для получения информации о конкретном оборудовании и различных методах создания цветов, отличных от RGB, см. Разделы « и « .

Для получения информации о различных программных компоновках и типах цветов, включая другие возможные варианты полного RGB на дисплеях с 8-битной глубиной , см. Раздел « ».

Монохромные палитры

В этих палитрах есть только некоторые оттенки серого.

Биты	черный и белый	2 2  = 4 уровня серого	2 4  = 16 уровней серого	2 8  = 256 уровней серого
нет дизеринга
Дизеринг Флойда – Стейнберга

Дихромные палитры

Каждая переставленная пара красного, зеленого и синего (16-битная цветовая палитра, 65 536 цветов).

	16-битный красный зеленый	16-битный красный синий	16-битный зеленый синий
Добавка
Субтрактивный

Обычные палитры RGB

В этих полных палитрах RGB используется одинаковое количество битов для хранения относительной интенсивности красного, зеленого и синего компонентов цвета каждого пикселя изображения. Таким образом, они имеют одинаковое количество уровней на канал, а общее количество возможных цветов всегда является кубом степени двойки. Следует понимать, что «при разработке» многие из этих форматов были напрямую связаны с размером «естественной длины слова» некоторых хост-компьютеров в байтах — объемом памяти в битах, удерживаемых одним адресом памяти, так что ЦП может захватывать или поставил за одну операцию.

Биты	2 1 × 3 = 8 цветов	2 2 × 3 = 64 цвета	2 3 × 3 = 512 цветов	2 4 × 3 = 4096 цветов	2 5 × 3 = 32 768 цветов	2 6 × 3 = 262 144 цвета	2 8 × 3 = 16 777 216 цветов
нет дизеринга
Дизеринг Флойда-Стейнберга
Цветной куб

Необычные палитры RGB

Это также палитры RGB в смысле, определенном выше (за исключением 4-битного RGBI, бит интенсивности которого влияет на все каналы одновременно), но либо они не имеют одинакового количества уровней для каждого основного канала, либо числа не являются степенями двойки, поэтому не представляются как отдельные битовые поля. Все они используются в популярных персональных компьютерах .

2 3 × 2 = 16 цветов	3 3  = 27 цветов	8 × 8 × 4 = 256 цветов	32 × 64 × 32 = 65 536 цветов ( HighColor )

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity
for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (fully opaque).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

The following example defines different RGBA colors:

Example

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red
with opacity */#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue
with opacity */

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

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.

Цветовое пространство HSB

Эта модель разработана для первых графических редакторов еще в 90-х годах. Ее отличием является трехканальное построение спектра. Она определяет не просто какой-то оттенок смешением красок, данный тип цветопередачи основан на показателях цвета, а именно:

1. Hue – цветовой тон. Выбирается один из спектра радуги, имеет радиальное расположение, определяется углом от 0 до 360 градусов на окружности с оттенками. С другой стороны, параметр эквивалентен длине световой волны, которую воспринимает человеческое зрение.
2. Saturation – насыщенность. Регулирует контрастность оттенка по отношению к печатному или виртуальному носителю. Это как при подмешивании белой краски. Наиболее насыщенные цвета находятся по краям круга, чем ближе к центру, тем они становятся более бледными. Соответствует интенсивности цветовой волны.
3. Brightness – яркость, где 0 – это полностью белый, а 100 – черный. Данный параметр задает освещенность цветовой волны.

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

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Цветовая схема CMYK

Состоит из 4 основных цветов, расшифровка CMYK:

• С (сyan) – синий – можно охарактеризовать как насыщенный голубой;
• M (magenta) – малиновый – цвет, приближенный к темно-розовому или фуксии;
• Y (yellow) – желтый – ортодоксальный привычный цвет без понижения или повышения тона;
• K (key) – черный.

У нее меньший цветовой охват в сравнении с таблицей цветов RGB, однако именно она подходит для триадной печати. Для образования новых оттенков идет смешение трех цветов с добавлением черного. В данной цветовой модели не предусмотрен белый. Его невозможно получить смешением 3 цветов, как в случае с RGB. Белый получается только за счет оттенка самого материала.

На данный момент именно эта модель является стандартом в офсетной полноцветной печати в Европе, США, Японии. В большинстве случаев используется цветовая схема CMYK, при которой оттенки исчисляются от 0 до 100, однако есть и другая модель – CMYK 255. В ней оттенки исчисляются от 0 до 255. Приведем пример.

Допустим, требуется получить чисто черный, тогда показатели должны быть максимальными (в стандартной схеме – по 100), если же белый (то есть отсутствие цвета) – 0. Регулируя каждый из 4 показателей, можно добиться требуемого оттенка. Обычно для дизайнеров помощниками выступают специальные инструменты, как, например, пипетка в редакторе Photoshop. Она определяет не просто вид конкретного оттенка, но и его цветовую схему. Тогда для достижения идентичного результата (при множественном тираже или различных вариантах корпоративной продукции) достаточно знать цифровое значение каждого цвета в системе.

RGBW и RGB отличия

Однако теперь то же самое практикуется и в линейке телевизоров 2017 года, например, LG UJ630V, UJ750V Конечно же, мы говорим здесь о технологии конструктивного исполнения пиксельной матрицы LG RGBW. У таких RGBW панелей символ разрешения 4К едва ли не «притягивается за уши» только благодаря небольшому хитроумному надувательству.

В обычных телевизорах 4К пиксели жёстко соответствуют спектру RGB. Другими словами, внутри каждого из 3840 пикселей, составляющих одну строку, в обычном 4К телевизоре с RGB матрицей есть красный, зелёный и синий субпиксель (суммарно до 3840 x 3 = 11 520). Они могут объединяться разными способами и создают все экранные цвета, которые мы видим при просмотре контента.

Некоторые 4К UHD телевизоры также включают дополнительный белый субпиксель, сохраняя при этом то же самое число цветных пикселей RGB. Дополнительный субпиксель для белого увеличивает общее количество субпикселей до 15 360 на строку. Это вариант, который используется в 4К телевизорах LG OLED с превосходным визуальным результатом.

Однако у бюджетных «4К» LED RGBW телевизоров от LG вместо простого добавления белого (W) субпикселя к каждой пиксельной RGB-ячейке наблюдаем просто замену каждого четвёртого субпикселя в строке на белый. Что в результате? Теоретические подозрения подтверждаются на практике

Результатом является значительное снижение насыщенности RGBW цвета, уменьшение глубины уровня чёрного и, что ещё более важно, уменьшение воспринимаемого разрешения

Да, официально телевизоры относятся к категории 4К Ultra HD, потому что общее количество их пикселей (включая белый субпиксель) остаётся неизменным, именно к этому апеллируют и инженеры LG. Но, отсекая этот четвёртый субпиксель, имеющий цвет R, G или B, и заменяя его белым, LG сделала экраны на этих телевизорах неэффективными в плане отображения тонких цветовых деталей изображения.

Никто не спорит, что по сравнению с обычным HDTV или, особенно, с моделями 720p телевизоры RGBW «4K» LG пока ещё показывают замечательно и эффективнее с точки зрения реального разрешения. Но если поместить рядом квази-4К телевизор RGBW LED 2016 или 2017 года и практически любой полный RGB 4K UHD ТВ хоть самой LG, хоть любого другого бренда, то вы почти наверняка заметите пониженное качество моделей LG RGBW.

Эти телевизоры действительно дешевле, чем средний 4К UHD телевизор (себестоимость производства матрицы RGBW на порядок ниже), и во многих отношениях они на самом деле неплохие для отображения большинства масштабированного до 4K обычного контента SDR-видео.

Но дух истинного 4K UHD не подразумевает исключения хотя бы одного цветного субпикселя из строки. Не говоря уже про цену – полный RGB телевизор 4K UHD сейчас можно купить по аналогичной стоимости и обеспечить себя по-настоящему лучшим качеством изображения, лучшей цветопередачей и намного более высокой контрастностью.

Если же интересует телевизор с HDR, в частности, этого или предыдущего года, то и тогда бюджетные 4K RGBW ЖК-мониторы LG, безусловно, не лучший выбор. У некоторых из них есть наклейка «HDR Support» (что истинно в абсолютном смысле, поскольку все эти модели поддерживают передачу и воспроизведение контента HDR), но с точки зрения фактической реализации стандарта HDR в любом смысле этой технологии эти телевизоры не попадают в эту категорию.

Во всём этом самая неприятная вещь для нас заключается не в том, что LG продаёт RGBW телевизоры подобного рода. Потребитель всегда имеет право выбора. Нет, раздражает то, что они продаются, как будто ничем не отличаются от любого настоящего телевизора RGB 4K, и это не просто случай. LG получила множество негативных откликов по поводу своих псевдо-4K RGB+W телевизоров 2016, но, очевидно, это не повлияло на её практику 2017 года.

Впрочем, есть надежда, что в 2018 году ситуация изменится и в бюджетной линейке 4К ТВ (SK950V, SK900V, SK800V, UK770V, а также в двух диагоналях UK650) будут использоваться полноцветные RGB-матрицы.

Color Names Sorted by Color Groups

All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):

Color Name	HEX	Color	Shades	Mix
Pink	#FFC0CB		Shades	Mix
LightPink	#FFB6C1		Shades	Mix
HotPink	#FF69B4		Shades	Mix
DeepPink	#FF1493		Shades	Mix
PaleVioletRed	#DB7093		Shades	Mix
MediumVioletRed	#C71585		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Lavender	#E6E6FA		Shades	Mix
Thistle	#D8BFD8		Shades	Mix
Plum	#DDA0DD		Shades	Mix
Orchid	#DA70D6		Shades	Mix
Violet	#EE82EE		Shades	Mix
Fuchsia	#FF00FF		Shades	Mix
Magenta	#FF00FF		Shades	Mix
MediumOrchid	#BA55D3		Shades	Mix
DarkOrchid	#9932CC		Shades	Mix
DarkViolet	#9400D3		Shades	Mix
BlueViolet	#8A2BE2		Shades	Mix
DarkMagenta	#8B008B		Shades	Mix
Purple	#800080		Shades	Mix
MediumPurple	#9370DB		Shades	Mix
MediumSlateBlue	#7B68EE		Shades	Mix
SlateBlue	#6A5ACD		Shades	Mix
DarkSlateBlue	#483D8B		Shades	Mix
RebeccaPurple	#663399		Shades	Mix
Indigo	#4B0082		Shades	Mix
Color Name	HEX	Color	Shades	Mix
LightSalmon	#FFA07A		Shades	Mix
Salmon	#FA8072		Shades	Mix
DarkSalmon	#E9967A		Shades	Mix
LightCoral	#F08080		Shades	Mix
IndianRed	#CD5C5C		Shades	Mix
Crimson	#DC143C		Shades	Mix
Red	#FF0000		Shades	Mix
FireBrick	#B22222		Shades	Mix
DarkRed	#8B0000		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Orange	#FFA500		Shades	Mix
DarkOrange	#FF8C00		Shades	Mix
Coral	#FF7F50		Shades	Mix
Tomato	#FF6347		Shades	Mix
OrangeRed	#FF4500		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Gold	#FFD700		Shades	Mix
Yellow	#FFFF00		Shades	Mix
LightYellow	#FFFFE0		Shades	Mix
LemonChiffon	#FFFACD		Shades	Mix
LightGoldenRodYellow	#FAFAD2		Shades	Mix
PapayaWhip	#FFEFD5		Shades	Mix
Moccasin	#FFE4B5		Shades	Mix
PeachPuff	#FFDAB9		Shades	Mix
PaleGoldenRod	#EEE8AA		Shades	Mix
Khaki	#F0E68C		Shades	Mix
DarkKhaki	#BDB76B		Shades	Mix
Color Name	HEX	Color	Shades	Mix
GreenYellow	#ADFF2F		Shades	Mix
Chartreuse	#7FFF00		Shades	Mix
LawnGreen	#7CFC00		Shades	Mix
Lime	#00FF00		Shades	Mix
LimeGreen	#32CD32		Shades	Mix
PaleGreen	#98FB98		Shades	Mix
LightGreen	#90EE90		Shades	Mix
MediumSpringGreen	#00FA9A		Shades	Mix
SpringGreen	#00FF7F		Shades	Mix
MediumSeaGreen	#3CB371		Shades	Mix
SeaGreen	#2E8B57		Shades	Mix
ForestGreen	#228B22		Shades	Mix
Green	#008000		Shades	Mix
DarkGreen	#006400		Shades	Mix
YellowGreen	#9ACD32		Shades	Mix
OliveDrab	#6B8E23		Shades	Mix
DarkOliveGreen	#556B2F		Shades	Mix
MediumAquaMarine	#66CDAA		Shades	Mix
DarkSeaGreen	#8FBC8F		Shades	Mix
LightSeaGreen	#20B2AA		Shades	Mix
DarkCyan	#008B8B		Shades	Mix
Teal	#008080		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Aqua	#00FFFF		Shades	Mix
Cyan	#00FFFF		Shades	Mix
LightCyan	#E0FFFF		Shades	Mix
PaleTurquoise	#AFEEEE		Shades	Mix
Aquamarine	#7FFFD4		Shades	Mix
Turquoise	#40E0D0		Shades	Mix
MediumTurquoise	#48D1CC		Shades	Mix
DarkTurquoise	#00CED1		Shades	Mix
Color Name	HEX	Color	Shades	Mix
CadetBlue	#5F9EA0		Shades	Mix
SteelBlue	#4682B4		Shades	Mix
LightSteelBlue	#B0C4DE		Shades	Mix
LightBlue	#ADD8E6		Shades	Mix
PowderBlue	#B0E0E6		Shades	Mix
LightSkyBlue	#87CEFA		Shades	Mix
SkyBlue	#87CEEB		Shades	Mix
CornflowerBlue	#6495ED		Shades	Mix
DeepSkyBlue	#00BFFF		Shades	Mix
DodgerBlue	#1E90FF		Shades	Mix
RoyalBlue	#4169E1		Shades	Mix
Blue	#0000FF		Shades	Mix
MediumBlue	#0000CD		Shades	Mix
DarkBlue	#00008B		Shades	Mix
Navy	#000080		Shades	Mix
MidnightBlue	#191970		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Cornsilk	#FFF8DC		Shades	Mix
BlanchedAlmond	#FFEBCD		Shades	Mix
Bisque	#FFE4C4		Shades	Mix
NavajoWhite	#FFDEAD		Shades	Mix
Wheat	#F5DEB3		Shades	Mix
BurlyWood	#DEB887		Shades	Mix
Tan	#D2B48C		Shades	Mix
RosyBrown	#BC8F8F		Shades	Mix
SandyBrown	#F4A460		Shades	Mix
GoldenRod	#DAA520		Shades	Mix
DarkGoldenRod	#B8860B		Shades	Mix
Peru	#CD853F		Shades	Mix
Chocolate	#D2691E		Shades	Mix
Olive	#808000		Shades	Mix
SaddleBrown	#8B4513		Shades	Mix
Sienna	#A0522D		Shades	Mix
Brown	#A52A2A		Shades	Mix
Maroon	#800000		Shades	Mix
Color Name	HEX	Color	Shades	Mix
White	#FFFFFF		Shades	Mix
Snow	#FFFAFA		Shades	Mix
HoneyDew	#F0FFF0		Shades	Mix
MintCream	#F5FFFA		Shades	Mix
Azure	#F0FFFF		Shades	Mix
AliceBlue	#F0F8FF		Shades	Mix
GhostWhite	#F8F8FF		Shades	Mix
WhiteSmoke	#F5F5F5		Shades	Mix
SeaShell	#FFF5EE		Shades	Mix
Beige	#F5F5DC		Shades	Mix
OldLace	#FDF5E6		Shades	Mix
FloralWhite	#FFFAF0		Shades	Mix
Ivory	#FFFFF0		Shades	Mix
AntiqueWhite	#FAEBD7		Shades	Mix
Linen	#FAF0E6		Shades	Mix
LavenderBlush	#FFF0F5		Shades	Mix
MistyRose	#FFE4E1		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Gainsboro	#DCDCDC		Shades	Mix
LightGray	#D3D3D3		Shades	Mix
Silver	#C0C0C0		Shades	Mix
DarkGray	#A9A9A9		Shades	Mix
DimGray	#696969		Shades	Mix
Gray	#808080		Shades	Mix
LightSlateGray	#778899		Shades	Mix
SlateGray	#708090		Shades	Mix
DarkSlateGray	#2F4F4F		Shades	Mix
Black	#000000		Shades	Mix

❮ Previous
Next ❯

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Opacity

The CSS property sets the opacity for
the whole element (both background color and text will be opaque/transparent).

The property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

Notice that the text above will also be
transparent/opaque!

The following example shows different elements with opacity:

Example

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity
*/#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with
opacity */#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue
with opacity */

❮ Previous
Next ❯

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel — which specifies the opacity
for a color.

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the
alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

The following example defines different HSLA colors:

Example

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark
green with opacity */#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green
with opacity */

Названия цветов

Система цветопередачи RGB

Этот алгоритм оттенков выстраивается на 3 основных цветах:

• R (red) – красный;
• G (green) – зеленый;
• B (blue) – голубой.

Цвета по этой схеме получаются при смешении с черным. При полном совпадении друг с другом образуют белый цвет. При использовании черного и смешения красного с зеленым получается малиновый, зеленого с голубым – желтый и т. п. Считается, что именно цветовая палитра RGB наиболее насыщенная (имеет более широкий диапазон оттенков) и подходит для печати фотографий, изображений макросъемки. Работающие с графическим редактором, хорошо знают, что при переводе из RGB в цветовую модель CMYK изображение тускнеет.

Однако большинство печатных машин не работают с RGB. Эту цветовую модель используют в струйной печати. То есть RGB применяют при производстве фотографий, а также сублимационной печати на тканях.