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

Властивості 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.


Надрукувати