Уеб цветове: дефиниция, RGB, шестнадесетичен (hex) и sRGB стандарти
Уеб цветовете са цветовете, използвани при проектирането на уеб страници, както и начините за описание и изброяване на тези цветове.
Има няколко начина за избор на цветове за части от уеб страници. Цветовете могат да бъдат посочени като RGB триплет (набор от три числа) в шестнадесетичен формат (шестнадесетичен триплет). RGB триплетът може да съставлява 16 777 216 различни цвята. Много често срещани цветове могат да бъдат избрани и чрез общоприетите им имена на английски език. Често за създаване на стойности на цветовете се използва инструмент за цветове или друг графичен софтуер.
Първите версии на Mosaic и Netscape Navigator използваха имената на цветовете в X11 като основа за своите списъци с цветове. Това се дължи на факта, че и двата продукта стартираха като приложения на X Window System.
Всеки уеб цвят има своя собствена дефиниция - sRGB. Това е свързано с хроматичността на един фосфорен комплект, дадена крива на трансфер, адаптивна бяла точка и условия на гледане. Те са избрани така, че да са подобни на много реални монитори и условия на гледане. Дори и без управление на цветовете, създадените цветове са доста близки до дадените стойности. Потребителските агенти обаче могат да се различават по отношение на точността, с която показват цветовете. По-добрите потребителски агенти използват управление на цветовете, за да създадат по-добра вярност на цветовете. Това е важно за приложенията от уеб за печат.
Формати за описание на уеб цветовете
Най-често използваните формати в уеба са:
- Шестнадесетичен формат (hex) — записва се като #RRGGBB, където всяка от двойките RR, GG, BB е шестнадесетично число от 00 до FF (0–255 десетично). Пример: #FF0000 е чисто червено. Има и съкратен вариант #RGB, който се разширява до #RRGGBB (например #3A7 → #33AA77).
- RGB / RGBA — функционален синтаксис в CSS: rgb(r, g, b) със стойности 0–255 или 0–100% и rgba(r, g, b, a) с прозрачност a от 0 до 1.
- HSL / HSLA — цветово пространство по тон/наситеност/лекота: hsl(h, s%, l%) и hsla(..., a). Удобно за манипулация на нюансите и светлината.
- Именувани цветове — стандартни имена като red, navy и др.; CSS дефинира набор от именувани цветове, исторически свързан с X11 и разширен в CSS.
Как работи RGB и защо 16 777 216 цвята?
RGB представлява смесица от три канала — червен, зелен и син. Всеки канал обикновено има 256 стойности (0–255). Броят на възможните комбинации е 256 × 256 × 256 = 16 777 216. Тези стойности могат да се записват както в десетичен вид (например rgb(255,0,0)), така и в шестнадесетичен (например #FF0000).
sRGB стандартът
sRGB е стандартно цветово пространство, дефинирано така че да отразява типичните характеристики на много потребителски монитори и условия на гледане. Ключови характеристики:
- Праймери (хроматичности) на червено, зелено и синьо, зададени в CIE пространство (приблизителни xy: Red 0.64/0.33, Green 0.30/0.60, Blue 0.15/0.06).
- Бяла точка D65 (приблизително 0.3127, 0.3290 в CIE xy).
- Крива на трансфер (непряко gamma), близка до γ = 2.2, с линеен сегмент близо до нула.
Тези дефиниции гарантират, че една и съща триплет стойности ще изглежда подобно на различни екрани при липса на цветово управление. За точно възпроизвеждане при печат или в професионални приложения се използват ICC профили и управление на цветовете в браузъри и графични програми.
История и именувани цветове
Както е споменато по-горе, ранните браузъри като Mosaic и Netscape Navigator използваха списъци с имена, базирани на X11. Днес CSS дефинира набор от стандартизирани именувани цветове (около 140), които са широко поддържани от съвременните браузъри.
Съществуваше и концепцията за "уеб безопастни цветове" (web-safe palette) от 216 цвята, предназначена за 8-битовите дисплеи, но тя е информативна повече от историческа — в момента повечето екрани поддържат 24-битови (или повече) цветове.
Практически съвети за дизайнери и разработчици
- Използвайте sRGB като стандартно работно пространство за уеб дизайн, за да получите предвидима визия на различни устройства.
- За прозрачност използвайте rgba() или съвременните шестнадесетични формати с алфа канал (#RRGGBBAA), като проверите съвместимостта с целевите браузъри.
- Проверявайте контрастността между текст и фон спрямо изискванията за достъпност (WCAG) — за нормален текст се препоръчва съотношение поне 4.5:1, а за голям текст — поне 3:1.
- Използвайте инструменти за подбор на цветове, симулация на далтонизъм и цветово управление в графичен софтуер, когато е необходимо високо ниво на точност (особено за уеб към печат).
Цветово управление в браузърите
Съвременните браузъри често поддържат управление на цветовете: те могат да интерпретират вградени профили в изображенията и да преобразуват цветовете към профила на дисплея, за да се постигне по-голяма вярност. Ако браузърът няма управление на цветовете, номерираните sRGB стойности обикновено са достатъчно близки до очакваните за обикновени уеб употреби.
В заключение: разбирайки формати като RGB и шестнадесетичния запис, както и принципите на sRGB, ще можете да избирате и прилагате уеб цветове последователно и предвидимо — както за екрана, така и при преходи към печат или други медии.
Шестнайсетична тройка
Шестцифреният триплет е шестцифрено трибайтово число, използвано в HTML, CSS, SVG и други компютърни програми за представяне на цветове. Байтовете представляват червената, зелената и синята част на цвета. Един байт представлява число в диапазона от 00 до FF, или от 0 до 255 в десетичен запис. Това представлява най-малката (0) до най-голямата (255) интензивност на всеки от компонентите на цвета. Шестнайсетичният триплет се образува чрез конкатенация на три байта в шестнайсетична нотация в следния ред:
Байт 1: червена стойност (тип цвят червен)
Байт 2: стойност на зеления цвят (тип зелен цвят)
Байт 3: стойност на синьото (тип цвят синьо)
Например разгледайте цвят, при който стойностите червено/зелено/синьо са десетични числа: червено=36, зелено=104, синьо=160 (сиво-син цвят). Десетичните числа 36, 104 и 160 са подобни съответно на числата 24, 68 и А0. Шестнайсетичната тройка се получава чрез комбиниране на 6-те шестнайсетични цифри заедно, 2468A0 в този пример.
HTML уеб цветове
Създаден през 1997 г., първоначално има 16 цвята. По-късно е добавен оранжев цвят, за да станат общо 17. Първоначалните 16 са част от нещо, наречено "шаблон Windows VGA", което означава, че това са цветовете, които могат да се използват за действия като подчертаване.
| Цвят | Шестнадесетична система | Цвят | Шестнадесетична система | Цвят | Шестнадесетична система | Цвят | Шестнадесетична система |
| аква | #00FFFF | сив | #808080 | флотски | #000080 | сребро | #C0C0C0 |
| черен | #000000 | зелен | #008000 | #808000 | тил | #008080 | |
| син | #0000FF | вар | #00FF00 | лилаво | #800080 | бял | #FFFFFF |
| #FF00FF | бордо | #800000 | #FF0000 | жълт | #FFFF00 |
Списък на имената на цветовете в HTML
Таблицата по-долу съдържа всички 140 цвята на HTML. Всички съвременни браузъри ги поддържат.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Цветове на X11 (формулирани през 1987 г.)
От изобретяването на World Wide Web през 1991 г. те се наричат "уеб цветове X11".
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Диаграма на избраните уеб цветове
Тази диаграма показва избрани цветове на HTML и X11, както и избрани неофициални консенсусни уеб цветове, разработени от уеб дизайнери от 2002 г. насам. При въвеждане на код, използващ неофициалните цветове, трябва да се посочи шестнадесетичният код на цвета, вместо да се изписва името на цвета.
Уеб цветове (списък) | |||||||||||||||||||
| Розов | Maroon | Кафяв | Мисти Роуз | Сьомга | Корал | Оранжево-червен | Шоколад | Orange | Злато | Слонова кост | Жълт | Зелена морава | |||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ||
| Lime | Зелен | Пролетно зелено | Тюркоаз | Azure | Aqua/Cyan | Teal | Синьо | Военноморски флот | Тъмно виолетово | Сливи | Лилаво | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ||
| Tan | Бежов | Шистово сиво | Тъмно шистово сиво | Бял | Бял дим | Светло сиво | Silver | Тъмно сиво | Сив | Дим Сив | Черно | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
| ||||||||
Въпроси и отговори
В: Какво представляват цветовете на мрежата?
О: Уеб цветовете са цветовете, използвани при проектирането на уеб страници, както и начините за описване и изброяване на тези цветове.
В: Колко различни цвята могат да бъдат създадени с RGB триплети?
О: RGB тройките могат да създадат 16 777 216 различни цвята.
В: Има ли общоприети английски имена за някои от тези цветове?
О: Да, много често срещани цветове могат да бъдат избрани и чрез техните общоприети английски имена.
В: Какъв софтуер обикновено се използва за създаване на стойности на цветовете?
О: Често за създаване на стойности на цветовете се използва инструмент за цветове или друг графичен софтуер.
Въпрос: Каква е основата на оригиналните списъци с цветове на Mosaic и Netscape Navigator?
О: Първите версии на Mosaic и Netscape Navigator използваха имената на цветовете на X11 като основа за своите цветови списъци, тъй като и двете програми започнаха като приложения на X Window System.
Въпрос: С какво е свързано sRGB, когато става въпрос за уеб цветове?
О: Всеки уеб цвят има своя собствена дефиниция, sRGB, която се отнася до хроматичността на един фосфорен комплект, дадена крива на трансфер, адаптивна бяла точка и условия на гледане.
В: Как потребителските агенти показват тези цветове точно?
О: По-добрите потребителски агенти използват управление на цветовете, за да създадат по-добра вярност на цветовете, което е важно за приложенията за печат от уеб.
