За съжаление, все още не е възможно да се покажат вкусовите усещания на сайта. Но това може да бъде напълно компенсирано с помощта на цветове. В крайна сметка html цветовете ви позволяват да покажете всеки от милионите нюанси. Така " цветни моливиВ комплекта му има много повече от седем.
Цветове в html
В 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 | Опера | сафари | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Браузърите поддържат някои цветове по име. Таблица 1 показва имената, шестнадесетичния код, RGB, HSL стойностите и описанието.
| име | Цвят | код | RGB | Hsl | Описание |
|---|---|---|---|---|---|
| бяло | #ffffff или #ffff | 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 | Опера | сафари | 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 | Опера | сафари | 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 цвят, добавен към свойството background-color, е валидиран, но цвят, добавен към свойството background, вече не. В същото време браузърите съвсем правилно разбират цвета и за двете свойства.
Hsl
| Internet Explorer | Chrome | Опера | сафари | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Името на формата HSL се образува от комбинация от първите букви Hue (оттенък), Saturate (наситеност) и Lightness (светлина). Hue е стойността на цвят в цветовото колело (фиг. 1) и се дава в градуси. 0 ° е червено, 120 ° е зелено, а 240 ° е синьо. Стойността на нюанса може да варира от 0 до 359.
Ориз. 1. Цветно колело
Наситеността е интензивността на цвета, измерена като процент от 0% до 100%. Стойност от 0% означава липса на цвят и нюанс на сивото, 100% е максималната стойност на насищане.
Lightness задава колко ярък е цветът и се показва като процент от 0% до 100%. Ниските стойности правят цвета по-тъмен, а високите изсветляват, екстремните стойности от 0% и 100% съответстват на черно-бялото.
HSLA
| Internet Explorer | Chrome | Опера | сафари | 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. Цветове на уеб страницата
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 |
