Код кольори в HTML і CSS

28

Від автора: всім привіт. Сьогодні я б хотів поговорити про колір в веб-розробці, а саме про те, як формуються коди кольорів в 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.

Інші формати запису кольору ми розглядати не будемо, тому що цих з головою вистачає в веб-розробці.