Цветният модул на CSS ясно описва стойностите, които позволяват на авторите да определят цвета и яснотата на html елементите, както и стойностите на цвета.
Силов цвят
1. Приоритетни цветове: цвят на яркостта
Органът задава цвета на шрифта, като използва различни системи за прехвърляне на цветовете. Силата се отнася до цвета на текстовия елемент. В допълнение, той се използва за предоставяне на потенциално непряко значение (currentColor) за всички други сили, които създават значение за цвета.
Силата намалява.
2. Значение на цвета
2.1. Основни ключови думи
Списъкът с основни ключови думи включва следните стойности:
| Име | HEX | RGB | Колир |
|---|---|---|---|
| черен | #000000 | 0,0,0 | |
| сребро | #C0C0C0 | 192,192,192 | |
| сиво | #808080 | 128,128,128 | |
| бяло | #FFFFFF | 255,255,255 | |
| кестеняво | #800000 | 128,0,0 | |
| червен | #FF0000 | 255,0,0 | |
| лилаво | #800080 | 128,0,128 | |
| фуксия | #FF00FF | 255,0,255 | |
| зелено | #008000 | 0,128,0 | |
| вар | #00FF00 | 0,255,0 | |
| маслина | #808000 | 128,128,0 | |
| жълто | #FFFF00 | 255,255,0 | |
| военноморски флот | #000080 | 0,0,128 | |
| син | #0000FF | 0,0,255 | |
| синьозелен | #008080 | 0,128,128 | |
| аква | #00FFFF | 0,255,255 |
Имената на цветовете не са чувствителни към регистъра.
Синтаксис
Цвят: синьо;
2.2. Числени стойности на цвета
2.2.1. Colori модели RGB
RGB форматът на стойността в шестнадесетичен формат е знакът #, последван от три или шест шестнадесетични знака. Трицифрената RGB нотация #rgb се преобразува в шестцифрената форма #rrggbb чрез копиране на числа, а не чрез добавяне на нули. Например #fb0 се разширява до #ffbb00. Това гарантира, че белият #ffffff може да се използва като индикация в кратък запис #ffff и премахва всички разлики в зависимост от цвета на дисплея.
RGB форматът на стойността на функционалната нотация е rgb (последван от отделен списък от три числови стойности (или три цели числа, или три стотни стойности), последвани от символ). Целочислената стойност 255 съответства на 100% и F или FF в шестнадесетичен запис:
RGB(255,255,255) = RGB(100%, 100%, 100%) = #FFF
Позволени са празни знаци до числови стойности.
Уеб дизайнът има няколко начина за представяне на цвят
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) | |
| Movein (анилин лилаво) | #EF0097 | (239,000,151) | |
| Сьомго розово (оранжево-ръждиво) | #FF91A4 | (255,145,164) | |
| Cenise (нюанс на лилаво) | #DE3163 | (153,149,140) | |
| Патладжан Патладжан (патладжан) | #990066 | (153,000,132) | |
| Лавандулов руж (розово-лавандулов) | #FFF0F5 | (255,240,245) | |
| Люляк (boozkoviy) | #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) | |
| Gray33 (Syriy-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) |
На тази страница има таблица с ключови думи, които могат да се използват за задаване на цветове в такива езици за уеб разработчици като: HTML, CSS, JavaScript, Flash и др.
В старите спецификации концернът WC3 имаше предписани само 16 ключови думи, в допълнение към които бяха инсталирани цветове в HTML и CSS. В по-нататъшни, по-актуални спецификации, бяха добавени още 130 ключови думи за определяне на имена на цветове. Ето таблица, показваща имената на цветовете, шестнадесетични и RGB кодове, които те представляват.
Следвайки правилата на CSS, имената на цветовете не са чувствителни към главни и малки букви. Записите за цветовете IndianRed и indianred са равни.
Също така си струва да се отбележи, че от 146 ключови думи в таблицата, тя всъщност има по-малко цветове. Това означава, че тези ключови думи означават един и същи цвят. Така имената Gray и Gray показват 50-шестнадесетичен цвят с код #808080, а думата Magenta е синоним на HTML цвят Fuchsia, който съответства на шестнадесетичен код #FF00FF. Също така синоним на думите Aqua и Cyan, смрадите отговарят на код #00FFFF.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
За задаване на цветове се използват числа в шестнадесетични кодове. Шестнадесетата система, вместо десетата система, се основава, както подсказва името й, на числото 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+ |
Можете да определите цвета, vikory и червените, зелените и сините стойности в десети. Кожата с три цветни компонента приема стойности от 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. Colori на уеб страницата
лаптопи
