Новини високих технологій
» » Властивості CSS кольору. Коди кольорів

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

16-11-2016, 12:46
5 260
Один з інструментів для зміни стилів веб-сторінок - 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.
Цікаво по темі
Індексація сайту в пошукових системах. Як відбувається індексування сайту в "Яндекс" і "Гугл"
Індексація сайту в пошукових системах. Як відбувається індексування сайту в "Яндекс" і "Гугл"
Ви бажаєте, щоб ваш сайт відображався у запитах результатів пошуковиків? Тоді він повинен бути оброблений пошуковими системами «Рамблер», «Яндекс»,
Ефекти CSS: закруглення кутів елементів
Ефекти CSS: закруглення кутів елементів
Дизайн сучасного сайту став більш прямолінійним і на передній план часто виставляється гранично строгий функціонал, реалізований у прямокутних
Overflow CSS: відображення змісту елемента
Overflow CSS: відображення змісту елемента
Не тільки поява мобільних пристроїв привело до необхідності контролювати вміст елементів, кожен кваліфікований розробник практикує управління кожним
Як зробити прозорість в "Фотошопі"?
Як зробити прозорість в "Фотошопі"?
Ця стаття-урок вчить використовувати прозорість в графічному редакторі "Photoshop". Розглянуто способи застосування прозорості як до всього
Представлення інформації в комп'ютері: приклади використання
Представлення інформації в комп'ютері: приклади використання
Якщо людина займається вивченням комп'ютерної техніки не поверхово, а досить серйозно, він неодмінно повинен знати про те, які існують форми
Оцифрування книг. Як це зробити?
Оцифрування книг. Як це зробити?
У світі з'явилося ціле покоління новітнього обладнання, яке допомагає досягти високої мети - легко ділитися знаннями та зберігати надбання попередніх