Черен rgb код. Цветът в стиловете може да бъде определен по различни начини: чрез шестнадесетична стойност, по име, във формат RGB, RGBA, HSL, HSLA
Прочетете също
Цветовите кодове в CSS се използват за определяне на цветове. Обикновено цветовите кодове или цветовите стойности се използват за задаване на цвета или за цвета на предния план на елемент (напр. цвят на текста, цвят на връзката), или за цвета на фона на елемент (цвят на фона, цвят на блок). Те могат да се използват и за промяна на цвета на бутон, граница, маркер, задържане и други декоративни ефекти.
Можете да зададете вашите цветови стойности в различни формати. Следната таблица изброява всички възможни формати:
Изброените формати са описани по-подробно по-долу.
CSS цветове - шестнадесетични кодове
Шестнадесетичен код на цветае шестцифрено представяне на цвета. Първите две цифри (RR) представляват червената стойност, следващите две представляват зелената стойност (GG), а последните две представляват синята стойност (BB).
CSS цветове - кратки шестнадесетични кодове
Кратък шестнадесетичен цветен коде по-кратка форма на запис от шест знака. В този формат всяка цифра се повтаря, за да се получи еквивалентна шестцифрена стойност на цвета. Например: #0F0 става #00FF00.
Шестнадесетичната стойност може да бъде взета от всяка графика софтуер, като Адобе Фотошоп, Core Draw и др.
Всеки шестнадесетичен цветен код в CSS ще бъде предшестван от знак "#". По-долу са дадени примери за използване на шестнадесетични записи.
CSS цветове - RGB стойности
RGB стойносте цветен код, който се задава с помощта на свойството rgb(). Това свойство приема три стойности: по една за червено, зелено и синьо. Стойността може да бъде цяло число, от 0 до 255 или процент.
Забележка:Не всички браузъри поддържат цветовото свойство rgb(), така че не се препоръчва използването му.
По-долу е даден пример, показващ множество цветове с помощта на RGB стойности.
Генератор на цветни кодове
Можете да създадете милиони цветни кодове с помощта на нашата услуга.
Цветове, безопасни за браузъра
По-долу има таблица с 216 цвята, които са най-сигурни и независими от компютъра. Тези цветове в CSS варират от 000000 до шестнадесетичен код FFFFFF. Те са безопасни за използване, тъй като гарантират, че всички компютри показват правилно цвета, когато работят с 256 цветова палитра.
| Таблица на "безопасните" цветове в CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
В HTML цветът може да бъде определен по три начина:
Задаване на цвят в HTML по неговото име
Някои цветове могат да бъдат посочени с името им, като се използва името на цвета в английски език. Най-често срещаните ключови думи: черно, бяло, червено, зелено, синьо и др.:
Цвят на текста – червен
Най-популярните цветове на стандарта на World Wide Web Consortium (W3C):
| Цвят | Име | Цвят | Име | Цвят | Име | Цвят | Име |
|---|---|---|---|---|---|---|---|
| черен | Сив | Сребро | Бяло | ||||
| Жълто | Лайм | Аква | Фуксия | ||||
| червен | Зелено | Син | Лилаво | ||||
| Кестеняво | Маслина | ВМС | Тил |
Пример за използване на различни имена на цветове:
Пример: посочване на цвят чрез неговото име
- Опитайте сами"
Заглавка на червен фон
Заглавка на оранжев фон
Заглавие на лайм фон
Бял текст на син фон
Заглавка на червен фон
Заглавка на оранжев фон
Заглавие на лайм фон
Бял текст на син фон
Задаване на цвят чрез RGB
При изобразяване на различни цветове на монитор, RGB палитрата се използва като основа. Всеки цвят се получава чрез смесване на три основни: R - червено, G - зелено, B - синьо. Яркостта на всеки цвят се дава от един байт и следователно може да приема стойности от 0 до 255. Например RGB(255,0,0) се показва като червено, тъй като червеното е зададено на най-високата си стойност (255) и останалите са зададени на 0 Можете също да зададете цвета като процент. Всеки параметър показва нивото на яркост на съответния цвят. Например: стойностите rgb(127, 255, 127) и rgb(50%, 100%, 50%) ще зададат същия среден зелен цвят:
Пример: Определяне на цвят чрез RGB
- Опитайте сами"
rgb(127, 255, 127)
rgb (50%, 100%, 50%)
rgb(127, 255, 127)
rgb (50%, 100%, 50%)
Задайте цвят по шестнадесетична стойност
Стойности Р Ж бможе също да се посочи с помощта на шестнадесетични (HEX) цветови стойности във формата: #RRGGBB където RR (червено), GG (зелено) и BB (синьо) са шестнадесетични стойности от 00 до FF (същите като десетични 0-255 ) . Шестнадесетичната система, за разлика от десетичната, се основава, както подсказва името й, на числото 16. Шестнадесетичната система използва следните знаци: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Тук числата от 10 до 15 са заменени с латински букви. Числата, по-големи от 15 в шестнадесетичната система, се представят чрез комбиниране на два знака в една стойност. Например най-високото число 255 в десетична система съответства на най-високата стойност на FF в шестнадесетична система. За разлика от десетичната система, преди шестнадесетично числопоставете символ хеш # , например #FF0000 се показва като червено, защото червеното е зададено на най-високата си стойност (FF), а останалите цветове са зададени на минималната си стойност (00). Знаци след символа хеш # Можете да пишете както с главни, така и с малки букви. Шестнадесетичната система ви позволява да използвате съкратената форма #rgb, където всеки знак е еквивалентен на двойно. Следователно записът #f7O трябва да се разглежда като #ff7700.
Пример: HEX цвят
- Опитайте сами"
червено: #FF0000
зелено: #00FF00
синьо: #0000FF
червено: #FF0000
зелено: #00FF00
синьо: #0000FF
червено+зелено=жълто: #FFFF00
червено+синьо=лилаво: #FF00FF
зелено+синьо=циан: #00FFFF
Списък с общи цветове (име, HEX и RGB):
| английско име | Руско име | проба | HEX | RGB | ||
|---|---|---|---|---|---|---|
| амарант | амарант | #E52B50 | 229 | 43 | 80 | |
| Амбър | Амбър | #FFBF00 | 255 | 191 | 0 | |
| Аква | Синьозелено | #00FFFF | 0 | 255 | 255 | |
| Лазурно | Лазурно | #007FFF | 0 | 127 | 255 | |
| черен | черен | #000000 | 0 | 0 | 0 | |
| Син | Син | #0000FF | 0 | 0 | 255 | |
| Бонди синьо | Вода на плаж Бонди | #0095B6 | 0 | 149 | 182 | |
| Месинг | Месинг | #B5A642 | 181 | 166 | 66 | |
| кафяво | кафяво | #964B00 | 150 | 75 | 0 | |
| Cerulean | Лазурно | #007BA7 | 0 | 123 | 167 | |
| Тъмно пролетно зелено | Тъмно пролетно зелено | #177245 | 23 | 114 | 69 | |
| Емералд | Емералд | #50C878 | 80 | 200 | 120 | |
| Патладжан | Патладжан | #990066 | 153 | 0 | 102 | |
| Фуксия | Фуксия | #FF00FF | 255 | 0 | 255 | |
| злато | злато | #FFD700 | 250 | 215 | 0 | |
| Сив | Сив | #808080 | 128 | 128 | 128 | |
| Зелено | Зелено | #00FF00 | 0 | 255 | 0 | |
| Индиго | Индиго | #4B0082 | 75 | 0 | 130 | |
| нефрит | нефрит | #00A86B | 0 | 168 | 107 | |
| Лайм | Лайм | #CCFF00 | 204 | 255 | 0 | |
| Малахит | Малахит | #0BDA51 | 11 | 218 | 81 | |
| ВМС | Тъмно синьо | #000080 | 0 | 0 | 128 | |
| охра | охра | #CC7722 | 204 | 119 | 34 | |
| Маслина | Маслина | #808000 | 128 | 128 | 0 | |
| портокал | портокал | #FFA500 | 255 | 165 | 0 | |
| Праскова | Праскова | #FFE5B4 | 255 | 229 | 180 | |
| тиква | тиква | #FF7518 | 255 | 117 | 24 | |
| Лилаво | Виолетово | #800080 | 128 | 0 | 128 | |
| червен | червен | #FF0000 | 255 | 0 | 0 | |
| Шафран | Шафран | #F4C430 | 244 | 196 | 48 | |
| Морско зелено | Зелено море | #2E8B57 | 46 | 139 | 87 | |
| Блатно зелено | Болотни | #ACB78E | 172 | 183 | 142 | |
| Тил | Синьозелено | #008080 | 0 | 128 | 128 | |
| Ултрамарин | Ултрамарин | #120A8F | 18 | 10 | 143 | |
| Виолетово | Виолетово | #8B00FF | 139 | 0 | 255 | |
| Жълто | Жълто | #FFFF00 | 255 | 255 | 0 | |
Цветови кодове (фон) по наситеност и нюанс.
>> Управление на цветовете
Шестнадесетични RGB цветови стойности
Методите за описване и обработка на цвят се различават един от друг по това за какво крайно представяне са предназначени. Нека сравним например представянето на цветовете за печат и за компютърни монитори. В първия случай се взема основата бялоцветът на хартията, върху която впоследствие се прилагат три основни цвята: син, лилавоИ жълто. Смесвайки се един с друг и с белия цвят на хартията в различни пропорции, тези три основни цвята дават различни цветови нюанси, с изключение на чисто черно или при пълна липса на бои дават бяла хартия. Ако им добавим черен цвят, получаваме CMYK- метод за предаване на цвят, когато необходимият цвят се получава чрез изваждане на липсващите цветове от бялото.
Във втория случай се взема основата черенцветът на екрана на монитора, всяка клетка от който свети в един от трите цвята: червен-червен, зелено- зелено и син-син. След това, при пълна липса на блясък, получаваме чисто черен цвят на екрана, а всеки от необходимите цветове се дава от съотношението на всеки от трите цвята. В този случай ще получим RGB-метод на предаване на цвета. Основните цветове могат да варират от 0
преди 255
, или от 0%
преди 100%
, или може да бъде представено като шестнадесетична стойност. На фигурата по-долу можете да видите резултатите от смесването на основните цветове.
Шестнадесетичната бройна система, за разлика от десетичната, има не десет цифри, а шестнадесет - оттук и името. Съответно може да има само неповтарящи се варианти на комбинации от две цифри - 256 , за да продължи редицата от числа след 9 писма от Апреди Е, следователно сериалът ще изглежда така -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
В този случай цветът се определя от три шестнадесетични числа, всяко от които се състои от две цифри. Първото число определя интензивността червенцветове, средно- зелено, последно нещо- синцветове. Всички числа могат да приемат стойности в диапазона от 00 преди FF(от 0 до 255). Например: зеленият цвят е даден като #00FF00, червено - като #FF0000, синьо - като #0000FF, бяло - като #FFFFFF, като се дава пълна липса на цвят или черно #000000 .
Във формуляра по-долу можете да посочите всякакви шестнадесетични стойности за всеки от трите цвята и да видите резултата от смесването им, като щракнете върху полето за изход.
Примери за някои шестнадесетични RGB цветови стойности: градации на червено, синьо и зелено.
| изглед | код | изглед | код | изглед | код | изглед | код | изглед | код | изглед | код |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Задаване на цвят с помощта на низови литерали
За по-лесно използване на някои цветове и техните комбинации бяха присвоени имена, които се разпознават от всички браузъри, и стана възможно много от тях да се задават по име. Таблицата по-долу показва някои от имената на цветовете:
| изглед | Име | изглед | Име | изглед | Име | изглед | Име |
| Бяло | червен | портокал | Жълто | ||||
| Зелено | Син | Лилаво | черен | ||||
| Алисблу | Антично бяло | Аква | Аквамарин | ||||
| Лазурно | Бежово | бисквити | Бланширан алмонд | ||||
| Синя виолетова | кафяво | Burlywood | Cadetblue | ||||
| Шартрьоз | Шоколад | Корал | метличина | ||||
| Cornsilk | Пурпурен | Циан | Тъмно синьо | ||||
| Darkcyan | Тъмна златна пръчица | Тъмно сиво | Тъмнозелено | ||||
| Тъмнокаки | Тъмнопурпурно | тъмнозелено | Тъмнооранжево | ||||
| Darkorchid | Тъмно червено | Черна сьомга | Darkseagreen | ||||
| тъмносиньо | Тъмносластосив | Тъмнотюркоаз | Тъмновиолетово | ||||
| Deeppink | Deepskyblue | Димгрей | Доджърблу | ||||
| Огнеупорна тухла | Floralwhite | Forestgreen | Фуския | ||||
| Гейнсбъро | Ghostwhite | злато | Златна пръчица | ||||
| Сив | Зеленожълто | Медена роса | Hotpink | ||||
| Индийско червено | Индиго | Слонова кост | Каки | ||||
| Лавандула | Лавандулов руж | Лимончифон | Светло синьо | ||||
| Lightcoral | Lightcyan | Светлостуденочервеножълто | Светло зелено | ||||
| Светло сиво | Светло розово | Светла сьомга | Лайтсигрийн | ||||
| Светлосиньо | Светлосиво | Светлостоманеносиньо | Светло жълто | ||||
| Лайм | лаймгрийн | спално бельо | Магента | ||||
| Кестеняво | Среден аквамарин | Средно синьо | Средна морхида | ||||
| Средно лилаво | Средноморскозелено | Средноплоскосиньо | Среднопролетнозелено | ||||
| Среден тюркоаз | Средно виолетов | Среднощно синьо | Ментов крем | ||||
| Mistyrose | Навайоуайт | ВМС | Стара дантела | ||||
| Маслина | Оливераб | Оранжево | Орхидея | ||||
| Златна пръчица | Бледо зелено | Paletteurquoise | Палевиолетово червено | ||||
| Papayawhip | прасковен пух | Перу | Розово | ||||
| слива | Пудрово синьо | Розовокафяво | Кралско синьо | ||||
| Седлокафяво | Морско зелено | Мида | Сиена | ||||
| Сребро | Небесно синьо | Slateblue | Слейтгрей | ||||
| сняг | Springgreen | Steelblue | тен | ||||
| Тил | Трън | Домат | Тюркоаз | ||||
| Виолетово | пшеница | Whitesmoke | Жълто зелен |
Използване на безопасна цветова палитра
За съжаление, на различни платформи, с различни системни настройки, правилното възпроизвеждане на цветовете е проблем. Работата е там, че браузърът винаги се опитва да настрои цветовата палитра на документа според него системни настройкии възможностите на монитора, чрез самостоятелно смесване на цветове и замяната им. В резултат на това понякога потребителят не вижда точно това, което уеб администраторът е искал да му покаже. Изход от тази ситуация беше намерен в използването на палитра, всеки цвят от която гарантирано се изобразява еднакво от всички браузъри на различни платформи. Това е т.нар гарантиранопалета, наричана още безопаснопалитра. Тази палитра включва цветове, чиито цветови компоненти приемат следните стойности: 00 ,33 ,66 ,99 , CC,FF, по всички възможни начини 216 техните комбинации.
| изглед | код | изглед | код | изглед | код | изглед | код | изглед | код | изглед | код |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| 9900 FF | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
За съжаление все още не е възможно да се показват вкусови усещания на уебсайта. Но това може да бъде напълно компенсирано с помощта на цветовете. В края на краищата html цветовете ви позволяват да показвате всеки от милионите нюанси. Така " цветни моливиВ комплекта му има много повече от седем.
Цветова схема в html
IN html цвятможе да се посочи в няколко формата:
1. Като шестнадесетична стойност – използва се кодът, посочен в шестнадесетичната бройна система. Такива цветни кодове в html се състоят от три двойки шестнадесетични числа. Всяка двойка отговаря за наситеността на нюанса с основния си цвят:
- Първата числова двойка отговаря за червения цвят;
- Втората двойка е за съдържанието на зелен цвят;
- Последното е заради синьото съдържание.
В началото на кода (преди числата) се поставя решетка. Това е шестнадесетичният знак цветен код. В допълнение към числата от 1 до 9, тази бройна система използва букви от латинската азбука (A, B, C, D, E, F).
Например кодът на белия цвят в html ще изглежда като #FFFFFF:
2. Ключова дума - HTML в момента поддържа около 147 ключови думи. Но не всички от тези думи са уникални. Някои от тях се отнасят за един и същи цветови нюанс.
Сивият цвят е представен с две ключови думи: сиво и сиво. Техният шестнадесетичен код (HEX) е даден със същата стойност #808080.
Пример:
#808080
3. Б RGB формат– това цветово кодиране в html се основава на използването на три стойности, посочени в диапазона от 0 до 255. Всяка от тях определя наситеността на нюанса с един от основните цветове:
- R – червено (червено);
- G – зелен (зелен);
- B – синьо (синьо).
Номерът на цвета в RGB формат се записва в следната форма: rgb(0, 210, 100).
цвят на фона:rgb(100,186,43)
4. Във формат RGBA - това е подобрен RGB формат, където четвъртата стойност определя прозрачността на цвета като десетична дроб от 0 до 1.
Пример за употреба:
цвят на фона:rgba(100,86,143,0.2)
цвят на фона:rgba(100,86,143,0.5)
цвят на фона:rgba(100,86,143,0.8)
цвят на фона:rgba(100,86,143,1)
HTML цветни таблици и генератори на цветове
С такава широка гама от формати за настройка на цвета е лесно да се объркате. Затова е изобретена специална цветна таблица. Той предоставя 147 ключови имена на цветови нюанси с кодове за съответствие във всички основни цветови стандарти. Освен това всяко поле е оборудвано с лента за визуален избор на цвят. Една от тези таблици е представена на уебсайта colorscheme.ru:
Но дори и с това структуриране на съвпадението, изборът на правилния нюанс може да бъде труден. И не е факт, че таблицата с цветни кодове ще съдържа този, от който се нуждаете.
За да се преодолее това препятствие и да се направи изборът на правилния нюанс възможно най-лесен, са разработени интерактивни уеб услуги. Техен потребителски интерфейсмогат леко да се различават един от друг.
На уебсайта html-color-codes.info генераторът на цветове изглежда така:
И в рамките на услугата color-picker.appsmaster.co този инструмент е внедрен малко по-различно:
Наситеността на всеки цвят в генератора се задава с помощта на специални плъзгачи. Визуално сянката се показва чрез цвета на рамката и правоъгълника от лявата страна. В долната част 3 полета показват цветовия код в основни формати.
Но генераторът на цветове е достъпен не само на специализирани сайтове. Почти всеки е оборудван с такъв инструмент. графичен редактор. Например Photoshop:
Мерки за безопасност при работа с цвят
И това беше много отдавна, още в ерата на видеокартите, които поддържаха само 256 цвята. В онези далечни времена операционна системаможеше да показва само без изкривяване определено количество отосем битови нюанса.
Тогава беше разработена страхотна таблица с безопасни цветове. Той определя 216 нюанса, които могат да бъдат показани без изкривяване във всеки от браузърите от онова време. И до днес това " страхотен ръкопис» все още е наличен на някои ресурси:
В наши дни всичко се е променило. Следователно всички правила за безопасност при работа с цвят в html са напълно отменени. В крайна сметка съвременният компютърен хардуер поддържа повече от 16 милиона различни нюанса. И 216 безопасни цвята са потънали в забрава.
За определяне на цветове се използват шестнадесетични числа. Шестнадесетичната система, за разлика от десетичната, се основава, както подсказва името й, на числото 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 стойностите и описанието.
| Име | Цвят | Код | 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. Цветове на уеб страницата