Від автора: всім привіт. Сьогодні я б хотів поговорити про колір в веб-розробці, а саме про те, як формуються коди кольорів в html і css. Ну і взагалі про способи завдання кольору.
Немає такого сайту, де при верстці вам не довелося б вказувати колір. Ось навіть у букв, які я зараз набираю, чорний колір, а ви читаєте їх на білому тлі. Способів завдання кольору в html дуже багато, я якраз пропоную їх коротко розглянути.
Визначення кольору за допомогою ключових слів
Наприклад, color: red. І навіть ті з вас, хто спав у школі на уроках англійської, розуміють, що ми поставили червоний колір. Але ось таких ключових слів в html не сильно багато, трохи більше сотні. Тобто з їх допомогою ви не зможете поставити мільйон різних відтінків, так і запам’ятати всі назви дуже важко. Я можу лише порекомендувати тримати в голові самі основні значення, решта краще ставити не з допомогою ключових слів, а по-іншому.
За допомогою шістнадцяткового коду
Звучить, можливо, страшно, але на ділі нічого складного. Колір в такому форматі записується через ґрати, далі записується 3 або 6 символів, які і визначають відтінок. Щоб брати значення, я рекомендую вам використовувати сайт https://color.hailpixel.com
А також палітру програми Adobe Photoshop, де також відображається шістнадцятковий код або як його ще називають – hex-код.
В фотошопі ви можете на панелі встановити галочку “Тільки веб-кольору”. У цьому випадку у палітрі вам будуть запропоновані тільки так звані безпечні кольори, які підтримуються всіма браузерами. Але я вам можу сказати, що необхідність в цьому потихеньку відходить у минуле, так як сучасні браузери можуть без проблем розпізнавати мільйони відтінків.
У форматі rgb та rgba
Ці способи використовуються вже рідше, тому що зазвичай вистачає варіанти hex-кодом. Пояснити суть запису кольору rgb дуже просто. Є червоний, зелений і синій кольори. Вони є основними. Ось на підставі їх змішування, ми отримуємо потрібний нам колір. Для цього потрібно в дужках вказати першим значення насиченості червоним кольором від 0 до 255, далі через кому проробити те ж саме з зеленим і синім. Наприклад, так:
rgb(234, 17, 98);
Як ви розумієте, це дозволяє задавати мільйони різних відтінків, які будуть відрізнятися зовсім незначно. Значення (0, 0, 0) прирівнюється до чорного кольору, а (255, 255, 255) – білому. Тут діє правило, що якщо змішати всі кольори в їх максимальної насиченості, то вийде білий колір.
Rgba Формат відрізняється лише тим, що додається четверте значення – альфа-канал. Допустимо використовувати значення від 0 до 1, значення з десяткової дробом, природно, допускаються. Це дозволяє встановити напівпрозорий колір. Наприклад, якщо написати так:
rgba(0, 0, 0, 0.5)
Наш колір буде вже не абсолютно чорним, а більш світлим, а також через нього буде видно вміст заднього шару, якщо воно є.
В форматах hsl і # hsla-color hsla
Це останні формати, які ми розглянемо. У веб-розробці вони використовуються ще рідше. Розшифровується hsl так: колір, насиченість, яскравість. Перше значення задається числом від 0 до 360, а друге і третє у відсотках.
hsl(206, 50%, 42%);
Більш зрозуміло це пояснення буде для тих, хто працював з кольором більш глибоко. У будь-якому випадку, щоб розуміти, як в цьому форматі формується колір, необхідно розуміти принцип колірного кола, тому що саме на його підставі визначає колір.
Власне, # hsla-color hsla додає лише той самий альфа-канал. Тобто це ще один формат, у якому ви можете отримати напівпрозорий колір. Комусь зручніше буде використовувати rgb, комусь hsl.
Інші формати запису кольору ми розглядати не будемо, тому що цих з головою вистачає в веб-розробці.
