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

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

Назва

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

Оскільки весь список запам'ятати складно, назви в таблиці стилів застосовуються рідко.

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 вказують, в якихпропорціях використовувати основні кольори. При цьому їх не розділяють комами (color: # FFD500). Кожні два символу задають кількість червоного, зеленого і синього.

Як правило, система HEX не використовується під час експериментів, так як неможливо підібрати потрібні кольори CSS. Таблиця може допомогти в цій справі, але якщо постійнозвірятися з нею, робота затягнеться. Шістнадцяткове подання найзручніше при перенесенні шаблону з графічного редактора. Адже набагато простіше скопіювати з нього тільки одну цифру, ніж по черзі три.

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

На цей рахунок нічого конкретного сказати не можна. Якщо елементів інтерфейсу необхідна прозорість, вибирайте між RGBA і HSLA. При бажанні поекспериментувати в браузері колірний круг HLS буде найбільш зручним. Якщо ж ви використовуєте палітру або переносите дизайн з Photoshop, варто віддати перевагу шіснадцяткові коди кольорів CSS.</ Span </ p>