Html цвета

Золотая природа

Протиста

Золотая водоросль или золотистые большая группа из страменопилы водорослей , в основном в пресной воде.

• Золотой бамбук ( Phyllostachys aurea ) — это вид бамбука.
• Золотой мак и золотарник популярные цветы возделывать в садоводстве .
• Yukon Gold картофеля является разновидностью картофеля узнаваем по его гладких глаз и золотой интерьер.

• Золотые гапалемуры ( Hapalemur стафилококк ) является средними гапалемурами эндемичным для юго — востока Мадагаскара.
• Беркут является Северное полушарие хищных птиц .
• Золотая рыбка была одна из самых ранних рыб быть одомашнены, и еще один из наиболее часто держали аквариумных рыб и воды сада рыбы.
• Золотистый ретривер является средними породами собак , что является одним из самых популярных домашних животных .
• Золотая жаба была амфибия , который раньше жил в Коста — Рике , который сейчас вымерли .

Сочетания цветов с #fff

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

Toggle
убрать описание сочетаний цветов

Дополнительные цвета #fff ?

Сочетание комплементарных цветов создаётся из основного цвета #fff и противоположного #ffffff , согласно цветового круга. Комплементарные цвета способны усиливать интенсивность друг друга.

Близкие цвета #fff ?

Аналогичные цвета родственны выбранному цвету #fff , на цветовом круге расположены в непосредственной близости. Очень часто гармония близких цветов встречается в архитектуре, гардеробе, интерьере.

Треугольник цвета #fff ?

Из многоугольников выделяется треугольная схема своей динамичностью, насыщенностью и контрастом. Все три цвета очень гармоничны как между собой, так и в парах: #fff + #ffffff и #fff + #ffffff .

Квадратное сочетание цветов #fff ?

В квадратной гармонии четыре цвета равноудалены друг от друга

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

Раздельно-комплементарная цветовая гармония #fff ?

Разделённая цветовая схема (расщеплённый дополнительный цвет, split complementary) состоит из трёх цветов: одного основного #fff и двух дополнительных. За счёт двух почти противоположных цветов образуется гибкость и изящность гармонии, сохраняя высокую контрастность.

Монохромное сочетание #fff ?

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

Геометрическое представление

Цветовая модель RGB, сопоставленная с кубом. Горизонтальная ось X показывает, как красные значения увеличиваются влево, ось Y показывает, как синий увеличивается вправо, а вертикальная ось Z показывает, как зеленый цвет увеличивается кверху. Начало координат, черный — это вершина, скрытая от глаз.

См. Также цветовое пространство RGB

Поскольку цвета обычно определяются тремя компонентами не только в модели RGB, но и в других цветовых моделях, таких как CIELAB и Y’UV , среди прочих, то трехмерный объем описывается путем обработки значений компонентов как обычных декартовых координат. в евклидовом пространстве . Для модели RGB это представлено кубом, использующим неотрицательные значения в диапазоне 0–1, с назначением черного цвета исходной точке в вершине (0, 0, 0) и с увеличивающимися значениями интенсивности, проходящими по трем осям вверх. до белого в вершине (1, 1, 1), по диагонали напротив черного.

Триплет RGB ( r , g , b ) представляет трехмерную координату точки данного цвета внутри куба или его граней или вдоль его краев. Этот подход позволяет вычислять цветовое сходство двух заданных цветов RGB, просто вычисляя расстояние между ними: чем короче расстояние, тем выше сходство. Out-of цветовой гаммы вычисления также могут быть выполнены таким образом.

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

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

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

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

Имена цветов, отсортированные по цветным группам

Все современные браузеры поддерживают следующие 140 цветовых имен (нажмите на название цвета, или шестнадцатеричное значение, чтобы увидеть цвет как фон-цвет вместе с различными цветами текста):

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

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); } /* полностью прозрачный */

LAB

Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.

