Html rgb

Справка по цветовым моделям

Далее приводится краткое описание цветовых систем с которыми работает конвертер, разъяснение по форматам, а также примеры использования полученных цветов в CSS/HTML.

HEX / HTML

Цвет в формате HEX — это ни что иное, как шестнадцатеричное представление RGB.

Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 — красный, 22 — зелёный, 33 — синий. Все значения должны быть между 00 и FF.

Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.

1. h1 { color: #ff0000; } /* красный */
2. h2 { color: #00ff00; } /* зелёный */
3. h3 { color: #0000ff; } /* синий */
4. h4 { color: #00f; } /* тот же синий, сокращённая запись */

RGB

Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.

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

Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).

1. h1 { color: rgb(255, 0, 0); } /* красный */
2. h2 { color: rgb(0, 255, 0); } /* зелёный */
3. h3 { color: rgb(0, 0, 255); } /* синий */
4. h4 { color: rgb(0%, 0%, 100%); } /* тот же синий, процентная запись */

Цветовые значения RGB поддерживаются во всех основных браузерах.

RGBA

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

Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

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

RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.

HSL

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

HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).

Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).

1. h1 { color: hsl(120, 100%, 50%); } /* зелёный */
2. h2 { color: hsl(120, 100%, 75%); } /* светло-зелёный */
3. h3 { color: hsl(120, 100%, 25%); } /* тёмно-зелёный */
4. h4 { color: hsl(120, 60%, 70%); } /* пастельный зеленый */

HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.

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

CMYK

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

Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).

Каждое из чисел, определяющее цвет в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию, а точнее, размер точки растра, выводимой на фотонаборном аппарате на плёнке данного цвета (или прямо на печатной форме в случае с CTP).

Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 — жёлтой краски, и 46 — чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).

HSB / HSV

HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.

HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).

Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).

XYZ

Цветовая модель XYZ (CIE 1931 XYZ) является чисто математическим пространством. В отличие от RGB, CMYK, и других моделей, в XYZ основные компоненты являются «мнимыми», то есть вы не можете соотнести X, Y, и Z с каким-либо набором цветов для смешивания. XYZ является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.

colorscheme.ru

В HTML существуют несколько основных способов представления цветов:

1. В виде #112233.
   Представление в виде трёх пар шестнадцатеричных цифр (Hex triplet), где каждая пара отвечает за свой цвет:
   две первые цифры — красный (00 — FF)
   две в середине — зелёный (00 — FF)
   две последние цифры — синий (00 — FF)

   Возможно также краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.

   Символа # обозначает знак «числа».

   
   
2. Представление ключевыми словами, например green, black.
   Во избежание случаев, когда указанное ключевое слово «не понимается» браузером, следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах.

3. В виде rgb(*,*,*),
   где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета
   (красный — Red, зелёный — Green , синий — Blue).

4. В виде rgba(*,*,*,*),
   где первые 3 «*» — компоненты цвета, задающиеся в диапазоне 0 до 255,
   а последняя «*» — уровень непрозрачности (альфа-канал), задающийся дробными числами от 0 до 1.

 

Вариант 1.

<html>
<body color=#0000FF>
      1) Данный текст, как и весь остальной текст на всей странице, будет отображаться синим цветом.
</body>
<html>

Вариант 2. (тотже цвет синий)

<html>
<body color=Blue>
      2) Данный текст, как и весь остальной текст на всей странице, будет отображаться синим цветом.
</body>
<html>

Вариант 3. (тотже цвет синий)

<html>
<body color=rgb(0,0,255)>
      3) Данный текст, как и весь остальной текст на всей странице, будет отображаться синим цветом.
</body>
<html>

Вариант 4. (тотже цвет синий, но полупрозрачный)

<html>
<body color=rgba(0,0,255,0.5)>
      4) Данный текст, как и весь остальной текст на всей странице, будет отображаться полупрозрачным синим цветом.
</body>
<html>

