Модуль 7

Кольори та формати кольорів (HEX, RGB, HSL)

Ось ваш урок у стилі CS50! 🚀

🎨 Урок: Кольори та формати (HEX, RGB, HSL)

1. 🔥 Вступ: "Я хочу червоний!"

Уявіть, що ви робите ремонт і кажете маляру телефоном: "Пофарбуй стіну в червоний колір". Ви повертаєтеся додому, очікуючи побачити шляхетний бордовий (як витримане вино), а там... кислотний яскраво-червоний, від якого течуть сльози.

Хто винен? Маляр? Ні. Винні неточні дані.

Для комп’ютера слово "червоний" — це ніщо. Це абстракція. Ваш монітор — це мільйони маленьких лампочок (пікселів). Щоб показати вам правильний колір, браузеру потрібна точна інструкція: наскільки сильно увімкнути кожну лампочку.

Сьогодні ми розберемося, як говорити з комп’ютером мовою кольору так, щоб він вас розумів ідеально. Ми розглянемо три діалекти цієї мови: RGB, HEX та HSL.

Питання до вас: Як ви думаєте, чому дизайнери та розробники не використовують просто назви на кшталт DarkBlue або LightPink для всього? (Спойлер: тому що "LightPink" у вашій уяві та в стандарті HTML можуть бути зовсім різними речами).

2. 🧠 Теоретична база: Що там "під капотом"?

Давайте зазирнемо всередину вашого екрана.

🔴🟢🔵 RGB (Red, Green, Blue) — Фізика світла

Це база. Ваш екран працює за принципом адитивного змішування кольорів. Це означає, що ми починаємо з чорного екрана (темрява) і додаємо світло.

Кожен піксель складається з трьох "субпікселів": Червоного (Red), Зеленого (Green) і Синього (Blue). У форматі RGB ми кажемо комп’ютеру, наскільки яскраво світити кожним з них: * 0 — лампочка вимкнена. * 255 — лампочка світить на максимум.

Логіка: * rgb(0, 0, 0) = Темрява (Чорний). * rgb(255, 255, 255) = Усі прожектори на повну (Білий). * rgb(255, 0, 0) = Тільки червоний.

#️⃣ HEX (Hexadecimal) — Для роботів (і лінивих розробників)

Ви бачили ці дивні коди: #FF5733. Виглядає страшно? Насправді це той самий RGB, просто записаний коротше.

  • Перші дві цифри/букви — це Red.
  • Другі дві — Green.
  • Треті дві — Blue.

Чому літери? Тому що це шістнадцяткова система (0-9, а потім A, B, C, D, E, F). * 00 — це 0 (вимкнено). * FF — це 255 (максимум).

Інтуїтивно: Це як скорочене посилання (short link). Браузеру легше читати короткий код #000000, ніж довгий rgb(0, 0, 0).

🎨 HSL (Hue, Saturation, Lightness) — Для людей

RGB та HEX чудові для машин, але жахливі для людей. Якщо я скажу вам: "Додай трохи більше червоного до цього зеленого", ви не зможете швидко порахувати це в голові у форматі #4FACA1.

Тут на сцену виходить HSL. Це те, як мислять художники: 1. Hue (Відтінок): Уявіть колірне коло (градуси від 0 до 360). 0 — червоний, 120 — зелений, 240 — синій. 2. Saturation (Насиченість): Скільки фарби на пензлику? 0% — сірий (знебарвлений), 100% — соковитий колір. 3. Lightness (Світлота): Скільки білого чи чорного додали? 0% — чорний, 50% — нормальний колір, 100% — білий.

Що запам’ятати: HSL — найкращий друг, коли вам треба зробити кнопку "трохи темнішою при наведенні".

3. 🧪 Приклади (від простого до реального)

Приклад 1: Чистий Червоний

Давайте створимо найяскравіший червоний колір.

Як це виглядає в коді:

/* RGB: Червоний на макс, інші вимкнені */
color: rgb(255, 0, 0);

/* HEX: FF (макс) для червоного, 00 для інших */
color: #FF0000;

/* HSL: 0 градусів (червоний), 100% насиченість, 50% світлота */
color: hsl(0, 100%, 50%);

