HEX-коди кольорів простими словами: як працює #RRGGBB

Як працює HEX-код кольору

Кожен колір на екрані змішується з червоного, зеленого і синього світла. HEX-код записує силу кожного з них двома символами після знака #: спочатку червоний, потім зелений, потім синій. Це і є шаблон #RRGGBB.

Символи шістнадцяткові, тобто це спосіб лічби з 16 цифрами: від 0 до 9, далі a (10), b (11), c (12), d (13), e (14) і f (15). Одна пара вміщує 256 значень, від 00 (0) до ff (255), якраз діапазон rgb().

Щоб перетворити пару на звичайне число, помножте першу цифру на 16 і додайте другу. Нижче #1e90ff, CSS-колір dodgerblue, у чотирьох форматах, а потім розрахунок пара за парою.

Отже, #1e90ff це rgb(30, 144, 255): трохи червоного, чимало зеленого і повний синій, що разом дає яскравий небесно-блакитний. Три пари по 256 значень дають 16 777 216 можливих кольорів.

Тризначне і чотиризначне скорочення HEX

Коли обидві цифри в кожній парі однакові, кожну пару можна записати один раз. #ffcc00 перетворюється на #fc0, а браузер сам подвоїть кожну цифру назад. У #1e90ff короткої форми немає, бо 1e і 90 не складаються з однакових цифр.

Коротка форма охоплює лише 4096 з 16,7 мільйона кольорів. Чотиризначний варіант так само додає непрозорість, тож #f008 означає #ff000088.

Прозорість у HEX: восьмизначний HEX з альфа-каналом

Восьмизначний код додає четверту пару для альфи, тобто непрозорості: #RRGGBBAA. 00 означає повністю прозорий, ff повністю непрозорий. Усі актуальні браузери підтримують його в CSS разом з чотиризначним скороченням #RGBA.

Щоб отримати пару, помножте непрозорість на 255, округліть до цілого і переведіть у HEX. Для 50% виходить 127,5, після округлення 128, у HEX це 80. Ось повна таблиця на прикладі #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Два нюанси. Перший: 80 це 128 з 255, тобто 50,2%, а не рівно 50%. Альфа в HEX має лише 256 кроків, тому більшість круглих відсотків передається приблизно. Другий: Android ставить альфу на початок. У ресурсі кольору Android #801e90ff означає те саме, що #1e90ff80 у CSS.

Як прочитати HEX-код на око

Колір можна вгадати, нічого не перетворюючи. Дивіться на першу цифру кожної пари, бо саме вона несе майже всю інформацію.

• Найбільша перша цифра вказує на домінантне світло. У #d2691e в червоному d, у зеленому 6, у синьому 1, тож це помаранчево-коричневий.
• Два високі канали змішуються: червоний і зелений дають жовтий, зелений і синій дають блакитний (ціан), червоний і синій дають пурпуровий або фіолетовий.
• Три однакові пари дають сірий. #333333 це темно-сірий, #999999 світло-сірий. Майже однакові пари, як у #708090, дають приглушений сіруватий колір.
• Високі цифри загалом означають світлий колір, низькі означають темний. Коли всі три пари c0 або вище, колір блідий. Коли всі три 30 або нижче, він дуже темний.
• Зелений виглядає набагато яскравішим за синій з тим самим числом. У #00ff00 світлота в OKLCH дорівнює 0,866, а в #0000ff лише 0,452.

Чому #808080 не середній сірий

#808080 стоїть рівно посередині за числами: 128 з 255 у кожному каналі. Але на око він не посередині між чорним і білим. Його світлота в OKLCH дорівнює 0,600, тож він сприймається як 60% шляху до білого.

Значення HEX уже закодовані кривою sRGB, яка приблизно, але не точно повторює роботу ока. #808080 випромінює близько 21,6% світла білого, а перцептивні моделі ставлять візуальну середину нижче: OKLCH на #636363, CIELAB на #777777.

Для тексту це важливо. Сірий #808080 на білому дає 3,95:1 і не проходить WCAG AA для основного тексту. #767676 це найсвітліший сірий, що проходить 4,5:1, а #777777, лише на крок світліший, уже не проходить з 4,48:1.

Великі чи малі літери, з # чи без

HEX-коди не залежать від регістру. #1E90FF, #1e90ff і #1E90ff це один і той самий колір у CSS, SVG і дизайн-інструментах. Оберіть один стиль і дотримуйтеся його скрізь, щоб пошук по коду знаходив кожне використання. У CSS зазвичай пишуть малими літерами.

Знак # це частина синтаксису CSS, а не кольору. Figma і багато дизайн-інструментів показують код без нього, а мови програмування часто записують його як число з префіксом 0x, як у Flutter, де Color(0xFF1E90FF) починається з пари альфи.

Як дізнатися HEX-код кольору на екрані

Скористайтеся піпеткою: це інструмент, який зчитує колір під курсором і показує його код. Такі інструменти безкоштовні і здебільшого вже встановлені.

• Chrome і Edge: відкрийте DevTools клавішею F12, клацніть будь-який кольоровий квадратик на панелі Styles і виберіть колір на сторінці значком піпетки.
• PickShade: вибір кольору на головній сторінці має в Chrome і Edge кнопку піпетки, яка бере колір будь-де на екрані.
• Windows: встановіть Microsoft PowerToys і натисніть Win + Shift + C, щоб відкрити Color Picker.
• macOS: відкрийте «Колориметр» (Digital Color Meter) у «Програми», «Утиліти». Перемкніть його на sRGB, а потім виберіть «Перегляд», «Показувати значення», «Шістнадцятково».
• Figma, Photoshop і більшість дизайн-програм: натисніть I, щоб узяти піпетку.
• На фото чи знімку екрана: відкрийте його у виборі кольору із зображення і клацніть будь-який піксель. Зображення залишається на вашому пристрої.

Узяте значення може на кілька одиниць відрізнятися від оригіналу, бо екрани застосовують колірні профілі, а зображення стискаються. Коли потрібне точне значення, копіюйте його з дизайн-файлу або CSS, а не зі знімка екрана.

Запитання і відповіді