Цветни свойства на CSS. Цветни кодове

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

Заглавие

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

RGB

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


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

HSL

За да се разбере как работи системата HLS, трябва да предоставите цветово колело. В центъра му има червено, а след това (по часовниковата стрелка) всички други нюанси на дъгата. За да определите цветовете на CSS, използвайки системата HLS, трябва да зададете три параметъра:
  • нюанс (в градуси) - посоката от центъра на кръга;
  • Наситеност (като процент),колко цвят е необходим;
  • яркост (като процент).
  • Например, лилаво може да се определи, както следва: hsl (315100%, 45%). HSL е най-удобен за експерименти. Чрез изучаването на цветното колело можете приблизително да представите цвета на даден елемент, когато преглеждате лист със стилове. # Hsla-color hsla - един и същ HLS, само с алфа канал: hsl (0100%, 5006) - червен, прозрачен малко повече от половината.


    HEX

    В CSS, цветът може да се определи, като се използва шестнадесетичното представяне, например, оранжевото се задава на # FF4500. За по-добро разбиране на това какво е шестнадесетично представяне, по-дълбоко се обръща внимание на десетичната система. Той съдържа числа от 0 до 9. Когато се изисква номер, към него се добавя още един, а след това 10 е след това 100 и т.н. В шестнадесетичната система всичко е точно същото, но след 9 то отива A и B и F - същото като 15 в десетичната система. След това се добавя една цифра и резултатът е 10 равен на 16 в нашето обичайно смятане.
    Подобно на RGB, нюансите в HEX показват кои пропорции използват основните цветове. В този случай те не са разделени със запетаи (цвят: # FFD500). Всеки два знака определят броя на червените, зелените и сините. По правило HEX системата не се използва по време на експерименти, тъй като е невъзможно да се изберат необходимите CSS цветове. Таблицата може да помогне в този случай, но ако постоянно проверявате с нея, работата ще се забави. Шестнадесетичното представяне е най-удобно при прехвърляне на шаблон от графичен редактор. Много по-лесно е да копирате само от негоедна цифра от една поред три.

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

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

    Свързани публикации