Результат: Це один і той самий колір! Три різні способи сказати "увімкни червону лампочку".

Приклад 2: "Facebook Blue" (Реальний кейс)

Припустимо, ми робимо клон Facebook. Нам потрібен приємний синій.

RGB: rgb(66, 103, 178) — спробуйте вгадати колір, дивлячись на цифри. Важко, так? HEX: #4267B2 — компактно, зручно копіювати. HSL: hsl(220, 46%, 48%) — О! Ми бачимо, що це відтінок 220 (синій спектр), середня насиченість і середня яскравість.

Запитання: Що станеться, якщо в HSL я зміню останню цифру з 48% на 20%? (Подумайте секунду...) . . . Відповідь: Колір стане темно-синім, майже нічним. Ми просто зменшили яскравість.

Приклад 3: Прозорість (Alpha Channel)

Іноді нам треба бачити крізь елемент (наприклад, меню поверх фото). Для цього додаємо четвертий параметр — Alpha (прозорість). * rgba(0, 0, 0, 0.5) — напівпрозорий чорний. * hsla(0, 0%, 100%, 0.3) — 30% видимість білого.

HEX теж це вміє (наприклад #00000080), але це виглядає як магія і читається важко, тому частіше використовують rgba.

4. 🛠 Практична частина

Час "забруднити руки" кодом! Відкрийте редактор (або уявіть його).

🔹 Завдання 1: Реплікація Напишіть код для чистого зеленого кольору у трьох форматах: 1. RGB 2. HEX 3. HSL

🔹 Завдання 2: Зміна настрою У вас є колір hsl(200, 50%, 50%) (блакитний). * Зробіть його пастельним (блідим), не змінюючи відтінок. Який параметр треба змінити? * Зробіть його дуже темним. Який параметр змінюємо тепер?

🔹 Завдання 3: Дебаггинг Ви написали код: color: rgb(300, 0, 0);. Браузер показує червоний, але щось не так. * Чому число 300 — це проблема, хоча воно і працює (або ігнорується)? Який максимум?

🔹 Завдання 4: Реальна задача У вас є кнопка кольору #FF5733. Дизайнер просить: "Зроби так, щоб при наведенні мишкою вона ставала трохи світлішою". * Переведіть колір в HSL (можна використати гугл). * Напишіть новий HSL код для стану наведення (hover).

🔹 Завдання 5: А що, якщо... Що станеться, якщо ви встановите hsl(0, 0%, 50%)? Якого кольору буде елемент? (Підказка: насиченість нуль).

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі?

  1. Новачок намагається підібрати HEX-код вручну (#123456) і дивується результату.

    • Профі використовує Color Picker (у вбудованих інструментах розробника в браузері або у Figma) і просто копіює код.

  2. Новачок використовує різні формати впереміш: тут RGB, там HEX, там HSL.

    • Профі дотримується консистенції. Зазвичай у проєкті використовують HEX для основних кольорів, а RGB/HSL — коли потрібна прозорість або програмна зміна кольору.

  3. Супер-сила HSL: Досвідчені розробники люблять HSL при створенні тем (світла/темна). Ви можете задати один базовий "Hue" (відтінок бренду) і змінювати тільки "Lightness" для фону, тексту та рамок. Це робить код неймовірно гнучким.

6. 🧩 Підсумок

Отже, що ми маємо? * Кольори на екрані — це суміш червоного, зеленого та синього світла (RGB). * HEX (#FF0000) — це компактний запис для комп'ютера. * HSL — це логічний запис для людини (відтінок, насиченість, світло).

Тепер ви можете не просто "фарбувати", а керувати кольором. Ви можете зробити кнопку прозорою, створити логічну палітру відтінків або виправити помилку, коли дизайнер дав вам "не той синій".

Що далі? Тепер, коли наші елементи мають правильний колір, вони все ще виглядають як пласкі прямокутники. На наступному уроці ми навчимося їх розміщувати та рухати. Готуйтеся до теми CSS Box Model (Блокова модель) — фундаменту всього вебу!

A тепер... за роботу! 💻

← До списку уроків Наступний урок →