Статті про колір
Короткі практичні статті про колір для екранів: формати, контраст, палітри, темна тема і CSS. Усі числа пораховані, усі приклади можна скопіювати.
- OKLCH простими словами: формат кольору, який нарешті збігається з тим, що бачить окоOKLCH описує колір тим, наскільки світлим він здається, наскільки він насичений і який у нього тон. На відміну від HSL, однакове значення світлоти справді виглядає однаково світлим для будь-якого тону, тож палітри, hover-стани й доступний контраст стають передбачуваними.28 вересня 2026 р.3 хв читання
- APCA чи WCAG 2: якій перевірці контрасту довірятиКоефіцієнти контрасту WCAG 2 вимагає закон. APCA це новіша модель, яка значно краще передбачає читабельність, особливо в темних темах і з насиченими кольорами. Перевірка за обома дає текст, який і відповідає вимогам, і справді легко читається.28 вересня 2026 р.2 хв читання
- Колірне охоплення простими словами: sRGB, Display P3 і кольори поза охопленнямОхоплення це набір кольорів, які може показати екран або колірний простір. Веб будувався на sRGB, але більшість телефонів і багато ноутбуків тепер показують Display P3, де помітно яскравіші червоні, зелені й помаранчеві.28 вересня 2026 р.2 хв читання
- Формати кольору простими словами: HEX, RGB, HSL, OKLCH та іншіТой самий колір можна записати десятком способів. Ось що означає кожен формат, коли його використовувати і як один колір виглядає в усіх них.28 вересня 2026 р.2 хв читання
- HEX-коди кольорів простими словами: як працює #RRGGBBHEX-код кольору, наприклад #1e90ff, складається з трьох пар шістнадцяткових цифр: скільки в кольорі червоного, зеленого і синього світла, кожне від 00 (зовсім немає) до ff (повністю, 255). Четверта пара задає непрозорість: 80 означає приблизно 50%, ff означає повністю непрозорий колір.28 вересня 2026 р.5 хв читання
- Як підібрати кольорову палітру для сайту чи застосункуПочніть з одного фірмового кольору, згенеруйте з нього шкалу від 50 до 950, додайте злегка тоновані сірі й чотири кольори статусів, а потім перевірте кожну пару тексту й фону на контраст і дальтонізм. Обирайте кроки за світлотою OKLCH, а не на око: на білому фоні текст проходить WCAG AA, щойно світлота опускається приблизно до 0,55, хоч би який був тон.28 вересня 2026 р.6 хв читання
- Кольори для темної теми: як обрати фон, текст і акцентиВикористовуйте темно-сірий фон, наприклад #121212, замість чистого чорного, майже білий текст, наприклад #e5e5e5, замість чистого білого, а також світліші й менш насичені версії фірмових кольорів. Перевіряйте текст не лише за WCAG 2, а й за APCA, бо WCAG 2 завищує контраст на темних фонах.28 вересня 2026 р.6 хв читання
- Кольорові гармонії: комплементарна, аналогова, тріада та іншіКольорова гармонія бере тони під фіксованими кутами на колірному колі: 180° для комплементарної пари, по 30° для аналогової, по 120° для тріади. Якщо обертати тон в OKLCH, а не в HSL, кольори лишаються однаково світлими, і жоден не вибивається з набору випадково.28 вересня 2026 р.5 хв читання
- CSS color-mix() і відносні кольори: світлі варіанти, hover і прозорістьcolor-mix() змішує два кольори в обраному вами колірному просторі, а відносний синтаксис кольору дає змінити один канал наявного кольору, наприклад oklch(from var(--brand) calc(l - 0.1) c h). Обидва працюють у браузері, дружать зі змінними CSS і замінюють більшість колірних функцій Sass. Для світлих варіантів і hover змішуйте в oklab, для прозорості в srgb.28 вересня 2026 р.6 хв читання
- Палітра для дальтоників: як перевірити й виправити кольориПалітра для дальтоників зберігає розрізнюваність кожної пари кольорів при протанопії, дейтеранопії, тританопії та в градаціях сірого. Найнадійніше рішення не якийсь особливий тон, а різниця у світлоті: кольори, що відрізняються приблизно на 0,2 за світлотою OKLCH, лишалися різними в кожній нашій симуляції. Додайте до цього іконки чи підписи, бо сам лише колір завжди когось підведе.28 вересня 2026 р.6 хв читання
- Кольори Tailwind CSS: палітра v4 в OKLCH, власні кольори й відтінкиTailwind CSS v4 має 26 колірних шкал по 11 відтінків, від 50 до 950, тобто 286 кольорів в OKLCH у вигляді CSS-змінних на кшталт --color-blue-500. Власні кольори додаються через @theme { --color-brand-500: oklch(...) }. Однаковий номер кроку не означає однакової світлоти: blue-600 найсвітліший синій, що проходить 4,5:1 на білому, а жовтому потрібен 700.28 вересня 2026 р.6 хв читання