Властивості CSS кольору. Коди кольорів

Один з інструментів для зміни стилів веб-сторінок - CSS кольору. Є кілька способів зміни цього параметра. Кожен володіє як достоїнствами, так і недоліками.

Назва

Властивість color задає колір елемента. В CSS включено 145 назв відтінків. Серед них є прості (наприклад black, blue) і складні (наприклад crimson, lawngreen). Оскільки весь список запам'ятати, що назви в таблиці стилів застосовуються рідко.

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. Коли при рахунку потрібно число, більше 9 додається ще один розряд, і виходить 10 потім 100 і т. д. В шістнадцятковій системі все точно так само, але у неї після 9 йде A та B і F - те ж, що і 15 в десятковій системі. Потім додається один розряд, і виходить 10 рівне 16 в звичному нам обчисленні. Як і в RGB, відтінки в HEX вказують, в яких пропорціях використовувати основні кольори. При цьому їх не розділяють комами (color:#FFD500). Кожні два символи задають кількість червоного, зеленого і синього. Як правило, система HEX не використовується під час експериментів, так як неможливо підібрати потрібні кольори CSS. Таблиця може допомогти в цій справі, але якщо постійно звірятися з нею, робота затягнеться. Шістнадцяткове представлення найбільш зручно при перенесенні шаблону з графічного редактора. Адже набагато простіше скопіювати з нього тільки одну цифру, ніж по черзі три.

Який спосіб кращий?

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