Від автора: в CSS налічується 149 ключових слів стандартних кольорів. За допомогою ж шістнадцятковій системи числення (або hex) можна отримати доступ до всієї RGB гамі кольорів. Розуміння принципів роботи шістнадцятковій системи числення лежить в основі вивчення hex системи кольорів.
На відміну від десятеричной системи з її значеннями від 0 до 9 в шістнадцятковій системі числення 16 розрядів: від 0 до 9 і до букви f. У самому загальному випадку компоненти hex кольори (червоний, зелений і синій) представляються парою розрядів.
Мінімальним значенням кольору в парі вважається 00. На один вище буде 01, 02 і т. д. Після 09 пара записується у формі 0a, 0b і так до 0f. Досягнувши останнього можливого значення у другому розряді, перший розряд переключається на одне значення, як у звичайних лічильниках, а другий розряд скидається. В результаті ми отримуємо 10, після чого крайній розряд починає заново підніматися вгору.
Чим більше значення компонента, тим більшу вагу вона буде мати в кінцевому кольору, де 00 – повна відсутність даного компонента, а ff – максимальну присутність в кінцевому варіанті. Шістнадцятковий колір записується зі знаком #. Тобто #000000 – чорний колір (відсутність червоного, зеленого і синього), #ffffff – білий, а #ffff00 – зелений.
Зверніть увагу на те, що hex кольору в CSS являють собою адитивну систему кольору, де відсутність відтінку розпізнається як чорний колір (тобто колір екрану за замовчуванням).
Як запам’ятати hex кольору
Простий спосіб запам’ятати шістнадцяткові кольору – думати про кожному колірному компоненті (червоний, зелений і синій), як про окремому ліхтарику з фільтром. В hex 00 означає «вимкнений», а ff означає «ліхтарик включений на повну».
Якщо в темній кімнаті включити тільки червоний ліхтарик (#ff0000), вся кімната осяється червоним кольором. Якщо включити червоний та зелений ліхтарі і схрестити промені (#ffff00), кімната стане жовтою.
Крім того, можна представити не просто ліхтарики, а перемикачі світла з регулюванням освітлення (від 00 до ff). #777777 буде середньо-сірим, а #440000 буде темно-червоним.
Скорочення
Безпечні кольори – кольори, в яких розряди компонентів мають однакове значення (00, 77, ee і т. д.). Такі кольори використовуються в разі, якщо монітор має вкрай обмежений діапазон кольорів. Це необов’язкові кольору.
Якщо ви вирішили скористатися безпечними квітами, то ви отримуєте одна перевага – шістнадцяткову запис безпечних шрифтів можна скоротити. Приміром, чорний можна записати у вигляді #000, червоний — #f00 і т. д. наприклад:
p {
color: #000;
}
У скорочених hex кольорів є один потенційний мінус: якщо випадково набрати чотири значення, а не три, то буде введений альфа-канал для браузерів, які його підтримують.
В шістнадцяткових кольорах необов’язково значення пар повинні збігатися: #3fa027 – гарний колір, але його не можна скоротити.
Важливо розуміти, що hex система відкриває вам доступ до всієї колірної гамі, так само як і дві інші основні системи кольорів в CSS (RGB, HSL). Квітів у даній системі рівно стільки ж.
Альфа-канал в hex системі кольорів
В останній специфікації CSS в шістнадцяткові кольору допускається додавання альфа-каналу або компонента прозорості у вигляді #RRGGBBAA або #RGBA.
Переваги і недоліки
Як система кольору для веб-дизайну і розробки, шістнадцяткова система має свої плюси і мінуси:
Переваги
можна дуже швидко записувати прості первинні кольори, особливо у скороченій формі (червоний, чорний та білий);
шістнадцятковий код кольору розуміється абсолютно всіма браузерами.
Недоліки
за винятком простих квітів, hex коди дуже складно записувати і підбирати точні відтінки, що призводить до використання сторонніх сервісів;
шістнадцяткові коди складні і нелогічні для веб-дизайнерів.
