Палітри брендів на основі OKLCH. Оберіть базу та отримайте всі класичні гармонії плюс тональну шкалу 50–950. Фіксуйте, перегенеровуйте, експортуйте як CSS / Tailwind v4 / SCSS / JSON.
Палітри брендів на основі OKLCH. Оберіть базу та отримайте всі класичні гармонії плюс тональну шкалу 50–950. Фіксуйте, перегенеровуйте, експортуйте як CSS / Tailwind v4 / SCSS / JSON.
Наш Color Picker & Converter — для одного кольору за раз: обрати / конвертувати / скопіювати. Цей інструмент — для палітр: додайте базовий колір і отримайте цілу готову до бренду систему (гармонії + тональну шкалу) одним клацанням. Це різниця між купівлею однієї сорочки та цілим гардеробом.
HSL розставляє відтінки нерівномірно (жовтий на 60° сприймається значно яскравішим за синій на 240° за того ж значення lightness). Тріадична палітра в HSL має один зразок, що помітно яскравіший або тьмяніший за інші. OKLCH перцептивно однорідний — три зразки з однаковим OKLCH lightness виглядають однаково яскравими. Саме тому кожна сучасна дизайн-система (Apple HI, Tailwind v4, IBM Carbon) переходить на OKLCH для гармоній і шкал.
Кольори вашого бренду ніколи не залишають ваш пристрій. Відкрийте DevTools → Network, і ви побачите нуль вихідних запитів під час будь-якої операції.
Підказка: натисніть Space, щоб перегенерувати незафіксовані зразки.
Гармонії OKLCH, тональні шкали, фіксація та перегенерація, експорт design tokens — і кілька дрібниць, які роблять користування справді приємним.
Комплементарна, аналогова, тріадична, тетрадична, split-complementary, монохромна — усі обчислені в OKLCH, тож тріадична палітра з трьох насичених яскравих кольорів залишається рівномірно яскравою. Без HSL-бруду.
Додайте колір вашого бренду й отримайте тональну шкалу 50, 100, 200, … 900, 950 у формі Tailwind, згенеровану шляхом проходження lightness по кривій OKLCH. Chroma стискається на крайніх значеннях, тож кольори залишаються в межах sRGB.
Закріпіть будь-який зразок (іконка замка) і натисніть Перегенерувати (або просто Space), щоб варіювати решту в межах обраної гармонії. Швидкі ітерації, зберігайте те, що подобається.
CSS custom properties (--brand-500), Блок Tailwind v4 @theme, SCSS-мапа та JSON design tokens, готові для Style Dictionary / Figma Tokens. Плюс PNG-стрічка зразків 1200×200.
Кожен зразок показує своє співвідношення контрасту WCAG проти кращого з чорного або білого, з бейджем AA / AAA / fail. Помічайте проблеми доступності до релізу.
Кожен байт залишається на вашому пристрої. Математика OKLCH, генерація гармоній, побудова шкали, експорт PNG — усе виконується як JavaScript локально. Відкрийте DevTools → Network і переконайтеся: жодних вихідних запитів.
Чотири кроки від одного базового кольору до повної палітри, готової стати design tokens.
Клацніть на колірний прямокутник, вставте HEX або натисніть Випадкова база для натхнення. Інструмент будує всю палітру навколо цього кольору — як зразки гармонії, так і 11-крокову тональну шкалу.
За замовчуванням — Аналогова: три кольори в межах 30° від бази, ідеальні для спокійних брендових палітр. Комплементарна — для контрастних акцентів. Тріадична / Тетрадична — для редакційних / грайливих брендів. Монохромна — для тональних систем одного відтінку. Усі обчислені в OKLCH, тож залишаються рівномірно яскравими.
Клацніть іконку замка на будь-якому зразку, який хочете зберегти, потім натисніть Space (або Перегенерувати), щоб варіювати решту в межах гармонії. Швидкі ітерації. Редагуйте будь-який зразок безпосередньо, клацнувши його HEX-поле, якщо хочете задати точне значення.
Скопіюйте вивід CSS (custom properties), Tailwind v4 (блок @theme), SCSS-мапу або JSON design tokens. Або натисніть Завантажити PNG для стрічки зразків 1200×200, готової для дизайн-брифу.
Чотири поширені сценарії, де privacy-first OKLCH інструмент палітр перевершує ручне підлаштування hex-кодів у Figma.
У вас є колір бренду, потрібна система навколо нього. Додайте HEX, оберіть Аналогову, перегенеруйте, доки два допоміжні кольори не «заспівають», зафіксуйте всі три. Перейдіть у режим Тональної шкали, скопіюйте блок Tailwind @theme, вставте в app.css нового проєкту. Загальний час: 5 хвилин.
Стандартний indigo від Tailwind — не ваш бренд. Ваш бренд — #5B3FCD. Додайте його та отримайте 11-крокову тональну шкалу, що ідеально віддзеркалює інтервали Tailwind. Скопіюйте блок @theme — кожен bg-brand-500 / text-brand-700 просто працює.
Кожен зразок показує своє співвідношення контрасту WCAG + бейдж AA/AAA. Перевірте, що brand-500 досягає AA на білому, а brand-100 залишається читабельним як тонована підкладка з текстом brand-900. Виправляйте проблемні зразки, перегенеровуючи їх окремо.
Агенції / мульти-брендові компанії підтримують N паралельних дизайн-систем — однакової форми, але з різним відтінком бренду. Використовуйте той самий процес гармонії + тональної шкали для кожного бренду, експортуйте кожен як JSON tokens, додавайте у Style Dictionary. Однакова форма, чітка ідентичність.
Кольори вашого бренду ніколи не залишають ваш пристрій. Відкрийте DevTools → Network, і ви побачите нуль вихідних запитів під час будь-якої операції.
canvas; зображення зразків генерується повністю в пам'яті браузера й завантажується як Blob — нічого не йде через мережу.
Підбірка матеріалів про палітри OKLCH, колірні системи бренду та design tokens.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Наш Color Picker & Converter — для одного кольору за раз: обрати / конвертувати / скопіювати. Цей інструмент — для палітр: додайте базовий колір і отримайте цілу готову до бренду систему (гармонії + тональну шкалу) одним клацанням. Це різниця між купівлею однієї сорочки та цілим гардеробом.
HSL розставляє відтінки нерівномірно (жовтий на 60° сприймається значно яскравішим за синій на 240° за того ж значення lightness). Тріадична палітра в HSL має один зразок, що помітно яскравіший або тьмяніший за інші. OKLCH перцептивно однорідний — три зразки з однаковим OKLCH lightness виглядають однаково яскравими. Саме тому кожна сучасна дизайн-система (Apple HI, Tailwind v4, IBM Carbon) переходить на OKLCH для гармоній і шкал.
Це шкала кольорів бренду в стилі Tailwind: indigo-50 (найсвітліший), indigo-100, indigo-200, … indigo-900, indigo-950 (найтемніший). Додайте колір вашого бренду — і інструмент автоматично згенерує всі 11 кроків, проходячи OKLCH lightness по фіксованій кривій. Результат — drop-in заміна для будь-якого токена палітри Tailwind у відтінку вашого бренду.
Натисніть іконку замка у верхньому лівому куті будь-якого зразка — він залишиться на місці. Потім натисніть Перегенерувати або Space, щоб варіювати кожен незафіксований зразок у межах обраної гармонії. Саме так знаходять чудову палітру: закріпіть колір бренду, до якого вже визначилися, та досліджуйте варіації навколо нього.
Ні. Математика OKLCH, генерація гармоній, побудова тональної шкали, обчислення співвідношення контрасту, експорт PNG, кожне копіювання в буфер обміну — усе виконується в JavaScript на вашому пристрої. Відкрийте DevTools → Network і побачите нуль вихідних запитів. Вставляйте кольори свого бренду, внутрішні design tokens, палітри під NDA — нічого не залишає вашого ноутбука.