Вибір кольору

Як користуватися вибором кольору

1. Клацніть зразок під Вибрати колір, щоб відкрити палітру вашого браузера, а потім виберіть колір. Також можна ввести або вставити значення в поле Код кольору: код HEX, як-от #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) чи назву CSS на кшталт tomato.
2. Велике поле попереднього перегляду оновлюється миттєво, а код HEX написано чорним або білим – залежно від того, що краще читається на цьому тлі.
3. У розділі Коди кольору скопіюйте потрібний формат кнопкою Копіювати поруч із ним: HEX, RGB, HSL, HSV або CMYK.
4. Натисніть Випадковий колір, коли потрібне натхнення, або Піпетка з екрана (у браузерах, що її підтримують, як-от Chrome і Edge), щоб узяти зразок будь-якого пікселя на екрані, зокрема в інших вікнах.

Усе відбувається у вашому браузері: жоден колір чи зображення нікуди не надсилається.

Що означає кожен код кольору

• HEX – шістнадцяткові шість цифр, що їх використовують у HTML і CSS. Кожна пара цифр – це один канал (червоний, зелений, синій) від 00 до FF, тож #1E90FF означає червоний 30, зелений 144, синій 255.
• RGB подає ті самі три канали десятковими числами від 0 до 255. Саме це очікує більшість дизайнерських програм і бібліотек для програмування.
• HSL описує колір відтінком (кут від 0° до 360° на колірному колі), насиченістю та світлістю. Це зручно, щоб зробити колір світлішим чи темнішим, змінивши лише одне число.
• HSV (також HSB) використовує відтінок, насиченість і значення (яскравість). Це модель, що лежить в основі колірних квадратів у Photoshop, Figma та багатьох інших редакторах.
• CMYK виражає колір у відсотках блакитної, пурпурної, жовтої та чорної фарб.

Про значення CMYK

Коди CMYK – це спрощена конвертація: K = 1 − max(R, G, B), потім C = (1 − R − K) / (1 − K), так само для M і Y. Це стандартна підручникова формула, але вона не використовує ICC-профіль. Реальний друк залежить від верстата, паперу й фарб, тому типографія конвертує ваші кольори за власним профілем, і результат може відрізнятися. Використовуйте ці числа як відправну точку, а не як доказ для друку.

Як читати коефіцієнти контрасту

Під кодом HEX попередній перегляд показує Контраст на білому та Контраст на чорному, обчислені за формулою відносної яскравості WCAG 2. Для звичайного основного тексту на рівні AA потрібне співвідношення 4,5:1 або більше, а для великого тексту й елементів інтерфейсу – 3:1. Якщо ваш колір на білому досягає лише 3:1, залиште його для великих заголовків чи піктограм, а для тексту беріть темніший відтінок.

Поради

• Коди hex можна вставляти без #: 1e90ff теж працює, як і короткі форми на кшталт f60.
• Значення з прозорістю, як-от rgb(0 0 0 / 50%), приймаються; вибір кольору показує непрозорий колір.
• Власне вікно вибору кольору в браузері залежить від системи. Якщо вам потрібне точне значення, введення його в поле Код кольору завжди точне.