HEX в RGB
HEX в RGBA
HEX в RGB(%)
HEX в RGBA(%)
HEX в HSL
HEX в HSLA
HEX в CMYK
HEX в HSB/HSV
HEX в XYZ
HEX в LAB
RGB в HEX
RGB в RGBA
RGB в RGB(%)
RGB в RGBA(%)
RGB в HSL
RGB в HSLA
RGB в CMYK
RGB в HSB/HSV
RGB в XYZ
RGB в LAB
RGBA в HEX
RGBA в RGB
RGBA в RGB(%)
RGBA в RGBA(%)
RGBA в HSL
RGBA в HSLA
RGBA в CMYK
RGBA в HSB/HSV
RGBA в XYZ
RGBA в LAB
RGB(%) в HEX
RGB(%) в RGB
RGB(%) в RGBA
RGB(%) в RGBA(%)
RGB(%) в HSL
RGB(%) в HSLA
RGB(%) в CMYK
RGB(%) в HSB/HSV
RGB(%) в XYZ
RGB(%) в LAB
RGBA(%) в HEX
RGBA(%) в RGB
RGBA(%) в RGBA
RGBA(%) в RGB(%)
RGBA(%) в HSL
RGBA(%) в HSLA
RGBA(%) в CMYK
RGBA(%) в HSB/HSV
RGBA(%) в XYZ
RGBA(%) в LAB
HSL в HEX
HSL в RGB
HSL в RGBA
HSL в RGB(%)
HSL в RGBA(%)
HSL в HSLA
HSL в CMYK
HSL в HSB/HSV
HSL в XYZ
HSL в LAB
HSLA в HEX
HSLA в RGB
HSLA в RGBA
HSLA в RGB(%)
HSLA в RGBA(%)
HSLA в HSL
HSLA в CMYK
HSLA в HSB/HSV
HSLA в XYZ
HSLA в LAB
CMYK в HEX
CMYK в RGB
CMYK в RGBA
CMYK в RGB(%)
CMYK в RGBA(%)
CMYK в HSL
CMYK в HSLA
CMYK в HSB/HSV
CMYK в XYZ
CMYK в LAB
HSB/HSV в HEX
HSB/HSV в RGB
HSB/HSV в RGBA
HSB/HSV в RGB(%)
HSB/HSV в RGBA(%)
HSB/HSV в HSL
HSB/HSV в HSLA
HSB/HSV в CMYK
HSB/HSV в XYZ
HSB/HSV в LAB
XYZ в HEX
XYZ в RGB
XYZ в RGBA
XYZ в RGB(%)
XYZ в RGBA(%)
XYZ в HSL
XYZ в HSLA
XYZ в CMYK
XYZ в HSB/HSV
XYZ в LAB
LAB в HEX
LAB в RGB
LAB в RGBA
LAB в RGB(%)
LAB в RGBA(%)
LAB в HSL
LAB в HSLA
LAB в CMYK
LAB в HSB/HSV
LAB в XYZ

Переход из одной системы в другую

