Encoders & Utilities

Color Converter & WCAG Contrast

HEX ↔ RGB ↔ HSL з палітрою і перевіркою WCAG-контрасту.

Pick or paste a color Accepts HEX, rgb()/rgba(), hsl()/hsla(). Try the eyedropper or paste from anywhere.

Try:

Про цей інструмент

Color Converter перекладає кольори між форматами, що дизайнери і розробники використовують щодня: HEX (#3366FF), RGB / RGBA, HSL / HSLA, HSV, OKLCH, CMYK плюс іменовані CSS-кольори (rebeccapurple, tomato — всі 147). Наберіть будь-який формат, і решта оновиться миттєво; альфа зберігається в форматах, що її підтримують.

Два extras роблять це більш ніж пасивним конвертером. Palette generator продукує tonal scales (50/100/.../900) і harmony groups (complementary, triadic, tetradic, split-complementary) навколо вашого базового кольору — корисно для заповнення design system. WCAG contrast checker обирає foreground і background, рахує contrast ratio за WCAG 2.2 і каже, чи пара проходить AA (4.5:1 small, 3:1 large) і AAA (7:1 small, 4.5:1 large).

Коли використовувати цей інструмент

Побудова design system. Оберіть один brand-колір, отримайте повну tonal-драбину для primary/secondary/neutral-ролей.
Аудит accessibility. Прогоніть кожну text/background-пару через contrast checker; нижче 4.5:1 = критерій WCAG AA не пройдено.
Міграція CSS. Конвертуйте старі hex-константи в OKLCH для сучасного wide-gamut workflow.
Designer-developer handoff. Перекладіть Figma RGB-значення в CSS-hex (або навпаки) без помилок округлення.

Про WCAG-contrast і OKLCH

WCAG 2.2 contrast використовує історичну формулу «relative luminance» — адекватну для більшості випадків, але відому over- і under-rate-ингом деяких color-пар. APCA (алгоритм для WCAG 3) виправляє це перцептивно-уніформною метрикою; ми показуємо обидва числа, щоб ви могли планувати наперед. OKLCH — нещодавній CSS color space, перцептивно уніформний — рівні numeric-кроки в L (lightness) виглядають рівними оку, що робить генерацію консистентних palettes значно простішою за HSL.

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

Який поріг WCAG AA?

Для normal text: contrast ratio ≥ 4.5:1 між текстом і фоном. Для large text (≥ 18pt regular або ≥ 14pt bold): ratio ≥ 3:1. AAA-тир строгіший (7:1 / 4.5:1). Більшість public-facing сайтів цільяться в AA; державні та healthcare-інтерфейси дедалі частіше вимагають AAA. Наш checker показує pass/fail для кожного порогу, тож не треба запам'ятовувати числа.

Чому HEX і RGB еквівалентні?

Це той самий колір, записаний по-різному. #3366FF — просто shorthand для «red=0x33 (51), green=0x66 (102), blue=0xFF (255)» — три байти. RGB-нотація в CSS (rgb(51, 102, 255)) пише ті самі три байти в decimal. HEX компактніший (7 символів vs ~17); RGB читабельніший, коли треба рахувати на каналах. Використовуйте те, що пасує контексту; результат ідентичний.

Що таке OKLCH і чи варто його використовувати?

OKLCH — CSS Color 4 color space, спроектований бути перцептивно уніформним — рівні numeric jumps у L (lightness), C (chroma) або H (hue) виглядають рівними оку. HSL не уніформний; яскравий жовтий на L=80 виглядає значно яскравіше, ніж navy на L=80. Для design systems і tonal palettes OKLCH драматично простіший. Підтримка браузерів відмінна (Safari 16.4+, Chrome 111+, Firefox 113+).

Чи підтримує contrast checker opacity?

Так — semi-transparent foregrounds композитуються проти background-кольору до підрахунку contrast — це те, що люди реально бачать. rgba(0,0,0,0.6) на білому рендериться як той самий колір, що #666666 на білому, і ми трактуємо їх однаково. Якщо компонуєте проти складного фону (зображення, градієнт), оберіть середній колір фону як reference.