Генератор відтінків кольору
Перетворіть один базовий колір HEX на шкалу OKLCH, HSL або RGB з налаштовними щаблями, підказками контрасту WCAG на кожному щаблі та експортом у CSS, Tailwind і JSON.
Генератор відтінків кольору — Введіть один базовий колір у HEX і миттєво побудуйте повну шкалу за допомогою перцептивно рівномірної інтерполяції в OKLCH або HSL — стабільний відтінок за рівномірно розподіленої світлоти — чи класичного лінійного змішування RGB, з будь-якою кількістю щаблів. Зсувайте відтінок і масштабуйте насиченість, читайте на кожному щаблі підказку контрасту WCAG, що показує, які відтінки лишаються читабельними як текст на білому та на чорному, і копіюйте всю шкалу як користувацькі властивості CSS, конфігурацію кольору Tailwind або JSON. Усе виконується повністю у вашому браузері; жоден колір ніколи не надсилається на сервер.
Що таке Генератор відтінків кольору?
Генератор відтінків кольору перетворює один базовий колір HEX на повну шкалу світлих і темних відтінків, готову для дизайн-системи. Замість змішування лише лінійно в RGB він може інтерполювати в OKLCH або HSL, тож відтінок лишається стабільним, а світлота розподіляється рівномірно, даючи перцептивно збалансовану шкалу без брудних чи вицвілих щаблів. Ви обираєте, скільки щаблів створюється — від 2 до 24 або власний список міток через кому —, зсуваєте відтінок чи масштабуєте насиченість і читаєте на кожному щаблі підказку контрасту WCAG, що показує, які відтінки годяться як текст на білому та на чорному. Готову шкалу копіюють як користувацькі властивості CSS, обʼєкт конфігурації кольору Tailwind або JSON одним кліком.
Як користуватися Генератор відтінків кольору
- Введіть базовий колір у полі Базовий колір (HEX) у форматі #rrggbb або #rgb чи натисніть на великий зразок, щоб вибрати його візуально.
- Оберіть колірний простір: OKLCH або HSL для перцептивно рівномірної шкали зі стабільним відтінком чи RGB для класичного лінійного змішування.
- Задайте потрібну кількість щаблів (2–24) або відкрийте Налаштування, щоб ввести власний список щаблів через кому, зсунути відтінок, масштабувати насиченість і задати імʼя кольору для експорту.
- Читайте в кожному рядку дві клітинки контрасту — літеру A на білому та на чорному —, які підсвічуються, коли відтінок досягає WCAG AA для тексту.
- Скопіюйте HEX одного щабля або всю шкалу як змінні CSS, конфігурацію Tailwind чи JSON за допомогою кнопок копіювання.
Приклади
Рівномірна шкала OKLCH із фірмового синього
Оберіть OKLCH і залиште 11 щаблів: шкала 50–950 розподіляє світлоту рівномірно, зберігаючи синій відтінок, тож жоден щабель не виглядає брудним чи вицвілим, як буває за лінійного змішування RGB.
Власна пʼятищаблева конфігурація Tailwind
Введіть 100, 300, 500, 700, 900 як власний список щаблів, щоб отримати лише пʼять зразків, а потім скопіюйте їх як обʼєкт кольору Tailwind із цими мітками як ключами або як змінні CSS і JSON.
Поширені запитання
- Яка різниця між варіантами RGB, HSL і OKLCH?
- RGB змішує ваш колір лінійно до білого й чорного — це швидко, але в середніх тонах може виглядати нерівномірно. HSL та OKLCH натомість зберігають відтінок стабільним і розподіляють світлоту рівномірно; OKLCH перцептивно однорідний, тож кожен щабель виглядає як однаковий стрибок яскравості. Для найзбалансованішої шкали обирайте OKLCH.
- Скільки відтінків можна створити і чи можна їх називати?
- Задайте будь-яку кількість щаблів від 2 до 24. Значення 11 використовує звичну нумерацію Tailwind (50, 100…900, 950); інші значення рівномірно розподіляються від 50 до 950. У Налаштуваннях можна також ввести власний список міток через кому, який перевизначає кількість щаблів і називає кожен щабель точно так, як ви його напишете.
- Як обчислюється підказка контрасту WCAG?
- Для кожного відтінку інструмент обчислює коефіцієнт контрасту WCAG відносно чистого білого та чистого чорного за відносною яскравістю. Дві маленькі клітинки в кожному рядку показують літеру A на білому та на чорному й підсвічуються, коли коефіцієнт сягає 4,5:1 (AA для звичайного тексту); наведіть курсор, щоб побачити точний коефіцієнт і чи це AA, чи AAA.
- Чи завантажуються мої дані про колір кудись?
- Ні. Обчислення кольору, перевірки контрасту й усі три експорти виконуються повністю у вашому браузері, тож жодне значення кольору не надсилається на сервер. Інструмент працює офлайн і зберігає вашу палітру приватною.
Схожі інструменти
Код у зображення
Перетворіть фрагмент коду на зображення з підсвічуванням синтаксису прямо в браузері — з понад 20 мовами, власними темами й тлами, номерами рядків та експортом у PNG або SVG.
Перевірка контрастності кольорів
Перевірте контраст WCAG 2.1 і оцінку APCA Lc між кольором тексту та фону, перегляньте позначки AA, AAA і 3:1 та застосуйте найближчий прохідний колір.
Змішувач кольорів
Змішуйте два HEX-кольори у вибраній пропорції в колірному просторі RGB або Lab і зчитуйте отриманий проміжний колір як зразок і копійоване HEX-значення.
Симулятор дальтонізму
Завантажте зображення й перегляньте, як воно виглядає за протанопії, дейтеранопії, тританопії чи повної колірної сліпоти, а потім завантажте змодельований результат.