Як підібрати кольори: колірні моделі, гармонії, шкали відтінків, контраст за WCAG і перевірка на дальтонізм

Один колір, вісім вкладок

Угорі сторінки — поточний колір і палітра (до 12 кольорів із назвою). З ними працюють усі вкладки: коло задає поточний колір, конвертер показує його в усіх форматах, генератор заповнює палітру, шкали ростуть із поточного кольору, перевірка контрасту й симулятор дальтонізму перевіряють усю палітру. Торкніться кольору в палітрі, щоб зробити його поточним; Замінити вибраний ставить на його місце поточний колір, а кожну зміну палітри можна скасувати (кнопка зі стрілкою або Ctrl+Z).

Введіть або вставте будь-який колір у поле вгорі: #3a7bd5, 3a7bd5, rgb(58 123 213), rgba(58, 123, 213, .5), hsl(215 65% 53%), oklch(58.6% 0.153 257), lab(51% 2.6 −53), color(display-p3 0.29 0.48 0.81), назву CSS на зразок rebeccapurple чи три числа 58, 123, 213. Кожна вкладка має власну адресу (#/wheel, #/contrast …), тож закладка відкриє потрібну.

Колірні моделі: від HEX до OKLCH

Вкладка Конвертер показує один колір у тринадцяти записах. Вони описують той самий колір, але кожен створено для своєї задачі:

Чому важливий OKLCH: у HSL жовтий і синій з однаковою світлотою 50% зовсім не схожі — один яскравий, інший темний. В OKLCH однакова світлота виглядає однаково світлою для будь-якого тону, тож рівні кроки й виглядають рівними. Тому шкали відтінків і градієнти ColorBench будуються в OKLCH та OKLab. Усі перетворення — за специфікацією CSS Color 4, з її матрицями й білими точками.

Гамут. sRGB показують майже всі екрани; Display P3 приблизно на чверть більший. OKLCH може описати кольори поза обома, тож конвертер пише, чи колір у межах sRGB і у межах Display P3. Колір поза межами не змінюється: його показують і експортують як найближчий колір, що його може показати ціль, знайдений так, як приписує CSS Color 4 (насиченість в OKLCH зменшується, доки різниця з обрізаним кольором не стане меншою за ледь помітні 0,02). На екрані P3 великий зразок поділено надвоє: ліворуч — найближчий колір у sRGB, праворуч — справжній.

CMYK — наближено. Це проста формула без ICC-профілю, та сама, що в більшості піпеток. Які фарби насправді потрібні друкарні, залежить від паперу, машини та її профілю; для друку питайте друкарню або користуйтеся програмою з керуванням кольором.

Назви. Найближча зі 148 іменованих кольорів CSS шукається за відстанню в OKLab (ΔE OK, показується, коли збіг неточний), а проста назва («темно-синій», «блідо-рожевий», «яскраво-помаранчевий») походить від тону, світлоти й насиченості OKLCH.

Колірне коло й гармонії

Коло показує тон по колу (червоний угорі, за годинниковою стрілкою) і насиченість від центру до краю. Три моделі: HSV із повзунком яскравості — класичний вибір кольору дизайнерських програм; HSL із повзунком світлоти, як hsl() у CSS; і OKLCH, де радіус — насиченість до 0,33, а повзунок — сприймана світлота. У режимі OKLCH бліда частина диска лежить поза sRGB.

Гармонія — це правило для тонів відносно основного кольору:

• Комплементарна: протилежний тон, за 180°. Найсильніший контраст; один колір — основний, другий — акцент.
• Аналогова: сусіди на 30° в обидва боки (повзунок розкиду — від 10° до 90°). Спокійно й природно.
• Тріадна: три тони через 120°. Яскраво, але врівноважено.
• Розщеплена комплементарна: двоє сусідів протилежного тону, типово 150° і 210°. Контраст як у комплементарній, але м’якший.
• Квадрат: чотири тони через 90°. Прямокутник: дві комплементарні пари, типово 0°, 60°, 180° і 240°.
• Монохромна: один тон у п’яти кроках, два темніші й два світліші, трохи менш насичені далі від основного.