u4ilka.kcbux.ru

Задание цвета по названию

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

Табл. 1. Названия цветов, их RGB, HEX и HSL код.

Имя	Цвет	RGB	HEX	HSL	Описание
white		rgb(255, 255, 255)	#ffffff или #fff	hsl(0, 0%, 100%)	Белый
silver		rgb(192, 192, 192)	#c0c0c0	hsl(0, 0%, 75%)	Серый
gray		rgb(128, 128, 128)	#808080	hsl(0, 0%, 50%)	Темно-серый
black		rgb(0, 0, 0)	#000000 или #000	hsl(0, 0%, 0%)	Черный
maroon		rgb(128, 0, 0)	#800000	hsl(0, 100%, 25%)	Темно-красный
red		rgb(255, 0, 0)	#ff0000 или #f00	hsl(0, 100%, 50%)	Красный
orange		rgb(255, 165, 0)	#ffa500	hsl(38.8, 100%, 50%)	Оранжевый
yellow		rgb(255, 255, 0)	#ffff00 или #ff0	hsl(60, 100%, 50%)	Желтый
olive		rgb(128, 128, 0)	#808000	hsl(60, 100%, 25%)	Оливковый
lime		rgb(0, 255, 0)	#00ff00 или #0f0	hsl(120, 100%, 50%)	Светло-зеленый
green		rgb(0, 128, 0)	#008000	hsl(120, 100%, 25%)	Зеленый
aqua		rgb(0, 255, 255)	#00ffff или #0ff	hsl(180, 100%, 50%)	Голубой
blue		rgb(0, 0, 255)	#0000ff или #00f	hsl(240, 100%, 50%)	Синий
navy		rgb(0,0,128)	#000080	hsl(240, 100%, 25%)	Темно-синий
teal		rgb(0, 128, 128)	#008080	hsl(180, 100%, 25%)	Сине-зеленый
fuchsia		rgb(255, 0, 255)	#ff00ff или #f0f	hsl(300, 100%, 50%)	Розовый
purple		rgb(128, 0, 128)	#800080	hsl(300, 100%, 25%)	Фиолетовый

Первоночально в стандартах W3C использовались лишь эти 16 ключевых слов для задания цветов. Позже в стандарты было добавлено ещё 130 цветов, полный их список смотрите тут: таблица цветов CSS.

Это образец использования имен цветов, навзания цветов взяты из расширеной таблицы.

 

 <!DOCTYPE html> <html> <head> 	<title>RGB в CSS</title> 	<style> 		div.colorname {	/* создаём класс colorname только для тега div */ 			display: inline-block; 			width: 40px; 			height: 40px; 		} 	</style> </head> <body>  <div style="background: MediumTurquoise;" class="colorname">MediumTurquoise</div> <div style="background: brown;" class="colorname">brown</div> <div style="background: crimson;" class="colorname">crimson</div> <div style="background: blueviolet;" class="colorname">blueviolet</div> <div style="background: olivedrab;" class="colorname">rolivedrab</div>  </body> </html>

Вот как работает этот код:

Установка цвета с помощью RGB

RGB — аддитивная цветовая модель. На английском языке addition — добавление. RGB — это аббревиатура английских слов: Red, Green, Blue — красный, зелёный, синий). Из этого понятно что в модели RGB цвета синтезируются путём добавления трёх цветов (красного, зелёного, синего) в различных количествах.

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

Ближе к делу.

Для установки свойств в этом формате используется запись rgb(r, g, b), где r, g, b — это три канала для каждого цвета (red, green, blue). Значения для каждого канала задаются в диапазоне от 0 до 255.

Пример кода.

