Сиво-син цветен код. Цветът в стиловете може да се задава по различни начини: по шестнадесетична стойност, по име, във формат RGB, RGBA, HSL, HSLA

Опитайте да редактирате този пример, за да включите ваши собствени стойности, като 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 се използват като шестнадесетични цифри, а латинските букви от A до F се използват за обозначаване на числа от 10 до 15, т.е. (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“ на тази страница по-горе.

Виждаме, че цветовете са идентични.

Разрешава се съкратена нотация за HEX цветовия код: 6-цифрено число може да бъде записано като 3-цифрено число. Това е валидно само ако се повтарят две цифри в стойността на цвета на един и същи канал.

Тоест следното съкращение е приемливо:

Например цветът #ff22aa може да се запише като #f2a, а цветът #44aa22 може да се запише като #4a2.

Задаване на цвят с HSL

CSS3 има нов формат за определяне на цветове.

Форматът HSL е съкращение от английските думи: Hue (оттенък), Saturate (наситеност) и Lightness (лекота).

Оттенъкът в HSL е стойност на цвета на специално цветно колело (Фигура 2) и се определя в градуси. Ако направим аналогии с модела RGB, тогава 0° съответства на червено, 120° съответства на зелено, а 240° съответства на синьо.

Стойността на нюанса ще се промени от 0 до 359.

Втората стойност - насищане (Saturate) се задава в проценти. При 100% наситеност цветът е възможно най-"сочен", тъй като индикаторът за насищане се движи към 0%, цветът става все по-матов и се преобръща в сиво.

Третата стойност - лекота (Lightness) също се задава като процент. Колкото по-висок е процентът, толкова по-ярък ще бъде цветът. Крайните стойности от 0% и 100% ще показват съответно черни (липса на светлина) и бели (изложени) цветове и няма значение кой цвят от цветното колело е избран в първия канал. Оптималната стойност може да се счита за стойността на яркостта на цвета, равна на 50%.

Настройка на цвета с HSLA

Форматът HSLA е свързан с HSL, както RGB с RGBA. IN HSL форматА, както и в RGBA, се добавя алфа канал, отговорен за прозрачността на цветовете.

Цвят, определен в HSL формат, е по-лесен за четене. Можем да кажем, че е интуитивен. Например кодът hsl(120,60%,50%) може да представлява крайния цвят, ако в паметта има картина на цветовото колело на HSL. Това не може да се каже за форматите RGB и HEX, цветовият код, посочен в тези формати, става ясен само след изобразяване на монитора.

Нови формати в CSS3 (HSL, HSLA и RGBA) работят в браузъри от версии: IE 9.0, Opera 10.0 Firefox 3.0. Как да накарам стиловете да работят на по-стари браузъри?

Someblock (фонов цвят: rgb(255,50,50); фонов цвят: rgba(255,50,50,0.85))

Когато използвате този код в по-стари браузъри, фоновият цвят за класа .somebloсk, въпреки че не използва алфа канал, ще бъде показан в RGB формат.

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

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

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

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

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

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

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

Шестнадесетичната стойност може да бъде взета от всяка графика софтуер, като Адобе Фотошоп, Core Draw и др.

Всеки шестнадесетичен цветен код в CSS ще бъде предшестван от знак "#". Следват примери за използване на шестнадесетичен запис.

CSS цветове - RGB стойности

RGB стойносте цветен код, който се задава с помощта на свойството rgb(). Това свойство приема три стойности: по една за червено, зелено и синьо. Стойността може да бъде цяло число, от 0 до 255 или процент.

Забележка:Не всички браузъри поддържат цветовото свойство rgb(), така че не се препоръчва използването му.

По-долу е даден пример, показващ множество цветове с помощта на RGB стойности.

Генератор на цветни кодове

Можете да създадете милиони цветни кодове с нашата услуга.

Цветове за безопасен браузър

По-долу има таблица с 216 цвята, които са най-сигурните и независими от компютъра. Тези цветове в CSS варират от 000000 до шестнадесетичен код FFFFFF. Те са безопасни за използване, тъй като гарантират, че всички компютри ще показват цвета правилно, когато работят с 256 цветова палитра.

Влад Мержевич

В 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) синия компонент. Крайният резултат е този цвят.

Всеки от трите цвята - червен, зелен и син - може да приема стойности от 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-1 показва как да зададете цветовете на фона и текста на уеб страница.

Пример 6.1. Цвят на фона и текста

Примерен текст

IN този примерцветът на фона се задава с помощта на атрибута bgcolor на тага , и цвета на текста чрез атрибута text. За разнообразие стойността на атрибута text е зададена на шестнадесетично число, а bgcolor е зададена на запазена стойност. ключова думасиньозелен.