Тягніть будь-який маркер — уся гармонія повертається з ним, а насиченість у всіх маркерів спільна. Дотик до диска переносить туди основний маркер. З клавіатури: Tab до маркера; стрілки вліво й вправо повертають тон на 1° (із Shift — на 10°), угору й униз змінюють насиченість на 1% (5%), Page Up і Page Down — яскравість на 5%. Зробити палітрою замінює палітру гармонією; Додати до палітри дописує її в кінець.

Гармонія дає тони, а не готовий дизайн: у більшості вдалих палітр один тон займає більшу частину площі, другий — акценти, а для тексту є нейтральні. Повзунок яскравості чи перемикання на OKLCH дає те саме правило з краще врівноваженою світлотою.

Палітри: генератор і фото

Згенерувати (або пробіл, коли нічого не у фокусі) будує нову палітру з 2–12 кольорів від випадкового основного тону за одним із кількох гармонійних візерунків: світлота розкладена від темного до світлого, а насиченість біля країв знижена, щоб кольори не кричали. Закріпіть кольори, що подобаються: вони лишаються на місці, а перший закріплений задає й основний тон. Тягніть стовпчик за ручку, щоб змінити порядок (на телефоні стовпчики — рядки), або виберіть ручку й натискайте стрілки. Торкніться коду, щоб скопіювати його, кнопки-приціла — щоб зробити колір поточним.

Палітра з фото: перетягніть або виберіть зображення; його зменшено до 400 px і прочитано у вашому браузері, у фоновому потоці. Два способи:

• k-means (старт k-means++, 14 кроків) групує до 20 000 пікселів за сприйманим кольором в OKLab і дає середнє кожної групи, від найбільшої: кольори, які помічаєш на зображенні.
• Медіанний поділ, класичний квантувач GIF, ділить до 40 000 пікселів на «коробки» з однаковою кількістю пікселів уздовж найширшого каналу: він іде за тим, скільки зображення займає кожен колір, тож дрібні яскраві деталі рідше отримують власний колір.

Смужка під результатом показує, скільки зображення займає кожен колір. Виберіть від 3 до 12 кольорів.

Шкали відтінків 50–950

Дизайн-системи на зразок Tailwind називають відтінки від 50 (майже білий) до 950 (майже чорний). ColorBench будує одинадцять кроків від поточного кольору: світлота OKLCH спадає фіксованими, на око рівними кроками від 0,971 до 0,266, сам поточний колір стає на найближчий крок (його обведено), а сусідні кроки плавно підлаштовуються до нього; насиченість найбільша в основного й згасає до обох країв, тон незмінний. Кожен крок приведено в межі sRGB, тож шкалу можна вставляти будь-куди.

Нижче — тінти (змішування з білим), тони (із сірим тієї самої світлоти) і тіні (із чорним) кроками по 10%, змішані в OKLab без брудної середини, і нейтральні з відтінком кольору: ті самі кроки світлоти з насиченістю від 0 до 0,04 у тоні поточного кольору — теплі чи холодні сірі, що роблять палітру бренду завершеною. Торкніться будь-якого зразка, щоб скопіювати його. Поле коду дає обидві шкали як CSS-змінні, змінні SCSS або конфіг Tailwind (для Tailwind v4 перенесіть ті самі значення в @theme).

Контраст: WCAG 2.2 і APCA

Виберіть колір тексту й тла (поточний колір може бути будь-яким із них). Співвідношення — за формулою WCAG 2.2: (L1 + 0,05) / (L2 + 0,05), де L — відносна яскравість світлішого й темнішого кольорів. Воно буває від 1 : 1 до 21 : 1 і показується обрізаним, а не округленим, до двох знаків, бо правила порівнюють точне значення: #777777 на білому — це 4,48, і він не проходить, а #767676 — 4,54, і проходить.

Напівпрозорий колір тексту спершу змішується з тлом — так, як його малює браузер. Найближчий колір, що проходить знаходить для тексту й для тла найближчий колір, що досягає AA (і AAA для тексту): змінюється лише світлота OKLCH — у бік чорного чи білого, залежно від того, що ближче до початкового, тож тон і насиченість лишаються настільки близькими, наскільки дозволяє sRGB. Матриця нижче перевіряє всі пари палітри плюс білий і чорний; торкніться клітинки, щоб завантажити цю пару.