Главная трудность при переходе из системы RGB в CMYK заключается в том, что на бумаге (в системе CMYK) не могут быть представлены некоторые цвета, которые с лёгкостью можно представить на экране. Если на экране запросто можно сделать оттенок цвета с точностью до бита (#CF8E12), то в смешивании красителей (при их неидеальном качестве) такой точности добиться просто невозможно. Поэтому часто то, что на экране выглядит ошеломляюще, на бумаге выглядит блекло и некрасиво.

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

Если вы создаёте изображение только для просмотра на экране (то, что мы имеем в случае Web-дизайна), и которое не планируется представлять в цвете на бумаге, забудьте о схеме CMYK, работайте в схеме RGB и не морочьте себе голову.

Photoshop — программа изначально предназначенная для полиграфии — обработки изображений и подготовки их для печати. Потому она укомплектована полным набором средств: от CMYK схемы до подпрограммы разделения цветов. Для Web-дизайнера эти функции Photoshop-а — мёртвый груз

Поэтому, несмотря на все достоинства и мощь Photoshop-а, стоит обратить внимание и на другие графические программы, которые специально заточены для создания «экранных» изображений или конкретно под Web. Они легче, так как не несут лишних полиграфических функций, либо вместо них укомплектованы дополнительными вкусностями, облегчающими жизнь Web-мастеру/Web-дизайнеру

Несовершенство цветовых моделей

Модели Lab, HSB, RGB и CMYK — основные, с которыми сталкиваются дизайнеры, иллюстраторы и фотографы. Они упрощают работу, но реальная цветопередача не так предсказуема. Например, RGB и CMYK, с которыми работают чаще всего, — это аппаратно-зависимые модели.

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

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

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

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

RGBA

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 уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.

Цветовая модель СMYK — так получают цвет из красок

Эта модель построена на смешении четырёх типографских красок: Cyan (сине-зелёный), Magenta (пурпурный), Yellow (жёлтый) и Key («ключевой» цвет — чёрный). Диапазон цветов на печати гораздо более узкий, чем на современных мониторах компьютеров. Модель СMYK позволяет увидеть на электронных устройствах, как изменятся цвета на бумаге.

В модели CMYK каждый цвет кодируется четырьмя координатами, значения которых могут быть от 0 до 100%. Разные оттенки получаются из-за разных соотношений голубого, розового, жёлтого и черного цвета в их составе. Белый цвет в модели CMYK — это отсутствие краски.

Так выглядит любая напечатанная картинка при большом увеличении:

Новые цвета получаются путём наложения трёх основных друг на друга в разных пропорциях

Согласно идеальной модели, розовый, голубой и жёлтый на печати в сумме дают чёрный. Для чего тогда требуется четвёртая чёрная краска? Есть несколько причин:

• Красители, созданные с помощью химических веществ, не идеальны. На практике смешение трёх красок обычно даёт грязно-коричневый цвет.
• Цветные краски дороже. Например, если нам нужен тёмно-красный цвет, можно составить его из красного, синего и зелёного, а можно — из красного и чёрного. Второй вариант обойдётся дешевле при печати.
• У бумаги ограничена впитывающая способность. Чтобы получить максимально близкий к чёрному цвет, используя голубой, розовый и жёлтый, на лист нанесут 300% краски — газетная бумага такого не выдержит. А чистый чёрный цвет — это всего лишь 100% процентов краски.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

Практическое задание № 11.

Нюанс: для выполнения задания вы можете задавать цвет любым методом, но задание считается выполненным если хотя бы один раз было использовано шестнадцатеричное значение, значение RGB, значение HSL и предопределённый цвет.

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

Стили

Таблицы

RGB-схемы

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

6 уровней RGB

красный	# 000000	# 330000	# 660000	# 990000	# CC0000	# FF0000
Зеленый	# 000000	# 003300	# 006600	# 009900	# 00CC00	# 00FF00
Синий	# 000000	# 000033	# 000066	# 000099	# 0000CC	# 0000FF

Имея шесть уровней для каждой начальной школы, с 6³ = 216 комбинациями. Индекс может быть адресован как (36 × R) + (6 × G) + B, со всеми значениями R, G и B в диапазоне от 0 до 5. Задуманный как однородный куб RGB, он дает шесть истинно серых оттенков. Кроме того, есть место для еще 40 цветов, поэтому операционные системы или программы могут добавлять дополнительные цвета.

Системы, которые используют эту палитру программного обеспечения:

• Веб-палитра
• Палитра по умолчанию для Apple Macintosh 256 цветов. Он также содержит четыре градиента по десять оттенков для серого, красного, зеленого и синего цветов.

6-7-6 уровней RGB

красный	# 000000	# 330000	# 660000	# 990000	# CC0000	# FF0000
Зеленый	# 000000	# 002A00	# 005500	# 008000	# 00AA00	# 00D400	# 00FF00
Синий	# 000000	# 000033	# 000066	# 000099	# 0000CC	# 0000FF

Эта палитра состоит из шести уровней для красных и синих основных цветов и семи уровней для основных зеленых цветов, что дает 6 × 7 × 6 = 252 комбинации. Индекс может быть адресован как (42 × R) + (6 × G) + B, со значениями R и B в диапазоне от 0 до 5 и G в диапазоне от 0 до 6. Тот же случай, что и первый, но с добавленным уровнем зеленого из-за большей чувствительности нормального человеческого глаза к этой частоте.

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

6-8-5 уровней RGB

красный	# 000000	# 330000	# 660000	# 990000	# CC0000	# FF0000
Зеленый	# 000000	# 002400	# 004900	# 006D00	# 009200	# 00B600	# 00DB00	# 00FF00
Синий	# 000000	# 000040	# 000080	# 0000BF	# 0000FF

Эта палитра состоит из шести уровней для красного, восьми уровней для зеленого и пяти уровней для синих основных цветов, что дает 6 × 8 × 5 = 240 комбинаций. Индекс может быть адресован как (40 × R) + (5 × G) + B, где R находится в диапазоне от 0 до 5, G от 0 до 7 и B от 0 до 4. Уровни выбираются в зависимости от чувствительности нормального человеческий глаз к каждому основному цвету.

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

8-8-4 уровней RGB

красный	# 000000	# 240000	# 490000	# 6D0000	# 920000	# B60000	# DB0000	# FF0000
Зеленый	# 000000	# 002400	# 004900	# 006D00	# 009200	# 00B600	# 00DB00	# 00FF00
Синий	# 000000	# 000055	# 0000AA	# 0000FF

RGB уровня 8-8-4 использует восемь уровней для каждого из компонентов красного и зеленого цвета (3 + 3 бита старшего разряда) и четыре уровня (2 бита младшего разряда) для синего компонента из-за меньшей чувствительности нормальный человеческий глаз к этому основному цвету. В результате получается палитра 8 × 8 × 4 = 256 цветов, как показано ниже:

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

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

Как уже было сказано ранее, RGB цвета формируются путем смешивания основных. Для описания интенсивности каждого из них приняли схему, в которой цвет представляется диапазоном 0-255 (8 бит), что в шестнадцатеричной системе исчисления соответствует 00-FF.

То есть, основные цвета будут иметь следующий вид:

• Красный – RGB(255,0,0);
• Зеленый – RGB(0,255,0);
• Синий – RGB(0,0,255);

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

Таблицы цветов RGB

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

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

Безопасная палитра RGB цветов

Однако в какой-то момент существовала проблема отображения цветов в различных браузерах, и для ее решения была скомпонована так называемая «безопасная» палитра RGB цветов, которые были выведены математическими вычислениями.

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

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

Золотой цвет в RGB модели

Впервые слово «золотой», было использовано в начале XIV века для описания цвета химического элемента под названием Aurum – золото. В модели RGB золотой цвет представлен следующими числовыми значениями:

• RGB (255, 215, 0) – десятеричная система;
• HEX #FFD700 – шестнадцатеричная система.

Бежевый цвет в RGB модели

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

• RGB (245, 245, 220) – десятеричная система;
• HEX #F5F5DC – шестнадцатеричная система.

скучный

Система CMYK

Бумага является изначально белой. Это означает, что она обладает способностью отражать весь спектр цветов света, который на неё попадает. Чем качественнее бумага, чем лучше она отражает все цвета, тем она нам кажется белее. Чем хуже бумага, чем больше в ней примесей и меньше белил, тем хуже она отражает цвета, и мы считаем её серой. Сравните качество бумаги журнала «Плейбой» и газеты «Конотопский вестник», и почувствуйте разницу.

Противоположный пример — асфальт. Только что положенный хороший асфальт (без примесей гальки) — идеально чёрный. То есть на самом деле цвет его нам не известен, но он таков, что поглощает все цвета света, который на него падает и потому он нам кажется чёрным. Со временем, когда по асфальту начинают ходить пешеходы или ездить машины, он становится «грязным» — то есть на его поверхность попадают вещества, которые начинают отражать видимый свет (песок, пыль, галька). Асфальт перестаёт быть чёрным и становится «серым». Если бы нам удалось «отмыть» асфальт от грязи — он снова стал бы чёрным.

Красители представляют собой вещества, которые поглощают определённый цвет. Если краситель поглощает все цвета кроме красного, то при солнечном свете, мы увидим «красный» краситель и будем считать его «красной краской». Если мы посмотрим на это краситель при свете синей лампы, он станет чёрным, и мы ошибочно примем его за «чёрную краску».

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

Соответственно, существуют комбинации цветов, смешивая которые мы можем полностью поглотить все цвета, отражаемые бумагой, и сделать её чёрной. Опытным путём была выведена комбинация «циан-маджента-жёлтый» (CMY) — cyan/magenta/yellow.

В идеале, смешивая эти цвета, мы должны были бы получить чёрный цвет. Однако на практике так не получается из-за технических качеств красителя. В лучшем случае, что мы можем получить, — это темно-бурый цвет, который лишь отдалённо напоминает чёрный. Более того весьма неразумно было бы использовать все три дорогие краски только для того, чтобы получить элементарный чёрный цвет. Поэтому в тех местах, где нужен чёрный, вместо комбинации трёх красок наносится обычный более дешёвый чёрный краситель. И потому к комбинации CMY обычно добавляется буква K (Key — «ключевой», или blacK) — обозначающая чёрный цвет.

Белый цвет в схеме отсутствует, так как его мы и так имеем — это цвет бумаги. В тех местах, где нужен белый цвет, краска просто не наносится. Значит отсутствие цвета в схеме CMYK соответствует белому цвету.

Эта система цветов называется субтрактивной (subtractive), что в грубом переводе означает «вычитающая/исключающая». Иными словами, мы берём белый цвет (присутствие всех цветов) и, нанося и смешивая краски, удаляем из белого определённые цвета вплоть до полного удаления всех цветов — то есть получаем чёрный.

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

HSL цвета

К еще одному методу задания цвета относится HSL. HSL это аббревиатура, которая объединяет в себе первые буквы трех признаков:

• Hue — тон.
• Saturation — насыщенность.
• Lightness — осветленность.

При этом используется следующий синтаксис:

hsl(от 0° до 360°, от до 100%, от 0% до 100%), где:

Первое значение – это тон, который указывается в градусах от 0° до 360°. Градусы соответствуют цвету на круге оттенков, изображенном ниже:

Красный цвет соответствует значениям — 0° и 360°, желтый — 60°, зеленый — 120°, голубой — 180°, синий — 240°, фиолетовый — 300° и т. д.

Второе значение (насыщенность) — определяет, насколько чистым является цвет и указывается в процентах от 0% до 100%, где 0% — полное отсутствие насыщенности (тусклый серый), 100% — чистый и яркий цвет.

Третье значение (осветленность) — указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.

Например:

<p style = color: hsl(0,100%,50%)">Я абзац красного цвета</p> <!-- задаем цвет текста значением hsl --> 

Ниже приведено изображение, где для каждого блока задано свое значение hsl:

Рис. 16б Пример использования значений hsl

Способы использования RGB

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

Для сравнения, CMYK, что означает «Cyan Magenta Yellow Key (Black)» и является производным от CMY, является отражающей цветовой моделью, означающей, что его цвета отражаются, а не освещаются, и используются в основном в печати. Вот почему при калибровке принтера вы работаете с цветовым пространством CMY, а при калибровке дисплея компьютера — с RGB.

Принтеры используют цветовую модель CMYK

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

Например, ЖК-экраны состоят из множества пикселей, которые образуют их поверхность. Каждый из этих пикселей обычно состоит из трех разных источников света, и каждый из них может стать красным, зеленым или синим. Если вы внимательно посмотрите на ЖК-экран, используя увеличительное стекло, вы увидите эти маленькие источники света, которые образуют пиксели.

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

Источники RGB пикселей на экране

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

Однако диапазоны трех чисел могут различаться в зависимости от того, какую систему исчисления вы используете. Стандартные нотации RGB могут использовать тройки значений от 0 до 255, некоторые могут использовать арифметические значения от 0,0 до 1,0, а некоторые могут использовать процентные значения от 0% до 100%.

Например, если цвета RGB представлены 8 битами каждый, это будет означать, что диапазон каждого цвета может изменяться от 0 до 255, 0 — самая низкая интенсивность цвета, а 255 — самая высокая. Используя эту систему обозначений, RGB (0, 0, 0) будет означать черный, а RGB (255, 255, 255) будет означать белый. Кроме того, самый чистый красный будет RGB (255, 0, 0), самый чистый зеленый будет RGB (0, 255, 0), а самый чистый синий будет RGB (0, 0, 255).

Представление цветов RGB в 8-битной системе, каждый цвет в диапазоне от 0 до 255

Диапазон чисел от 0 до 255 выбран не случайно: RGB часто представлен в программном обеспечении 8-битами на канал. Если вам интересно, почему 255 является максимальным значением в 8-битной исчислении, так это потому, что каждый цвет в нем представлен 8 битами. Бит может иметь два значения: 0 или 1. Два бита, будут иметь четыре значения: 00, 01, 10, 11. (в двоичной системе.) Таким образом, восемь битов, дадут 256 значений — от 0 до 255. То есть, два в восьмой степени. Гики, верно?

Однако обычно используются и другие системы исчисления, такие как 16-бит на канал или 24-бит на канал. Например, в 16-битной системе, каждый бит может принимать значения от 0 до 65535, а в 24-битной системе — от 0 до 16777215. 24-битная система охватывает 16 миллионов цветов, что больше, чем все цвета, которые видны человеческому глазу, который различает 10 миллионов.

Цветовая модель HEX

Кодирование цвета в формате HEX — это, по сути, шестнадцатеричное представление рассмотренной выше модели RGB.

Все коды цветов этой модели представляются в комбинированном виде из триады цифр в шестнадцатеричной системе счисления, в которой каждая из трёх групп отвечает за свой составляющий цвет. Длина группы фиксированная – 2 символа. Такой подход позволяет всё так же указать 256 состояний нужного цветового коэффициента. Значения каждого из групп коэффициентов должны быть между 00 и FF.

Для браузеров возможна и упрощённая форма записи цвета в HEX-формате, где указываются всего три символа кода вместо 6. В таком случае, подразумевается что каждая из трёх групп состоит из одинаковых символов. Например, AAFF11, можно сократить до AF1.

Примеры передачи цвета в WEB при помощи HEX-модели для CSS-стилей элементов:

Помимо указанных особенностей, HEX-модель поддерживает и alpha-канал для управления прозрачностью, в таком случае добавляется четвертый коэффициента в диапазоне от 00 и FF (256 значений). В таком случае использование сокращённой формы записи уже недопустимо.

Пример передачи цвета в WEB при помощи HEXA-модели для CSS-стилей элементов: