В 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

Цветови кодове (фон) по наситеност и нюанс.

CSS не се разбира). Следователно бъдещият уеб администратор просто трябва да учи HTML инструменти, които ви позволяват да променяте цвета,например, за да направите ярки и цветни имейл бюлетини, които да привлекат вниманието на целевата аудитория на сайта.

Тази публикация е доста дълга, но от нея ще научите за всички технически характеристики на работата с цвят с помощта на HTML. Ще започнем записа, като разберем въпроса: защо трябва да подчертаваме определени елементи от HTML страница с цвят? След това ще говорим за RGB модела, който ви позволява да задавате цветове в HTML с помощта на специални кодове (по пътя ще разгледаме десетичните цветови кодове и шестнадесетичните HTML цветови стойности). Също така от тази публикация ще научите за цветовата палитра и ще разберете защо няма палитра в HTML. И в края на тази публикация ще има примери за промяна на цвета на фона, текста и връзките.

Използване на цветове в HTML

Страниците на уебсайтовете биха били скучни и безинтересни без изображения, както говорихме по-рано и много подробно. Но изображенията имат един съществен недостатък: всяко изображение е допълнително и съответно допълнително натоварване на хостинга.

Бих искал да отбележа, че не използвах нито едно изображение за дизайна на моя блог в WordPress; оформлението беше изцяло проектирано с използване на цвят. Точно същото Днес ще говорим за цветовете в HTML. Цветовете в HTML се използват за различни цели, например можем да проектираме оформления на уебсайтове, като подчертаваме определени елементи с един или друг цвят.

С помощта на цвят можем да фокусираме вниманието на нашите посетители върху определен текст или блок от сайта. Обърнете внимание, че също се определя с помощта на цвят по такъв начин, че потребителят да може да разбере: върху коя връзка вече е кликнал, коя все още не е посетил и на коя HTML страница се намира в момента.

Бъдете внимателни използване на цветове за проектиране на HTML документи, не всички цветове вървят заедно и не всеки цвят ще се хареса на посетителите на вашия уебсайт. Но по-добре попитайте уеб дизайнерите за тези тънкости; тази статия ще ви помогне да разберете техническите характеристики, които ви позволяват да контролирате цвета на елементите на HTML страницата.

Но не трябва да забравяте, че дизайнът трябва да бъде отделен от съдържанието, така че е по-добре да използвате CSS за манипулиране на цвета на HTML страници, но ще говорим за това в друга публикация. Сега ще видим Какви инструменти има HTML за контролиране на цвета на страниците на сайта?.

В ИТ индустрията има много цветови модели за манипулиране на цветовете. Най-широко използваният модел за представяне на цветовете е моделът RGB. Тук ще говорим за някои от характеристиките на този модел, а за по-подробно запознаване с RGB ще има отделна публикация. По-долу ще намерите списък с цветови модели, използвани в ИТ (не само HTML и CSS):

1. RGB модел. Този модел стана много разпространен и е може би един от най-удобните и често срещани начини за манипулиране на цвета на HTML елементите.
2. Модел RGBA. Този модел е много подобен на модела RGB, но включва алфа канал за цвета. Особеността на модела RGBA е, че ви позволява да регулирате не само цвета на HTML елемента, но и неговата прозрачностпоради наличието на алфа канал. Моделът RGBA беше добавен към CSS3 и не се поддържа от по-стари браузъри.
3. Модел HSL. Особеността на модела HSL е, че ние задаваме цвета, използвайки неговите параметри: нюанс, интензитет и лекота. Този модел е малко по-труден за разбиране от модела RGB.
4. Модел HSLA. Този модел е много подобен на модела HSL, но точно като модела RGBA, ви позволява да работите с алфа цветовия канал, така че с помощта на HSLA можем да зададем не само цвета на HTML елемент на страницата, но и неговата прозрачност .
5. Модел HSV (HSB). Този модел не трябва да се бърка с модела HSL. Имайте предвид, че първите четири модела могат да се използват в HTML или CSS за проектиране на уеб страници, но моделът HSV не може. HSV е проектиран от един от основателите на Pixar през 1978 г. и е много подобен на HSL.
6. Модел CMY или CMYK. Този модел се използва във всички цветни принтери за печат. Моделът CMYK се основава на правилото, че печатът се извършва върху бели листове хартия. Всеки CMYK цвят се получава чрез смесване на циан (бледо синьо, тюркоаз), магента (магента) и жълто. Всеки цвят в модела CMY има характеристика на непрозрачност (количество мастило), измерена като процент. Но в допълнение към изброените три цвята, моделът CMYK използва и черно.

Всички горепосочени цветови модели зависят от хардуера, т.е задайте цвета на HTML елемент, като използвате RGB или HSL модела, тогава е невъзможно да се каже със сигурност какъв точно нюанс на цвета ще види посетителят на вашия сайт, тъй като мониторите на всички потребители са различни и те предават цветовете по различен начин. Също така имайте предвид, че всички горепосочени модели са базирани на RGB модела и всеки цвят, посочен във всеки от моделите (с изключение на HSLA и RGBA поради наличието на алфа канал), може да бъде преобразуван в RGB.

Ако говорим за хардуерно независими модели за прехвърляне на цветовете, тогава си струва да се отбележи моделът LAB. И така, направихме малка почивка от работата с цвят в HTML, като се запознахме с някои цветови модели. Имайте предвид, че браузърите „разбират“ само първите четири модела: HSL, RGB, HSLA и RGBA. Следователно можем да контролираме само цвета на HTML елементите, използвайки тези модели.

Как се формира цветът на HTML елемент: някои характеристики на RGB модела

Нека да го разберем как се формира цветът на HTML елементи с някои характеристики на модела RGB. Имайте предвид, че ще говорим за модела RGB, както и за други модели, които се използват за проектиране на уеб страници, малко по-късно в отделни публикации.

И така, RGB моделът означава червено, зелено, синьо. RGB моделът се основава на принципа на адитивността. Този принцип е, че за да се получи какъвто и да е цвят, към черното се добавя цвят. За по-добро разбиране си представете, че вашият екран е черна стена и имате три прожектора: първият свети в червено, вторият свети в зелено, а третият свети в синьо. Можете да регулирате яркостта на всеки прожектор с помощта на линийка с числа от 0 до 255. Съответно, ако зададете прожектора на нула, той се изключва и не свети; ако стойността е 255, тогава прожекторът произвежда възможно най-яркия цвят .

По този начин се оказва, че ако осветите червен и зелен прожектор в една и съща точка, тогава ще забележите жълто петно ​​върху черна стена. Ако комбинирате червено и синьо, получавате лилаво, а ако комбинирате зелено и синьо, светлинното петно ​​върху черна стена ще бъде циан, но ако насочите и трите прожектора в една точка, светлинното петно ​​ще бъде бяло.

Принципът, описан по-горе, е в основата на RGB модела и се използва за манипулиране на цветовете в HTML елементи на страница в браузър.

HTML атрибути за промяна на цвета на елементите: цвета на фона на елемента и цвета на текста вътре в елемента

Използва се, за да направи елементите на страницата уникални. С помощта на HTML атрибути можем да манипулираме цвета на елементите:

1. Цвят на HTML атрибут. Този атрибут ви позволява да промените цвета на текста в HTML елемента. Атрибутът може да приема стойности под формата на HTML имена на цветове и RGB кодове на модели в шестнадесетични и десетични нотации. Цветният атрибут е уникален HTML атрибут, който ви позволява да промените цвета на текста в определени HTML елементи.
2. HTML текстов атрибут. Този атрибут е уникален атрибут на етикет . Етикет заедно с етикети и форма . Ако си спомняте, вътре в контейнера се поставят елементи, които след това се показват от браузъра в областта за преглед. Текстовият атрибут ви позволява да посочите Цвят на текста по подразбиране за цялата HTML страница.
3. HTML атрибут bgcolor. Това също е уникален HTML атрибут и ви позволява да промените цвета на фона на някои HTML елементи.
4. HTML атрибут vlink. Този атрибут е уникален и се прилага само за етикета за промяна на цвета на връзка, която потребителят вече е посетил.
5. Връзка към HTML атрибут. Този атрибут също е уникален и се прилага само към етикета . Атрибутът alink променя цвета на активната HTML връзка.
6. HTML атрибут за връзка. Атрибутът link се използва само във връзка с таг и служи за промяна на цвета на връзките към HTML страници, които потребителят все още не е посетил.