APCA (Accessible Perceptual Contrast Algorithm, версія 0.0.98G-4g) — модель, запропонована для майбутнього WCAG 3. Вона дає контраст світлоти Lc приблизно від −108 до 106, де знак показує, що темніше, і враховує, що світлому тексту на темному потрібно більше контрасту, ніж навпаки. Орієнтири: Lc 90 бажано для основного тексту, 75 — мінімум для основного тексту, 60 — для іншого тексту від 16 px, 45 — для великого тексту й заголовків, 30 — для підказок і неактивного тексту, 15 — для розділювачів. APCA — ще чернетка, тож ColorBench показує її довідково; чинні вимоги й закони щодо доступності спираються на WCAG 2.2.

Дальтонізм

Приблизно кожен 12-й чоловік і кожна 200-та жінка бачать кольори інакше, найчастіше червоний і зелений. Вкладка Дальтонізм показує всю палітру такою, як її бачать за кожного типу, і відкрите зображення:

• Протанопія й дейтеранопія: немає робочих «червоних» чи «зелених» колбочок, близько 1% чоловіків кожна. Червоне й зелене зливаються; за протанопії червоне ще й темнішає.
• Протаномалія й дейтераномалія: слабкі «червоні» чи «зелені» колбочки. Дейтераномалія — найпоширеніший тип, близько 5% чоловіків. Повзунок ступеня задає, наскільки вона сильна (типово 60%).
• Тританопія й тританомалія: «сині» колбочки, рідко. Плутаються синє й зелене, жовте й рожеве.
• Ахроматопсія: кольорів немає взагалі, лише світлота. Заодно добра перевірка, як сторінка виглядатиме надрукованою в чорно-білому.

Симуляція — за моделлю Machado, Oliveira та Fernandes (2009) у лінійному sRGB; часткові типи змішують її матрицю з нормальним зором за ступенем. Під палітрою ColorBench перелічує пари, що зливаються: кольори, помітно різні за типового зору, але ближчі за ΔE OK 0,06 для вибраного типу. Число біля кожного типу показує, скільки таких пар. Ніколи не розрізняйте такі кольори лише тоном: додайте підпис, іконку, візерунок чи чітку різницю у світлоті.

Градієнти без сірої зони

Градієнт від червоного до синього, змішаний у sRGB, проходить посередині через тьмяний фіолетово-сірий; від жовтого до синього — стає майже сірим. Причина в тому, що числа sRGB — не те, як ми бачимо. Змішування в OKLab тримає рівну світлоту, а OKLCH іде по колу тонів (коротшою дугою) і зберігає насиченість, тож середина лишається яскравою. Три смужки під Інтерполяцією показують ті самі точки в кожному просторі, а примітка — скільки насиченості втрачає змішування в sRGB.

Виберіть лінійний, радіальний чи конічний градієнт, його кут чи центр і до 12 точок: торкніться смужки, щоб додати точку там, тягніть маркери, введіть значення або візьміть у точку поточний колір, або натисніть Точки з палітри. CSS використовує сучасний запис linear-gradient(90deg in oklch, …), який підтримують нинішні Chrome, Edge, Safari й Firefox, а перед ним — запасний варіант із дев’яти точок HEX із того самого змішування для старих браузерів.

Піпетка

• Узяти з екрана користується EyeDropper API браузерів Chrome, Edge й Opera на комп’ютері: будь-який піксель екрана, навіть поза браузером. У Safari, Firefox і на телефонах її немає.
• Із зображення: відкрийте зображення (зменшується щонайбільше до 1600 px); лупа показує 11 × 11 пікселів навколо вказівника. Клацніть або, на телефоні, відпустіть палець, щоб узяти колір.
• З камери: наведіть коло посередині на поверхню; колір усередині нього усереднюється приблизно десять разів на секунду. Узяти цей колір зберігає його. Колір із камери залежить від освітлення й балансу білого, тож годиться, щоб приблизно підібрати фарбу чи тканину, але не для точних значень.