Чтобы всё стало понятно, приведу пример кода:

 

 <!DOCTYPE html> <html> <head> 	<title>RGB в CSS</title> 	<style> 		div.rgb {	/* создаём класс rgb только для тега div */ 			width: 240px; 			height: 40px; 			line-height: 40px; 			text-align: center; 		} </style> </head> <body>  <div style="background: rgb(255, 0, 0);" class="rgb">rgb(255, 0, 0)</div> <div style="background: rgb(0, 255, 0);" class="rgb">rgb(0, 255, 0)</div> <div style="background: rgb(0, 0, 255);" class="rgb">rgb(0, 0, 255)</div>  </body> </html>

Вот так должен сработать этот пример:

Пояснения к примеру.

В начале страницы создаём класс div.rgb, он нужен чтобы блоки созданные тегом <div> отображались нужным размером: 240px на 40px. Свойству line-height (высота строки) присваиваем значение — 40px, то есть равное высоте блока, это позволит отображать текст в блоке <div> по центру вертикали. по горизонтали текст центрируем при помощи правила {text-align: center;}.

Далее, в коде устанавливаем фоновый цвет блока <div> при момощи атрибута style успользуя свойство background, а значения присваиваем rgb(255, 0, 0), rgb(0, 255, 0), и rgb(0, 0, 255). То есть, мы поочерёдно делаем один канал максимально насыщенным, а остальные каналы не используются для синтеза, так как их значение равно нолю.

Попробуйте отредактировать этот пример и указать свои значения, например rgb(100, 100, 100).

Установка цвета с помощью RGBA

В CSS3 появился новый инструмент для работы с цветом — формат RGBA. Его можно назвать развитием модели RGB, но с добавлением одного нового канала — A или альфа-канала. Этот канал устанавливает прозрачность цвета. Его значения задаются в диапазоне от 0 до 1. Значение равное 0 соответствует полной прозрачности, 1 — полной непрозрачности (цвет будет таким, каким он задан в первых трёх каналах RGB), а промежуточные значения, как 0.4 или 0.6 — полупрозрачности в различной степени.

Пример кода.

<!DOCTYPE html> <html> <head> 	<title>RGBA в CSS3</title> 	<style> 		div.rgba { 			display: inline-block; 			width: 40px; 			height: 40px; 		} </style> </head> <body>  <div style="background-color: rgba(255,0,0,0.2);" class="rgba"></div> <div style="background-color: rgba(255,0,0,0.4);" class="rgba"></div> <div style="background-color: rgba(255,0,0,0.6);" class="rgba"></div> <div style="background-color: rgba(255,0,0,0.8);" class="rgba"></div> <div style="background-color: rgba(255,0,0,1.0);" class="rgba"></div>  </body> </html>

Вот как он сработает:

Этот код по своему визуальному представлению аналогичен следующему, использующему модель RGB для задания значения цвета:

<!DOCTYPE html> <html> <head> 	<title>RGBA в CSS3</title> 	<style> 		div.rgb { 			display: inline-block; 			width: 40px; 			height: 40px; 		} 	</style> </head> <body>  <div style="background-color: rgb(243, 191, 189);" class="rgb"></div> <div style="background-color: rgb(246, 143, 142);" class="rgb"></div> <div style="background-color: rgb(249, 95 , 94);" class="rgb"></div> <div style="background-color: rgb(252, 47, 47);" class="rgb"></div> <div style="background-color: rgb(255, 0, 0);" class="rgb"></div>  </body> </html>

Вот его результат:

Значение альфа канала равное нолю делает любой цвет невидимым — абсолютно прозрачным, значение равное единице транслирует цвет в RGB-коде без изменений. Свойство rgba(255,0,0,1.0) показывает красный цвет rgb(255, 0, 0).

По шестнадцатеричному значению (HEX-код)

В повсежневной жизни мы пользуемся десятичной системой счёта. Её истоки очень просты — у нас десять пальцев на руках, и считать по пальцам в жизни бывало удобно. Если в десятичной системе десять цифр: от 0 до 9, а число 10 — это уже следующий разряд, то в шестнадцатеричная система счисления 16 цифр, а следующим разрядом будет число 16.

