Как се казва цветовата палитра? Цветът в стиловете може да бъде определен по различни начини: чрез шестнадесетична стойност, по име, във формат RGB, RGBA, HSL, HSLA
Влад Мержевич
В HTML цветът се определя по един от двата начина: с помощта на шестнадесетичен код и с името на определени цветове. Използваният основно метод се основава на шестнадесетична системасмятане като най-универсален.
Шестнадесетични цветове
HTML използва шестнадесетични числа за определяне на цветовете. Шестнадесетичната система, за разлика от десетичната, се основава, както подсказва името й, на числото 16. Числата ще бъдат както следва: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Цифрите от 10 до 15 се заменят с латински букви. В табл 6.1 показва съответствието между десетична и шестнадесетични числа.
Числата над 15 в шестнадесетичната система се образуват чрез комбиниране на две числа в едно (Таблица 6.2). Например числото 255 в десетична системасъответства на числото FF в шестнадесетична форма.
За да се избегне объркване при дефинирането на бройната система, шестнадесетично число се предхожда от символ #, например #aa69cc. В този случай регистърът няма значение, така че е допустимо да се напише #F0F0F0 или #f0f0f0.
Типичен цвят, използван в HTML, изглежда така.
Тук цветът на фона на уеб страницата е зададен на #FA8E47. Символът хеш # пред число означава, че е шестнадесетично. Първите две цифри (FA) определят червения компонент на цвета, третата до четвъртата цифра (8E) определят зеления компонент, а последните две цифри (47) определят синия компонент. Крайният резултат ще бъде този цвят.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Всеки от трите цвята - червен, зелен и син - може да приема стойности от 00 до FF, което води до общо 256 нюанса. Така общият брой цветове може да бъде 256x256x256 = 16 777 216 комбинации. Цветов модел, базиран на червени, зелени и сини компоненти, се нарича RGB (червено, зелено, синьо; червено, зелено, синьо). Този модел е адитивен (от add - добавям), при който се образува добавянето на трите компонента бяло.
За по-лесно навигиране шестнадесетични цветове, моля, вземете предвид някои правила.
- Ако стойностите на цветните компоненти са еднакви (например: #D6D6D6), тогава резултатът ще бъде сив нюанс. как по-голям брой, толкова по-светъл е цветът, със стойности, вариращи от #000000 (черно) до #FFFFFF (бяло).
- Ярко червен цвят се образува, ако червеният компонент е направен максимален (FF), а останалите компоненти са настроени на нула. Цвят със стойност #FF0000 е най-червеният възможен червен нюанс. Същото важи и за зелено (#00FF00) и синьо (#0000FF).
- Жълто (#FFFF00) се получава чрез смесване на червено и зелено. Това е ясно видимо на цветното колело (фиг. 6.1), което представя основните цветове (червено, зелено, синьо) и допълнителните или допълнителните. Те включват жълто, циан и виолетово (наричано още магента). Като цяло всеки цвят може да се получи чрез смесване на близки до него цветове. Така циан (#00FFFF) се получава чрез комбиниране на синьо и зелено.
ориз. 6.1. Цветно колело
Цветовете, базирани на шестнадесетични стойности, не трябва да се избират емпирично. Подходящ за тази цел графичен редактор, способен да работи с различни цветови модели, напр. Adobe Photoshop. На фиг. Фигура 6.2 показва прозореца за избор на цвят в тази програма; получената шестнадесетична стойност на текущия цвят е очертана с линия. Можете да го копирате и поставите във вашия код.
ориз. 6.2. Прозорец за избор на цвят в Програма фотошоп
Уеб цветове
Ако зададете качеството на цветопредаване на монитора на 8 бита (256 цвята), тогава същият цвят може да се показва в различни браузърипо мой собствен начин. Това се дължи на начина, по който се показват графиките, когато браузърът работи със собствена палитра и не може да покаже цвят, който не е в неговата палитра. В този случай цветът се заменя с комбинация от пиксели от други, близки до него цветове, които имитират дадения. За да се гарантира, че цветът остава един и същ в различните браузъри, беше въведена палитра от така наречените уеб цветове. Уеб цветовете са тези цветове, за които всеки компонент - червен, зелен и син - е зададен на една от шестте стойности - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Шестнадесетичната стойност на този компонент е посочена в скоби. Общият брой цветове от всички възможни комбинации дава 6x6x6 - 216 цвята. Примерен уеб цвят е #33FF66.
Основната характеристика на уеб цвета е, че той изглежда еднакъв във всички браузъри. IN в моментаУместността на уеб цветовете е много малка поради подобряването на качеството на мониторите и разширяването на техните възможности.
Цветове по име
За да избегнете необходимостта да помните набор от числа, можете вместо това да използвате имената на често използвани цветове. В табл 6.3 показва имената на популярни имена на цветове.
| Име на цвета | Цвят | Описание | Шестнадесетична стойност |
|---|---|---|---|
| черен | черен | #000000 | |
| синьо | Синьо | #0000FF | |
| фуксия | Светло лилаво | #FF00FF | |
| сиво | Тъмно сиво | #808080 | |
| зелено | зелено | #008000 | |
| вар | Светло зелено | #00FF00 | |
| кестеняво | Тъмно червено | #800000 | |
| военноморски флот | Тъмносиньо | #000080 | |
| маслина | Маслина | #808000 | |
| лилаво | Тъмно лилаво | #800080 | |
| червено | червено | #FF0000 | |
| сребро | Светло сиво | #C0C0C0 | |
| синьозелен | Синьо-зелено | #008080 | |
| бяло | Бяло | #FFFFFF | |
| жълто | Жълто | #FFFF00 |
Няма значение дали определяте цвят чрез името му или като използвате шестнадесетични числа. Тези методи са еднакви по своя ефект. Пример 6.1 показва как да зададете цветовете на фона и текста на уеб страница.
Пример 6.1. Цвят на фона и текста
Примерен текст
В този пример цветът на фона е зададен с помощта на атрибута bgcolor на тага
и цвета на текста чрез атрибута text. За разнообразие атрибутът text е зададен на шестнадесетично число, а атрибутът bgcolor е зададен на запазената ключова дума teal.За определяне на цветове се използват шестнадесетични числа. Шестнадесетичната система, за разлика от десетичната, се основава, както подсказва името й, на числото 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. Цветове на уеб страницата
>> Управление на цветовете
Шестнадесетични 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 | прасковен пух | Перу | Розово | ||||
| слива | Пудрово синьо | Розовокафяво | Royalblue | ||||
| Седлокафяво | Seagreen | Морска мида | Сиена | ||||
| Сребро | Небесно синьо | 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 |
Оцветете в CSS езикможе да се настрои по различни начини:
- по име,
- от шестнадесетична стойност,
- във формати RGB и RGBA,
- във формати HSL и HSLA.
Задайте цвят по име
Браузърите поддържат определяне на някои цветове за елементи по име. В тази таблица някои ключови думи(Имена на цветове на английски), използвани за указване на свойства на цвета, RGB код, шестнадесетичен код (HEX) и HSL код.
| Име | Цвят | RGB | HEX | HSL | Описание |
|---|---|---|---|---|---|
| бяло | rgb(255, 255, 255) | #ffffff или #fff | hsl(0, 0%, 100%) | Бяло | |
| сребро | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Сив | |
| сиво | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Тъмно сиво | |
| черен | rgb(0, 0, 0) | #000000 или #000 | hsl(0, 0%, 0%) | черен | |
| кестеняво | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Тъмно червено | |
| червено | rgb(255, 0, 0) | #ff0000 или #f00 | hsl(0, 100%, 50%) | червено | |
| оранжево | rgb(255, 165, 0) | #ffa500 | hsl(38,8, 100%, 50%) | портокал | |
| жълто | rgb(255, 255, 0) | #ffff00 или #ff0 | hsl(60, 100%, 50%) | Жълто | |
| маслина | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Маслина | |
| вар | rgb(0, 255, 0) | #00ff00 или #0f0 | hsl(120, 100%, 50%) | Светло зелено | |
| зелено | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | зелено | |
| аква | rgb(0, 255, 255) | #00ffff или #0ff | hsl(180, 100%, 50%) | Синьо | |
| синьо | rgb(0, 0, 255) | #0000ff или #00f | hsl(240, 100%, 50%) | Синьо | |
| военноморски флот | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Тъмносиньо | |
| синьозелен | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Синьо-зелено | |
| фуксия | rgb(255, 0, 255) | #ff00ff или #f0f | hsl(300, 100%, 50%) | Розово | |
| лилаво | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Виолетово |
Това е пример за използване на имена на цветове, имената на цветовете са взети от разширената таблица.
Ето как работи този код:
Задаване на цвят с помощта на RGB
RGB - добавка цветен модел. включено английски допълнение- допълнение. RGB е съкращение от английските думи: Red, Green, Blue - червен, зелен, син). От това става ясно, че в RGB модела цветовете се синтезират чрез добавяне три цвята(червено, зелено, синьо) в различни количества.
Смесване на червено, зелено и сини цветовеможете да получите няколко милиона нюанса. Всички възможни комбинации се съхраняват в паметта на компютъра.
Преминете към точката.
За да зададете свойства в този формат, използвайте нотацията rgb(r, g, b) , където r, g, b са трите канала за всеки цвят (червен, зелен, син). Стойностите за всеки канал са зададени в диапазона от 0 до 255.
Примерен код.
За да стане всичко ясно, ето примерен код:
Ето как трябва да работи този пример:
Фиг.1. Цветове в RGB. Обяснения например.
В началото на страницата създаваме клас div.rgb, той е необходим за блокове, създадени от тага
След това в кода, който сме задали фонов цвятблок
Опитайте да редактирате този пример и да посочите свои собствени стойности, например 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 като шестнадесетични цифри и използвайте обикновените десетични цифри от 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.
Шестнадесетичната система е по-разбираема за компютъра и обработва по-бързо стойности, зададени от шестнадесетична стойност.
За да зададете цвят в шестнадесетичен, преди числова стойносттрябва да поставите знак „#“, например: #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. IN HSL формат A, подобно на 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 формат.
26.02.15 8,9 хилКакто знаете, цветът може да повлияе на състоянието на човека: както психическо, така и физическо. Всеки ден, докато разглеждате уебсайтове в интернет, очите оценяват милиони цветове и нюанси. Уеб дизайнер, който е запознат с психологията на цвета, може да манипулира настроението на посетителя, за да постигне определени цели.
Това се дължи на факта, че някои нюанси успокояват, а някои, напротив, вълнуват. Следваща ще говоримза това как цветът се синтезира и показва с помощта на компютърна технология.
RGB е цветови модел, който представлява метод за получаване на всички цветове и техните нюанси чрез смесване в различни пропорции на три основни компонента, които са:
- червено ( червено);
- зелен цвят ( зелено);
- син цвят ( Синьо).
От тук идва и съкратеното наименование RGB. Тези цветове са избрани като основни с причина: причината е физиологията на ретината на човешкото око и как тя ги възприема:
RGB моделът остава най-популярен днес и се използва за възпроизвеждане на цветове на телевизионни екрани и компютърни монитори. Тъй като производителите даряват своите продукти различни характеристики, е създадена през 1996г единна системаСинтез на цветове, базиран на RGB, наречен sRGB, върху който си сътрудничихме Microsoftи HP.
Числено представяне на цвета
Както споменахме по-рано, RGB цветовете се образуват чрез смесване на основните цветове. За да се опише интензитета на всеки от тях, беше приета схема, в която цветът е представен от диапазона 0-255 (8 бита), което в шестнадесетичен запис съответства на 00-FF.
Тоест основните цветове ще изглеждат така:
- Червено – RGB (255,0,0);
- Зелено – RGB (0,255,0);
- Синьо – RGB (0,0,255);
Ако интензитетът на цвета приема стойности по-малки от 255, тогава се получават различни нюанси на червено, зелено и синьо. Следва таблица с техните градации, както и шестнадесетичните стойности на всеки от нюансите:
RGB цветови таблици
Естествено, в допълнение към градациите на основните цветове, има и смесени, като техният брой е доста голям. Затова беше създадена таблица с RGB цветове, която представя всички съществуващи нюанси, както и техните имена и числени представяния ( в десетична и шестнадесетична форма).
Можете да го видите тук. Тази масаправи живота много по-лесен за уеб дизайнерите, тъй като за няколко секунди можете да намерите желания нюанс и да разберете численото му представяне.
Безопасна RGB цветова палитра
В един момент обаче възникна проблем с показването на цветовете в различни браузъри и за решаването му беше съставена така наречената „безопасна“ палитра от RGB цветове, които бяха получени чрез математически изчисления.
Когато браузърът не може да покаже цвят правилно, той се опитва да получи нещо близко до това, от което се нуждае, като смесва съседни цветове и най-вероятно резултатът ще бъде напълно неприемлив:
Използвайки RGB цветови кодове от тази палитра, уеб разработчикът не може да се тревожи за показването на цветовете на страниците на неговия сайт, когато се гледа с различни браузъри, на различни платформи и монитори. Въпреки че в момента масата безопасни цветовегуби своята актуалност ( технически прогресвсе още не стои на едно място), когато го използвате, можете, както се казва, да спите спокойно.
Златен цвят в RGB модел
Думата "златен" е използвана за първи път в началото на 14 век, за да опише цвета химичен елементнаречен Aurum - злато. В модела RGB златният цвят е представен от следните числени стойности:
- RGB (255, 215, 0) – десетична система;
- HEX #FFD700 – шестнадесетична система.
Бежов цвят в RGB модел
Бежовият цвят заема доста важно място в историята, дори и да не е най-изразителният. Много паметници на културата, особено древни скулптури, са направени от сапунен камък и сапунен камък, които имат бежов оттенък. В модела RGB бежовият цвят има следните цифрови представяния.