Rgb 240 40 какъв цвят. 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 модела, но с добавянето на един нов канал - А или алфа канал. Този канал задава прозрачността на цвета. Стойностите му са зададени в диапазона от 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 се използват като шестнадесетични цифри, а латинските букви от A до F се използват за обозначаване на числа от 10 до 15, т.е. (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). За по-голяма яснота, нека поставим това в таблица:

За да напишат шестнадесетични числа, по-големи от F (15 в десетичната система), както в десетичната система, те също използват комбинация от две цифри, но вече шестнадесетични, което е очевидно. По този начин, за да запишете десетичното число 255 в шестнадесетичен запис, използвайте FF нотация.

Шестнадесетичната система е по-разбираема за компютъра и обработва по-бързо стойности, зададени от шестнадесетична стойност.

За да посочите цвят в шестнадесетичен формат, предшествайте цифровата стойност със знак „#“, например: #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 (фонов цвят: rgb(255,50,50); фонов цвят: rgba(255,50,50,0.85) )

Когато използвате този код в по-стари браузъри, фоновият цвят за класа .somebloсk, въпреки че няма да използва алфа канал, ще се показва в RGB формат.

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

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

Две други представяния на цвета в уеб дизайна са: под формата на RGB(*,*,*), където всяка фракция „*“ от цвят е представена с десетични цифри от 0 до 255 и с имена на цветове на английски.

При създаването на цветно изображение основният проблем е правилното възпроизвеждане на цветовете на различни видове компютри, монитори и браузъри. Ако браузърът не може да покаже цвят правилно, той избира подобен или смесва няколко цвята. И понякога може да бъде заменен с някакъв напълно различен цвят.

Таблица 16 основни цвята, които се използват във всички браузъри

Име	Цвят	шестнадесетичен	(RGB)
Аква (морска вълна)		#00FFFF	(000,255,255)
черен		#000000	(000,000,000)
Син		#0000FF	(000,000,255)
Фуксия (магента)		#FF00FF	(255,000,255)
Сив		#808080	(128,128,128)
Зелено		#008000	(000,128,000)
Лайм (ярко зелен)		#00FF00	(000,255,000)
Кестеняво (тъмно бордо)		#800000	(128,000,000)
Морско синьо (тъмно синьо)		#000080	(000,000,128)
Маслина		#808000	(128,128,000)
Лилаво		#800080	(128,000,128)
червен		#FF0000	(255,000,000)
Сребро		#C0C0C0	(192,192,192)
Синьозелено (сиво-зелено)		#008080	(000,128,128)
Бяло		#FFFFFF	(255,255,255)
Жълто		#FFFF00	(255,255,000)

Таблица лилавоцветовете и техните нюанси

Име	Цвят	шестнадесетичен	(RGB)
магента (магента)		#FFCBDB	(255,203,219)
магента (магента)		#FF0099	(255,000,153)
магента (магента)		#F95A61	(249,090,097)
Фуксия (фуксия)		#FF00FF	(255,000,255)
Mauvein (анилин лилаво)		#EF0097	(239,000,151)
Розово сьомга (оранжево розово)		#FF91A4	(255,145,164)
Cenise (нюанс на лилаво)		#DE3163	(153,149,140)
Патладжан Патладжан (патладжан)		#990066	(153,000,132)
Лавандулов руж (розово-лавандулов)		#FFF0F5	(255,240,245)
Люляк (люляк)		#C8A2C8	(200,162,200)
магента (магента)		#FF008F	(255,000,143)
Орхидея (орхидея)		#DA70D6	(218,112,214)
Червено-виолетово (лилаво-червено)		#C71585	(199,021,133)
сангвиник (сангвиник)		#92000A	(146,000,010)
Трън (нюанс на лилаво)		#D8BFD8	(185,211,238)
Виолетово-патладжан (нюанс на лилаво)		#991199	(153,017,153)
Rosa vivo (наситено розово)		#FF007F	(255,000,127)
Лавандулова роза (нюанс на лилаво)		#FBA0E3	(108,123,139)
Маунтбатън розово		#997ABD	(153,122,141)

Таблица сивоцветовете и техните нюанси

Име	Цвят	шестнадесетичен	(RGB)
Сив		#808080	(128,128,128)
Сив		#bebebe	(190,190,190)
(сив нюанс)		#858585	(133,133,133)
Сив33		#545454	(084,084,084)
(Сив шисти)		#708090	(112,128,144)
(Кварц)		#99958с	(153,149,140)
(Светло сиво)		#ббббб	(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	Опера	Safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Браузърите поддържат някои цветове по име. В табл 1 показва имената, шестнадесетичния код, RGB, HSL стойностите и описанието.

Таблица 1. Имена на цветовете

Име	Цвят	Код	RGB	HSL	Описание
бяло		#ffffff или #fff	rgb(255,255,255)	hsl(0,0%,100%)	Бяло
сребро		#c0c0c0	rgb(192,192,192)	hsl(0,0%,75%)	Сив
сиво		#808080	rgb(128,128,128)	hsl(0,0%,50%)	Тъмно сив
черен		#000000 или #000	rgb(0,0,0)	hsl(0,0%,0%)	черен
кестеняво		#800000	rgb(128,0,0)	hsl(0,100%,25%)	Тъмно червено
червен		#ff0000 или #f00	rgb(255,0,0)	hsl(0,100%,50%)	червен
оранжево		#ffa500	rgb(255,165,0)	hsl(38,8,100%,50%)	портокал
жълто		#ffff00 или #ff0	rgb(255,255,0)	hsl(60,100%,50%)	Жълто
маслина		#808000	rgb(128,128,0)	hsl(60,100%,25%)	Маслина
вар		#00ff00 или #0f0	rgb(0,255,0)	hsl(120,100%,50%)	Светло зелено
зелено		#008000	rgb(0,128,0)	hsl(120,100%,25%)	Зелено
аква		#00ffff или #0ff	rgb(0,255,255)	hsl(180,100%,50%)	Син
син		#0000ff или #00f	rgb(0,0,255)	hsl(240,100%,50%)	Син
военноморски флот		#000080	rgb(0,0,128)	hsl(240,100%,25%)	Тъмно синьо
синьозелен		#008080	rgb(0,128,128)	hsl(180,100%,25%)	Синьозелено
фуксия		#ff00ff или #f0f	rgb(255,0,255)	hsl(300,100%,50%)	Розово
лилаво		#800080	rgb(128,0,128)	hsl(300,100%,25%)	Виолетово

Използване на RGB

Internet Explorer	Chrome	Опера	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	Опера	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, добавен към свойството цвят на фона, е валидиран, но добавен към свойството фон вече не е валиден. В същото време браузърите съвсем правилно разбират цвета и за двете свойства.

HSL

Internet Explorer	Chrome	Опера	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	Опера	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. Цветове на уеб страницата