Для указания кодов цветов в качестве шестнадцатеричных цифр используются обычные десятичные цифры от 0 до 9 и для обозначения цифр от 10 до 15 используют латинские буквы от A до F то есть (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Для наглядности сведём это в таблицу:

Табл. Десятичные и шестнадцатеричные числа меньше 16

Десятичные	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Шестнадцатеричные	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

Для записи шестнадцатеричных чисел больше F (15 по десятичной системе), как и в десятичной системе, также используют объединение двух цифр, но уже шестнадцатеричных, что очевидно. Так, для записи десятичного числа 255 в шестнадцатеричной системе используется запись FF.

Табл. Десятичные и шестнадцатеричные числа больше 16

Десятичные	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31
Шестнадцатеричные	10	11	12	13	14	15	16	17	18	19	1A	1B	1C	1D	1E	1F

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

Чтобы указать цвет в 16-ричной системе, перед числовым значением нужно ставить знак «#», пример: #FFC0CB. Само значение #FFC0CB состоит из трёх шестнадцатеричных цифр FF, C0 и CB. Смысл этой записи такой же, как и установка цвета в формате RGB (rgb(r, g, b)) — каждая шестнадцатиричная цифра в HEX-коде указывает насыщение цвета в своём канале модели RGB.

<!DOCTYPE html> <html> <head> 	<title>HEX код в CSS</title> 	<style> 		div.hex {	/* создаём классс hex только для тега div */ 			width: 240px; 			height: 40px; 			line-height: 40px; 			text-align: center; 		} 	</style> </head> <body>  <div style="background: #FF0000;" class="hex">#FF0000</div> <div style="background: #00FF00;" class="hex">#00FF00</div> <div style="background: #0000FF;" class="hex">#0000FF</div>  </body> </html>

Этот код отобразит следующие элементы:

А вот рисунок с результатом из раздела «Установка цвета с помощью RGB» на этой странице выше.

Мы видим что цвета идентичны.

Допускается сокращенная запись HEX-кода цвета: 6-значное число можно записать как 3-значное. Это допустимо только в случае, когда две цифры в значении цвета одного канала повторяются.

То есть допустимо следующее сокращение записи:

#rrggbb —> #rgb

Например, цвет #ff22aa допустимо написать так — #f2a, или цвет #44aa22 допустимо указать в виде #4a2.

Установка цвета с помощью HSL

В CSS3 появился новый формат для указания цвета.

Формат HSL — это аббревиатура от английских слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).

Оттенок в HSL — это значение цвета на специальном цветовом круге (рисунок 2) и оно задаётся в градусах. Если проводить аналогии с моделью RGB, то 0° соответствует красному, 120° соответствует зелёному, а 240° — синему цвету.

Значение оттенка изменятся в диапазоне от 0 до 359.

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

Третье значение — светлота (Lightness) также задаётся в процентах. Чем выше процент, тем более яркий будет цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, при этом неважно, какой цвет из цветового круга был выбран в первом канале. Оптимальным можно считать значение яркости цвета равное 50%.

Установка цвета с помощью HSLA

Формат HSLA соотносится с HSL, так же как и RGB с RGBA. В формате HSLA, как и в RGBA добавлен альфа-канал отвечающий за прозрачность цвета.

Некоторые итоги и советы

Цвет, заданный в формате HSL, читать более просто. Можно сказать что он интуитивно понятен. Например, код hsl(120,60%,50%) можно представить итоговый цвет, если в памяти есть картинка цветового круга HSL. Про форматы RGB и HEX такого сказать нельзя, код цвета заданный в этих форматах становится понятный только после его визуализации на мониторе.

Новые форматы в CSS3 (HSL, HSLA и RGBA) работают в браузерах начиная с версий: IE 9.0, Opera 10.0 Firefox 3.0. Как сделать так, чтобы стили работали на старых браузерах?

.somebloсk { 	background-color: rgb(255,50,50); 	background-color: rgba(255,50,50,0.85) }

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

komotoz.ru