Моля, обърнете внимание: използването на атрибути за промяна на цвета на HTML елементи не се препоръчва, тъй като има каскадни стилови таблици, които ви позволяват да отделите дизайна на уеб страница от нейното съдържание.

Използване на десетични цветови кодове в HTML

И така, говорихме за факта, че можете да зададете яркостта на прожектора с помощта на специална линийка, на която има номерирани чертежи от 0 до 255. Сега нека видим как това ще ни помогне да променим цвета на HTML елементите. Работата е там, че можем да променим цвета на текста в HTML елемент или цвета на фона в HTML, използвайки десетичен код, както следва:

Ако създадете HTML документ, в който е описан контейнерът на тялото, както в примера, ще видите:

1. Цветът на фона на HTML документа вече е зелен: bgcolor=”rgb (0,255,0)”.
2. Цветът на текста на HTML страницата ще стане син: text=”rgb (0,0,255)”.
3. HTML цветът на връзката, която потребителят не е посетил, ще бъде бял: link=”rgb (255,255,255)”.
4. Цветовете на връзката, която е отворена в момента, ще бъдат черни: alink=”rgb (0,0,0)”.
5. А цветът на вече посетената HTML връзка ще бъде червен: vlink=”rgb (255,0,0)”.

Моля, обърнете внимание: никой не ви забранява да регулирате „мощността на прожекторите“ по свое усмотрение, можете задаване на HTML цвят, например по този начин:

rgb(94, 85, 50)

И придобийте цвета на детската изненада. Това е особеността, гъвкавостта и удобството на RGB модела. Вашият монитор е черна стена с прожектори, които светят върху нея и можете да регулирате силата на тези прожектори и да създавате всякакви фонови цветове, текст и връзки, като използвате HTML атрибути в системата за десетична нотация, или можете също да кажете: използвайки десетични цветови кодове.

Всъщност Грешно е да се казват десетични цветови кодове в HTML, би било по-правилно да се каже RGB десетични цветови кодове, тъй като този модел се използва не само за проектиране на уеб страници в HTML и CSS.

Шестнадесетични HTML цветови стойности

Задаването на цвета на HTML елементите с помощта на десетични кодове на RGB модела не е много удобно (и в момента не всички браузъри поддържат този метод за манипулиране на цветовете), тъй като записът няма да бъде най-компактният; това е много по-удобно задайте цвета на HTML елементите, като използвате шестнадесетични стойности. На изображението по-долу можете да видите как десетичните стойности се преобразуват в шестнадесетични.

За тези, които не са запознати с шестнадесетичната бройна система, трябва да се даде малко обяснение, за да можете лесно манипулирайте цвета на HTML елементите, като използвате шестнадесетични RGB моделни кодове. Първо, десетичната бройна система е наречена така, защото всяко число може да бъде получено чрез комбинация от десет цифри (терминологията е важна: има разлика между число и цифра): 0, 1, 2, 3, 5, 6, 7, 8, 9.

В шестнадесетичната бройна система всяко число може да бъде написано с помощта на комбинация от шестнадесет цифри: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. За по-лесно разбиране можете да приемете, че a е десет и f е петнадесет. Например числото шестнадесет ще бъде записано в шестнадесетичен формат, както следва: 10. А числото 255 ще бъде записано като ff.

Сега да видим как можем задайте цвета на HTML елементите, като използвате шестнадесетични стойности, нека повторим нашия предишен пример, като заменим десетичните цветови кодове с техните шестнадесетични двойници:

< body alink = ”#000000” link=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”>

Моля, обърнете внимание: писането на цвят в HTML в шестнадесетичен формат е малко по-компактноотколкото в десетична, това е първата. Второ: мощността на всеки прожектор се задава с числа от 0 до 255. За да напишете числото 255 са необходими две цифри в шестнадесетичен формат (ff = 250), така че яркостта на всеки цветен канал (нашите прожектори правилно се наричат ​​цветен канал, цветен канал) се задава с две числа от 0 до f.

