Rgb 240 40 какой цвет. Учeбник HTML. Цвета RGB. Цвета безопасной палитры. Пример: Задание цвета с помощью RGB

при момощи атрибута 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 - полупрозрачности в различной степени.

Пример кода.

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

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

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

Значение альфа канала равное нолю делает любой цвет невидимым - абсолютно прозрачным, значение равное единице транслирует цвет в 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). Для наглядности сведём это в таблицу:

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

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

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

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

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

Рис.1. Цвета в RGB.

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

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

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

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

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

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

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

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

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

Рисунок 2. Цветовой круг HSL.

Второе значение - насыщенность (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.

В web-дизайне существует несколько способов представления цвета

HEX – шестнадцатеричная система представления цвета по основанию 16. Для данной системы используются арабские десятичные цифры от 0 до 9 и латинские буквы от A до F для дополнения цифрового количества до 16. Для web-дизайна взяты 16 основных (ключевых) цветов, так называемый шестнадцатеричный код цвета #RRGGBB, где каждая пара отвечает за свою долю цвета: RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.

Два других представления цвета в web-дизайне это: в виде RGB(*,*,*), где каждая «*» доля цвета представлена десятичными цифрами от 0 до 255 и по наименованиям цвета на английском языке.

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

Таблица 16 основных цветов , которые используются во всех браузерах

Название	Цвет	Hex	(RGB)
Aqua (морская волна)		#00FFFF	(000,255,255)
Black (черный)		#000000	(000,000,000)
Blue (голубой)		#0000FF	(000,000,255)
Fuchsia (фуксин)		#FF00FF	(255,000,255)
Gray (серый)		#808080	(128,128,128)
Green (зеленый)		#008000	(000,128,000)
Lime (ярко-зеленый)		#00FF00	(000,255,000)
Maroon (темно-бордовый)		#800000	(128,000,000)
Navy (темно-синий)		#000080	(000,000,128)
Olive (оливковый)		#808000	(128,128,000)
Purple (фиолетовый)		#800080	(128,000,128)
Red (красный)		#FF0000	(255,000,000)
Silver (серебряный)		#C0C0C0	(192,192,192)
Teal (серо-зеленый)		#008080	(000,128,128)
White (белый)		#FFFFFF	(255,255,255)
Yellow (желтый)		#FFFF00	(255,255,000)

Таблица пурпурного цвета и его оттенков

Название	Цвет	Hex	(RGB)
Magenta (пурпурный)		#FFCBDB	(255,203,219)
Magenta (пурпурный)		#FF0099	(255,000,153)
Magenta (маджента)		#F95A61	(249,090,097)
Fuchsia (фуксия)		#FF00FF	(255,000,255)
Мовеин (анилиновый пурпур)		#EF0097	(239,000,151)
Salmon pink (оранжево розовый)		#FF91A4	(255,145,164)
Cenise (оттенок пурпурного)		#DE3163	(153,149,140)
Aubergine Eggplant (баклажановый)		#990066	(153,000,132)
Lavender blush (розовато-лавандовый)		#FFF0F5	(255,240,245)
Lilac (сиреневый)		#C8A2C8	(200,162,200)
Magenta (маджента)		#FF008F	(255,000,143)
Orchid (орхидея)		#DA70D6	(218,112,214)
Red-violet (фиолетово-красный)		#C71585	(199,021,133)
Sanguine (сангиновый)		#92000A	(146,000,010)
Thistle (оттенок пурпурного)		#D8BFD8	(185,211,238)
Violet-eggplant (оттенок пурпурного)		#991199	(153,017,153)
Rosa vivo (насыщено розовый)		#FF007F	(255,000,127)
Lavender-rose (оттенок пурпурного)		#FBA0E3	(108,123,139)
Mountbatten pink (розовый Маунбаттена)		#997ABD	(153,122,141)

Таблица серого цвета и его оттенков

Название	Цвет	Hex	(RGB)
Gray (Серый)		#808080	(128,128,128)
Gray (Серый)		#bebebe	(190,190,190)
(Серый-оттенок)		#858585	(133,133,133)
Gray33 (Серый-33)		#545454	(084,084,084)
(Серого шифера)		#708090	(112,128,144)
(Кварцевый)		#99958с	(153,149,140)
(Светло-серый)		#bbbbbb	(187,187,187)
(Серебристый)		#c0c0c0	(192,192,192)
(Серо-белый)		#f0f0f0	(240,240,240)
(Бороды Абдель-Керима)		#e0e0e0	(224,224,224)
LightGray (Серый светлый)		#d3d3d3	(211,211,211)
LightStateGray ()		#778899	(119,136,153)
StateGray-1 (Бледно-васильковый1)		#c6e2ff	(198,226,255)
StateGray-2 (Бледно-васильковый2)		#b9d3ee	(185,211,238)
StateGray3 ()		#9fb6cd	(159,182,205)
StateGray4 ()		#6c7b8b	(108,123,139)

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 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+

Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb , а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).

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

HSL

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% соответствуют чёрному и белому цвету.

HSLA

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.

Рис. 2. Цвета на веб-странице