Усереднення бере 1 піксель або квадрат 3 × 3, 5 × 5 чи 9 × 9, усереднений у лінійному світлі, — це згладжує шум і зерно фото. Останні 12 узятих кольорів лишаються в Нещодавно взятих.

Експорт, посилання й збережені палітри

Під вкладками палітру можна забрати як CSS-змінні, конфіг Tailwind, змінні SCSS, JSON (назва, HEX, OKLCH, RGB і чи вміщується колір у sRGB), SVG зі зразками, PNG-картку шириною 1080 px, простий текст або файл Adobe Swatch Exchange (.ase) для Photoshop, Illustrator, InDesign і Affinity. Кольори в межах sRGB записуються як HEX, ширші — як oklch(), щоб екрани P3 їх зберегли (у .ase і PNG вони стають найближчими в sRGB). Назви змінних беруться з назви CSS, коли колір збігається точно, інакше — з простої назви англійською.

Посилання містить саму палітру після #/r/: близько 50 символів для п’яти звичайних кольорів, трохи більше для кольорів широкого гамуту й назви. Хто його відкриє, побачить палітру в банері й зможе її взяти; його власна палітра спершу збережеться в історію, тож нічого не загубиться. Зберегти в історію тримає до 40 палітр у цьому браузері; Імпорт приймає JSON, експортований із ColorBench, або файл .ase.

Приватність і робота офлайн

Усі обчислення відбуваються у вашому браузері. Зображення, фото й картинка з камери читаються на вашому пристрої й нікуди не вивантажуються; камера вимикається, щойно ви залишаєте вкладку чи сторінку. Поточний колір, палітра й налаштування зберігаються в сховищі цього браузера, щоб завтра були на місці, а збережені палітри лишаються, доки ви їх не видалите. Посилання для поширення містить лише кольори й назву після #, а ця частина адреси ніколи не надсилається на сервер. Після першого відкриття ColorBench працює без інтернету, і його можна встановити як застосунок.

Обмеження

• Екрани різні. Той самий HEX виглядає по-різному на некаліброваному ноутбуці й на телефоні з повною яскравістю; перевіряйте важливі кольори на пристроях вашої аудиторії.
• CMYK — наближення без профілю, а не кольоропроба.
• Симуляція дальтонізму — модель «середньої» людини кожного типу; справжній зір буває різним, і вона нічого не каже про слабкий зір чи відблиски.
• Контраст за WCAG — мінімум, а не гарантія читабельності: тонкі шрифти, дрібний кегль і строкате тло потребують більшого. APCA — чернетка й може змінитися.
• Кольори з камери залежать від світла й обробки в камері.

Часті запитання

Чим HSL відрізняється від HSV?

Обидві описують RGB тоном і насиченістю, але третє число HSL — світлота (100% — білий для будь-якого тону, 50% — найчистіший колір), а HSV — яскравість (100% — найчистіший колір, 0% — чорний). Дизайнерські програми зазвичай показують HSV, у CSS є hsl().

Навіщо OKLCH замість HSL?

Бо його світлота — та, яку бачить око: відтінки з рівними кроками OKLCH виглядають рівномірно, а зміна тону зберігає контраст. oklch() у CSS підтримують усі основні браузери з 2023 року.

Чи проходить #777 на білому за WCAG?

Ні: 4,48 : 1 — менше за 4,5, потрібні для звичайного тексту (для великого проходить). #767676 дає 4,54 і проходить.

Чи обов’язковий APCA?

Поки ні. Це кандидат на метод контрасту для WCAG 3, ще чернетка. Для відповідності вимогам користуйтеся WCAG 2.2, а APCA — як другою думкою, особливо для світлого тексту на темному тлі.

Чому мій градієнт сірий посередині?

Він змішаний у sRGB. Перемкніть інтерполяцію на OKLCH чи OKLab і скопіюйте новий CSS.

Чому кнопка піпетки для екрана неактивна?

У вашому браузері немає EyeDropper API: він є в Chrome, Edge й Opera на комп’ютері. Візьміть колір зі знімка екрана через Із зображення або камерою.

Як перенести палітру у Figma?

Скопіюйте коди HEX (торкніться коду стовпчика) або завантажте SVG і перетягніть на полотно; для програм Adobe завантажте файл .ase.