Моля, обърнете внимание: яркостта на всеки цветен канал се задава отделно, но ако си представим, че това е едно число, тогава максималното възможно число в шестнадесетичната бройна система на модела RGB е ffffff, това ще ни даде бяло, а в десетичната система е: 16 777 215. Този брой цветове и нюанси ви позволява да зададете/използвате RGB модела. Това число идва от факта, че всеки цветен канал има съответно 256 стойности на яркост (от 0 до 255): 256 * 256 * 256 = 16 777 215.

Шестнадесетичните HTML цветови стойности са по-компактни и по-ясни, повечето уеб дизайнери и дизайнери на оформление използват шестнадесетични стойности, за да манипулират цвета в HTML, така че ви препоръчваме да не свиквате с десетичната форма на цветовата нотация, а веднага да използвате шестнадесетични.

Ясно е, че в началото ще бъде трудно за начинаещ дизайнер или дизайнер на оформление да се ориентира в шестнадесетичната форма на цветовата нотация, така че почти всеки графичен редактор има така наречената цветова палитра, която ви позволява да изберете желания цвят и да получите неговия код за различни цветови модели в различни бройни системи.

Някои текстови редактори, като , имат разширения за палитри, които са много удобни, когато искате бързо да изберете цвят и да го промените. Не мога да кажа нищо за това в това отношение.

Имена на цветовете в HTML

HTML атрибутите могат да приемат стойности не само десетични кодове и шестнадесетични стойности, но и специални имена на цветя. Промяната на цвета на HTML елементите с помощта на името им не е добра идея. Първо, зад името на цвета в HTML се крие кодът на RGB модела, и второ, всеки браузър показва цвета на HTML елемента, определен от името, по различен начин, това зависи само от желанието на разработчиците на браузъра.

Ето защо използването на име на цвят в HTML не се препоръчва. RGB моделът зависи от хардуера, а цветът, определен от името, зависи от браузъра и дори от неговата версия. Нека се опитаме да зададем цвета на елементите на HTML страницата, като използваме името:

< body alink = ”black ”link = ”#white” vlink=”red” bgcolor=”green” text=”blue”>

Както разбирате, има много цветове и нюанси. Струва си да се отбележи, че HTML атрибутите не ви позволяват да зададете градиент; CSS има тази опция, но ще говорим за това в друга публикация. И много цветове в HTML имат имена. Можете да намерите таблица с имена на цветове в HTML и техните RGB кодове на моя уебсайт.

Таблицата по-горе демонстрира какъв цвят ще получи HTML елементът, ако го посочите с помощта на името. Тази таблица съдържа 16 цвята и техните имена, които са одобрени от консорциума W3C и трябва да се показват еднакво във всеки браузър. Но всъщност в HTML можете да използвате около 200 имена на цветове, които се поддържат от основните браузъри, като: Opera, Chrome, Firefox, Safari, Internet Explorer (това твърдение е много противоречиво за последния).

HTML цветова палитра

Всъщност в HTML няма цветова палитра. Нека си припомним определението на думата палитра. Палитрата е малка тънка дъска с четириъгълна или овална форма, върху която художникът смесва бои и получава всякакви цветове. Понякога в палитрата се прави дупка за палеца, за да е удобно да се държи. Ще намерите изображение на палитрата по-долу. Ето защо в HTML няма палитра.

Но в различни текстови редактори има добавки за цветова палитракоито помагат бързо изберете цвета на HTML елемент. В графичните редактори също има цветова палитра, защото не е много удобно и забавно за дизайнера да седи и да изчислява: какъв цвят ще излезе при тази или онази яркост на този или онзи канал. На снимката по-долу можете да видите най-простата палитра на редактора Paint.

Обърнете внимание, че много модули и добавки за цветова палитра ви позволяват да получите цветен код не само във формат RGB/RGBA, но и във формат на други модели. Помнете че в HTML няма палитра, добре, освен ако не сте артист до мозъка на костите си и вие наричате цветовата палитра на HTML страницата тези цветовекоито са били използвани за украсата му (в края на краищата, понякога палитрата се отнася до цветовете, които даден художник използва, или цветовете, които са били използвани при създаването на определена картина).

Научете се да променяте цвета на текста в HTML

