CSS цвят свойства. Кодове на цветовете

Един от инструментите за промяна на стиловете на уеб страниците е CSS цвят. Има няколко начина за промяна на тази настройка. Всеки от тях има както предимства, така и недостатъци.

име

Характеристиката на цвета определя цвета на елемента. В CSS са включени 145 заглавия. Сред тях са прости (например черни, сини) и сложни (например червено, зелено).

Тъй като целият списък е трудно да се запомни, имената в листа стил рядко се използват.

RGB

Повечето телевизори, смартфони и монитори работят с цветови модел RGB. Това означава, че всяка сянка може да бъде зададена от комбинация от първични цветове, които включват червено, зелено и синьо. Този подход се използва както в устройствата, така и в CSS. цвят от основния състав имат стойности от 0 до 255. А броят на възможните оттенъци е 16777216.

Тъй като RGB моделът е пряко свързан с физическите закони на цветната визуализация, черната е дефинирана като rgb (0, 0, 0), бялата е rgb (255, 255, 255). Системата RGBA е напълно аналогична на RGB, само с добавянето на алфа канал. Той влияе върху прозрачността, която съчетава оттенъка с фона. Появата на елемента ще варира в зависимост от "субстрата".

HSL

За да разберете как функционира системата HLS, трябва да предоставите цветно колело. В центъра му е червено, след това (по часовниковата стрелка) всички останали нюанси на дъгата. За дефиниция в CSS цветове, използващи системата HLS, трябва да зададете три параметъра:

• нюанс (в градуси) - посока от центъра на кръга -
• наситеността (в проценти) е колко цвят е необходим;
• яркост (в проценти).

Например, виолетовата може да бъде дефинирана по следния начин: hsl (315, 100%, 45%). HSL е най-удобна за експерименти. След като учи цветно колело, можете грубо да си представите, докато разглеждате стиловия лист, кой цвят е определен за даден елемент. HSLA - една и съща HLS, само с алфа канал: hsl (0, 100%, 50, 0.6) - червен, прозрачен малко повече от половината.

HEX

В CSS цветове може да се определи с помощта на шестнадесетично представяне, например оранжевото се определя от стойността # FF4500.

За да разберете по-добре какво представлява шестнадесетичното представяне, струва си да погледнете по-навътре в десетичната система. Той има числа от 0 до 9. Когато броячът се нуждае от число по-голямо от 9, се добавя още един бит и се оказа 10, след това 100 и т.н. В шестнадесетичната система всичко е точно същото, но в него след 9 върви A, тогава B и т.н. към F са същите като 15 в десетичната система. След това се добавя един малко и ние получаваме 10, равно на 16 в обичайното смятане.

Както и в RGB, оттенъците в HEX показват в какви пропорции да се използват основните цветове. Те не са разделени със запетайки (цвят: # FFD500). Всеки два знака посочват количеството на червено, зелено и синьо.

Като правило системата HEX не се използва по време на експерименти, тъй като е невъзможно да се намерят правилните цветове CSS. маса може да помогне по този въпрос, но ако постоянно се консултирате с нея, работата ще бъде забавена. Шестнадесетичното представяне е най-удобно при прехвърляне на шаблон от графичен редактор. В крайна сметка е много по-лесно да копирате от него само едно число, а от друга - три.

Кой е най-добрият начин?

От тази гледна точка нищо конкретно не може да се каже. Ако елементите на интерфейса се нуждаят от прозрачност, изберете между RGBA и HSLA. Ако искате да експериментирате в браузъра, цветното колело HLS ще бъде най-удобно. Ако използвате палитра или преместите дизайн от Photoshop, предпочитате шестнадесетичен цветови кодове на CSS.