Генератор відтінків кольору

Перетворіть один базовий колір HEX на шкалу відтінків 50-950 у стилі Tailwind, змішуючи його з білим і чорним; кожен щабель з-зразком і копійованим HEX.

Завантаження інструмента…

Генератор відтінків кольору — Введіть один базовий колір у HEX і миттєво отримайте шкалу відтінків з 11 щаблів (50, 100, 200 … 900, 950), побудовану шляхом змішування вашого кольору з білим для світлих щаблів і з чорним для темних — з тією самою нумерацією, що й у Tailwind CSS. Кожен щабель показує свій зразок і значення HEX з кнопкою копіювання в один клік. Усе виконується повністю у вашому браузері; жоден колір ніколи не надсилається на сервер.

Що таке Генератор відтінків кольору?

Генератор відтінків кольору — це безкоштовний онлайн-інструмент, який перетворює один базовий колір HEX на повну шкалу світлих і темних відтінків, пронумеровану від 50, 100, 200 до 900 і 950, точно як колірні токени Tailwind CSS. Він будує градацію, лінійно змішуючи ваш базовий колір з білим для світліших щаблів (50-400) і з чорним для темніших (600-950), зберігаючи 500 як сам базовий колір. Дизайнери та фронтенд-розробники використовують його для створення узгодженої колірної шкали для дизайн-системи, налаштування користувацьких властивостей CSS або кольорів теми Tailwind та вибору доступних світлих/темних варіантів фірмового кольору. Кожен щабель показано як зразок поруч зі своїм значенням HEX з кнопкою копіювання в один клік.

Як користуватися Генератор відтінків кольору

  1. Введіть базовий колір у полі Базовий колір (HEX) у форматі #rrggbb або #rgb чи натисніть на великий зразок палітри, щоб вибрати його візуально.
  2. Шкала 50-950 оновлюється миттєво: світлі відтінки (50-400) змішуються з білим, 500 — це ваш базовий колір, а темні відтінки (600-950) змішуються з чорним.
  3. Прочитайте кожен рядок, щоб поряд побачити номер щабля (50 … 950), його зразок кольору та значення HEX.
  4. Натисніть кнопку копіювання в кінці будь-якого рядка, щоб скопіювати значення HEX цього щабля до буфера обміну.
  5. Скопіюйте HEX базового кольору кнопкою копіювання поруч із полем введення, коли вам потрібен лише щабель 500.

Приклади

Найсвітліший щабель (50) із синьої основи

Вхідні дані

#4f86f7

Результат

#f6f9ff

Найтемніший щабель (950) із тієї самої основи

Вхідні дані

#4f86f7

Результат

#0b1323

Створення кольорів теми Tailwind

Введіть фірмовий колір, потім по черзі скопіюйте щаблі з 50 до 950 у колір теми Tailwind (наприклад, colors.brand) або в користувацькі властивості CSS, отримавши готову шкалу від світлого до темного, що відповідає стандартній нумерації відтінків Tailwind.

Поширені запитання

Які формати кольору можна вводити?
Базовий колір вводиться як значення HEX у форматі #rrggbb (шість цифр) або в скороченій формі #rgb (три цифри). Якщо значення не є дійсним кольором HEX, зʼявляється повідомлення 'Invalid HEX color' і шкала не створюється. Кожен щабель результату показано як значення HEX у форматі #rrggbb.
Як обчислюються відтінки?
Кожен щабель — це лінійне змішування вашого базового кольору з чистим білим або чистим чорним. Щаблі 50-400 змішуються з білим у спадних пропорціях, щабель 500 — це незмінений базовий колір, а щаблі 600-950 змішуються з чорним у зростаючих пропорціях. Нумерація збігається з колірними шкалами Tailwind CSS.
Чому щабель 500 іноді не точно відповідає номеру мого базового кольору?
Щабель 500 — це завжди саме ваш базовий колір. Інструмент не перецентровує ваш колір за перцептивною кривою світлості, тому якщо ваш ввід дуже світлий або дуже темний, світла чи темна половина шкали матиме менший діапазон — виберіть основу середньої тональності для найрівномірнішої градації.
Чи можна вибрати колір візуально замість введення HEX?
Так. Натисніть на великий зразок із вбудованою палітрою, щоб вибрати колір; поле HEX оновлюється автоматично, а вся шкала 50-950 миттєво перераховується в міру зміни.
Чи завантажуються мої дані про колір кудись?
Ні. Усе виконується повністю у вашому браузері за допомогою локальних колірних обчислень — жодне значення кольору ніколи не надсилається на сервер, тож інструмент працює офлайн і зберігає вашу палітру приватною.

Схожі інструменти

Код у зображення

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

Перевірка контрастності кольорів

Перевірте коефіцієнт контрастності WCAG між HEX-кольором тексту й фону та дізнайтеся, чи проходить він AA і AAA для звичайного й великого тексту.

Змішувач кольорів

Змішуйте два HEX-кольори у вибраній пропорції в колірному просторі RGB або Lab і зчитуйте отриманий проміжний колір як зразок і копійоване HEX-значення.

Симулятор дальтонізму

Завантажте зображення й перегляньте, як воно виглядає за протанопії, дейтеранопії, тританопії чи повної колірної сліпоти, а потім завантажте змодельований результат.