Имаме много теория за цветовете в HTML, нека да се упражняваме и да опитаме работа с цветове на HTML елементи. Първото нещо, което ще се научим да правим е промяна на цвета на текста в HTML документизползване на специални атрибути и тагове. Отворете произволен редактор и напишете следния код в него:

Научете се да работите с цвят в HTML

Промяна на цвета на текста

За да променим цвета на текста, можем да използваме уникалния атрибут на текстовия елемент BODY, а също така можем да използваме елемента FONT и неговия цветен атрибут. Този текст ще бъде сив.

< ! DOCTYPE html > < html lang = "ru-RU" > < head > < meta charset = "UTF-8" > < title >Промяна на цвета на текста в HTML документа< / title > < link rel = "stylesheet" type = "text/css" href = "style.css" / > < / head > < body text = "#ff0000" > < h1 > < font color = "rgb(0,255,0)" >Научете се да работите с цвят в HTML< / font > < / h1 > < h2 > < font color = "yellow" >Промяна на цвета на текста< / font > < / h2 > < p >За да променим цвета на текста, можем да използваме уникален текстовия атрибут BODY на елемента и също използвайте елемента FONT < / body > < / html >

Ще запазя този файл като color.html и ви съветвам да не забравяте за . Записването на цвета в десетичната бройна система не се поддържа от Chrome, Firefox и Opera, но IE разбира това цветово обозначение и подчертава HTML заглавката в зелено:

Правилното нещо, което трябва да се каже, не е промяна на цвета на текста в HTML, а промяна на цвета на шрифта в HTML. За

Цветовите кодове в CSS се използват за определяне на цвят. Обикновено цветовите кодове или цветовите стойности се използват за задаване на цвета или за цвета на предния план на елемент (напр. цвят на текста, цвят на връзката), или за цвета на фона на елемент (цвят на фона, цвят на блок). Те могат да се използват и за промяна на цвета на бутон, граница, маркер, задържане и други декоративни ефекти.

Можете да зададете вашите цветови стойности в различни формати. Следната таблица изброява всички възможни формати:

Изброените формати са описани по-подробно по-долу.

CSS цветове - шестнадесетични кодове

Шестнадесетичен код на цветае шестцифрено представяне на цвета. Първите две цифри (RR) представляват червената стойност, следващите две представляват зелената стойност (GG), а последните две представляват синята стойност (BB).

CSS цветове - кратки шестнадесетични кодове

Кратък шестнадесетичен цветен коде по-кратка форма на запис от шест знака. В този формат всяка цифра се повтаря, за да се получи еквивалентна шестцифрена стойност на цвета. Например: #0F0 става #00FF00.

Шестнадесетичната стойност може да бъде взета от всеки графичен софтуер като Adobe Photoshop, 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 използва шестнадесетични числа за определяне на цветовете. Шестнадесетичната система, за разлика от десетичната, се основава, както подсказва името й, на числото 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. Прозорец за избор на цветове във Photoshop

Уеб цветове

Ако зададете качеството на цветопредаване на монитора на 8 бита (256 цвята), тогава един и същи цвят може да се показва по различен начин в различните браузъри. Това се дължи на начина, по който се показват графиките, когато браузърът работи със собствена палитра и не може да покаже цвят, който не е в неговата палитра. В този случай цветът се заменя с комбинация от пиксели от други, близки до него цветове, които имитират дадения. За да се гарантира, че цветът остава един и същ в различните браузъри, беше въведена палитра от така наречените уеб цветове. Уеб цветовете са тези цветове, за които всеки компонент - червен, зелен и син - е зададен на една от шестте стойности - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Шестнадесетичната стойност на този компонент е посочена в скоби. Общият брой цветове от всички възможни комбинации дава 6x6x6 - 216 цвята. Примерен уеб цвят е #33FF66.

Основната характеристика на уеб цвета е, че той изглежда еднакъв във всички браузъри. В момента уместността на уеб цветовете е много малка поради подобряването на качеството на мониторите и разширяването на техните възможности.

Цветове по име

За да избегнете необходимостта да помните набор от числа, можете вместо това да използвате имената на често използвани цветове. В табл 6.3 показва имената на популярни имена на цветове.

Таблица 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.