Пошук уроків, статей та іншого контенту
Розберіться, як записувати кольори у форматах HEX, RGB та HSL і обирати відповідний формат для макета.
У CSS колір можна записати кількома способами. Найпоширеніші формати:
HEX — шістнадцятковий запис;
RGB — кількість червоного, зеленого та синього;
HSL — тон, насиченість і світлість.
Усі ці формати описують один і той самий колір, але по-різному. Наприклад, темно-синій колір можна записати так:
color: #1e3a8a;
color: rgb(30, 58, 138);
color: hsl(224, 64%, 33%);У кожному випадку браузер отримає колір для тексту, фону або іншої властивості.
HEX — це скорочення від hexadecimal, тобто «шістнадцятковий». Колір записують після символу # за допомогою цифр від 0 до 9 і літер від a до f.
Повний HEX-запис складається з шести символів:
color: #ff6600;Шість символів поділяються на три пари:
#RRGGBBRR — кількість червоного;
GG — кількість зеленого;
BB — кількість синього.
Кожна пара може мати значення від 00 до ff:
00 — мінімальна інтенсивність;
ff — максимальна інтенсивність.
Наприклад:
.red {
color: #ff0000;
}
.green {
color: #00ff00;
}
.blue {
color: #0000ff;
}
.black {
color: #000000;
}
.white {
color: #ffffff;
}Змішуючи ці три компоненти, можна отримати інші кольори:
.orange {
color: #ff6600;
}
.purple {
color: #800080;
}
.gray {
color: #808080;
}Літери в HEX-записі можуть бути великими або малими:
color: #ff6600;
color: #FF6600;Обидва варіанти означають той самий колір. Зазвичай у проєкті обирають один стиль і використовують його всюди.
Якщо кожна пара складається з однакових символів, запис можна скоротити до трьох символів:
color: #f60;Це те саме, що:
color: #ff6600;Інші приклади:
#fff /* те саме, що #ffffff */
#000 /* те саме, що #000000 */
#369 /* те саме, що #336699 */Скорочення можливе лише тоді, коли символи в кожній парі повторюються.
RGB — це модель кольору, яка використовує три компоненти:
R — red, червоний;
G — green, зелений;
B — blue, синій.
Кожен компонент має значення від 0 до 255.
color: rgb(255, 102, 0);У цьому прикладі:
червоного — 255;
зеленого — 102;
синього — 0.
Основні кольори в RGB:
.red {
color: rgb(255, 0, 0);
}
.green {
color: rgb(0, 255, 0);
}
.blue {
color: rgb(0, 0, 255);
}
.black {
color: rgb(0, 0, 0);
}
.white {
color: rgb(255, 255, 255);
}Чим більшим є значення компонента, тим сильніше цей колір впливає на результат.
Наприклад:
.first {
color: rgb(255, 0, 0);
}
.second {
color: rgb(255, 100, 0);
}
.third {
color: rgb(255, 200, 0);
}У всіх трьох кольорах максимальна кількість червоного, але поступово збільшується кількість зеленого. Тому колір змінюється від червоного до жовтого.
У сучасному синтаксисі CSS значення компонентів можна розділяти пробілами:
color: rgb(30 58 138);Також можна додати прозорість після косої риски:
background-color: rgb(30 58 138 / 50%);Це означає, що колір має прозорість 50%.
У навчальних прикладах також часто трапляється функція rgba():
background-color: rgba(30, 58, 138, 0.5);Останнє значення — альфа-канал:
0 — повністю прозорий колір;
1 — повністю непрозорий колір;
0.5 — прозорість 50%.
HSL описує колір через три характеристики:
H — hue, тон;
S — saturation, насиченість;
L — lightness, світлість.
Приклад:
color: hsl(224, 64%, 33%);Тон задається числом від 0 до 360. Це положення кольору на колірному колі:
0 — червоний;
60 — жовтий;
120 — зелений;
180 — блакитний;
240 — синій;
300 — пурпуровий;
360 — знову червоний.
.red {
color: hsl(0, 100%, 50%);
}
.green {
color: hsl(120, 100%, 50%);
}
.blue {
color: hsl(240, 100%, 50%);
}Значення 0deg і 360deg відповідають одному й тому самому відтінку. Одиницю deg можна не вказувати:
color: hsl(240, 100%, 50%);Насиченість визначає інтенсивність кольору і задається у відсотках:
0% — відсутність насиченості, сірий відтінок;
100% — максимально насичений колір.
.muted-blue {
color: hsl(220, 40%, 50%);
}
.bright-blue {
color: hsl(220, 100%, 50%);
}У цих прикладах тон і світлість однакові, але другий колір виглядає яскравішим через більшу насиченість.
Світлість визначає, наскільки колір темний або світлий:
0% — чорний;
50% — основний колір;
100% — білий.
.black {
color: hsl(220, 100%, 0%);
}
.blue {
color: hsl(220, 100%, 50%);
}
.white {
color: hsl(220, 100%, 100%);
}Прозорість можна вказати за допомогою сучасного синтаксису hsl():
background-color: hsl(220 80% 50% / 40%);Також можна використовувати hsla():
background-color: hsla(220, 80%, 50%, 0.4);Четверте значення визначає прозорість:
0 — повністю прозоро;
1 — повністю непрозоро.
Розглянемо один колір у трьох форматах:
/* HEX */
color: #2563eb;
/* RGB */
color: rgb(37, 99, 235);
/* HSL */
color: hsl(217, 83%, 53%);Вибір формату не змінює принцип роботи CSS. Браузер може використати будь-який із цих записів.
HEX добре підходить, коли:
кольори вже задані в макеті;
потрібно швидко записати фіксований колір;
у проєкті використовується палітра з HEX-значень;
важлива короткість запису.
Наприклад:
:root {
--color-primary: #2563eb;
--color-dark: #172554;
--color-light: #eff6ff;
}RGB зручний, коли:
потрібно явно бачити червону, зелену та синю складові;
необхідно додати прозорість;
колір приходить із графічного редактора або іншого джерела у форматі RGB.
.overlay {
background-color: rgb(0 0 0 / 60%);
}HSL особливо зручний для створення варіантів одного кольору:
світлішого;
темнішого;
менш насиченого;
більш насиченого.
:root {
--primary: hsl(217, 83%, 53%);
--primary-light: hsl(217, 83%, 70%);
--primary-dark: hsl(217, 83%, 35%);
}У всіх трьох змінних збережені однакові тон і насиченість. Змінюється лише світлість, тому легко отримати узгоджену палітру.
У наступному прикладі різні формати кольорів використано для різних частин картки:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Формати кольорів</title>
<style>
:root {
--background: #eff6ff;
--text: rgb(15, 23, 42);
--primary: hsl(217, 83%, 53%);
--primary-dark: hsl(217, 83%, 35%);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background-color: var(--background);
color: var(--text);
font-family: Arial, sans-serif;
}
.card {
width: min(90%, 380px);
padding: 32px;
border-radius: 16px;
background-color: white;
box-shadow: 0 12px 30px rgb(15 23 42 / 15%);
}
.card h1 {
margin-top: 0;
color: var(--primary-dark);
}
.card p {
line-height: 1.6;
}
.button {
display: inline-block;
padding: 12px 20px;
border-radius: 8px;
background-color: var(--primary);
color: white;
text-decoration: none;
}
.button:hover {
background-color: var(--primary-dark);
}
</style>
</head>
<body>
<article class="card">
<h1>Моя картка</h1>
<p>
У цьому прикладі використано HEX, RGB та HSL для опису кольорів.
</p>
<a class="button" href="#">Дізнатися більше</a>
</article>
</body>
</html>У прикладі:
фон сторінки задано у форматі HEX;
колір тексту задано через RGB;
основний і темний кольори кнопки задано через HSL;
тінь використовує сучасний RGB-запис із прозорістю.
Єдиного обов’язкового формату не існує. Вибір залежить від завдання:
Використовуйте HEX, якщо потрібен простий і компактний запис готового кольору.
Використовуйте RGB, якщо зручно працювати з червоним, зеленим і синім каналами або прозорістю.
Використовуйте HSL, якщо потрібно створити кілька відтінків одного кольору, змінюючи його світлість чи насиченість.
У межах одного проєкту дотримуйтеся узгодженого стилю, особливо якщо кольори зберігаються в CSS-змінних.
Кожен компонент RGB має бути в межах від 0 до 255:
/* Правильно */
color: rgb(30, 60, 90);
/* Неправильно для звичайного RGB-запису */
color: rgb(300, -10, 90);# у HEX/* Правильно */
color: #336699;
/* Неправильно */
color: 336699;Без символу # браузер не сприйматиме значення як HEX-колір.
У HSL друге значення — це насиченість, а третє — світлість:
color: hsl(210, 80%, 40%);210 — тон;
80% — насиченість;
40% — світлість.
В альфа-каналі використовуйте значення від 0 до 1 або від 0% до 100%:
background-color: rgb(0 0 0 / 50%);
background-color: rgba(0, 0, 0, 0.5);Технічно можна використовувати HEX, RGB і HSL одночасно, але без причини це може ускладнити підтримку стилів. Краще заздалегідь визначити стиль проєкту й дотримуватися його.
HEX записує колір у вигляді трьох пар шістнадцяткових значень: #RRGGBB.
RGB задає кількість червоного, зеленого та синього в діапазоні від 0 до 255.
HSL використовує тон, насиченість і світлість.
Для прозорості можна використовувати сучасний синтаксис rgb() і hsl() або функції rgba() і hsla().
HEX зручний для короткого запису готових кольорів.
RGB зручний для роботи з каналами та прозорістю.
HSL зручний для створення світлих, темних і менш насичених варіантів кольору.