Utilia
Категорії ▾
Мова: uk ▾

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

Створюйте світліші й темніші відтінки кольору кроками 5, 10, 20 або 25 % в OKLCH чи sRGB та експортуйте як змінні CSS або конфігурацію Tailwind.

Світліші відтінки (змішано з білим)

    Темніші відтінки (змішано з чорним)

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

      1. Виберіть Базовий колір зразком або введіть значення в Код кольору: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) чи назву CSS, наприклад teal.
      2. Виберіть Крок: 5 %, 10 %, 20 % або 25 %. За 10 % ви отримаєте світліші відтінки на 10 %, 20 % … 100 % і стільки само темніших.
      3. Виберіть, як Змішувати в: OKLCH (перцептивний) чи sRGB (класичний). Обидва ряди оновлюються одразу: Світліші відтінки (змішано з білим) та Темніші відтінки (змішано з чорним), кожен починається з основи.
      4. Клацніть Копіювати під будь-яким зразком, щоб скопіювати його код HEX.
      5. У розділі Експортувати як виберіть Змінні CSS, Конфігурація Tailwind (v3), Tailwind @theme (v4), Змінні SCSS або JSON, задайте Назва, наприклад primary чи brand, а потім Копіювати або Завантажити код.

      Інструмент працює у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.

      Відтінки, затінки й тони

      У теорії кольору tint – це колір, змішаний із білим, shade – змішаний із чорним, а tone (тон) – змішаний із сірим. Відсоток показує, скільки білого чи чорного додано: світліший відтінок на 30 % – це 70 % базового кольору й 30 % білого. На 100 % ви отримуєте чистий білий або чорний, тому останній зразок кожного ряду завжди #FFFFFF чи #000000; він позначає кінець шкали.

      Світліші й темніші відтінки – найшвидший спосіб побудувати цілісну шкалу з одного фірмового кольору: світле тло й стани наведення – зі світліших відтінків, рамки, натиснуті стани й темний текст – з темніших.

      Змішування в OKLCH чи sRGB?

      sRGB (класичний) змішує значення червоного, зеленого й синього безпосередньо. Так роблять більшість давніших генераторів, і це відповідає CSS color-mix(in srgb, …). Формула світлішого відтінку проста: канал + (255 − канал) × p, а темнішого – канал × (1 − p). Вона передбачувана, але кроки не є рівномірними за сприйняттям: сині кольори під час висвітлення схильні дрейфувати до фіолетового, а темні відтінки часто виглядають брудними.

      OKLCH (перцептивний) змішує в колірному просторі OKLCH, створеному Б’єрном Оттоссоном у 2020 році, як і CSS color-mix(in oklch, …). Світлість, насиченість і відтінок інтерполюються окремо. Білий і чорний не мають відтінку, тому базовий відтінок зберігається аж до кінця, а кожен крок змінює світлість на візуально схожу величину. Кольори, що виходили б за гаму sRGB, повертаються зменшенням насиченості, а не відсіканням каналів, тому відтінок лишається стабільним. Для дизайн-систем це зазвичай дає чистіші й рівномірніші шкали.

      Використання експорту

      • Змінні CSS створюють блок :root, як-от --primary-tint-20 і --primary-shade-40, готовий до вставлення в таблицю стилів.
      • Конфігурація Tailwind (v3) дає об’єкт colors для theme.extend.colors; після цього ви пишете класи на кшталт bg-primary-tint-20 чи text-primary-shade-60. У DEFAULT лежить основа, тож bg-primary теж працює.
      • Tailwind @theme (v4) дає змінні --color-… для конфігурації Tailwind 4 за принципом CSS-first.
      • Змінні SCSS і JSON підходять для інших інструментів збирання та дизайн-токенів.

      Назви записуються малими літерами, а пробіли стають дефісами, тож «Brand Blue» перетворюється на brand-blue.

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

      Чим відрізняються світліший і темніший відтінки?

      Світліший відтінок додає білого й робить колір світлішим; темніший додає чорного й робить його темнішим. Додавання сірого дає тон, що знижує насиченість, мало змінюючи світлість.

      Який крок вибрати?

      10 % дає дев’ять придатних кроків з кожного боку, цього досить для більшості інтерфейсів. Використовуйте 20 % або 25 % для короткої шкали в презентації, а 5 % – коли потрібні дуже тонкі варіації наведення чи рамок.

      Чому мої відтінки sRGB виглядають фіолетовими?

      Змішування синього з білим у sRGB зміщує сприйнятий відтінок до фіолетового (відомий ефект простору sRGB). Перемкніться на OKLCH (перцептивний), щоб відтінок лишався сталим.

      Чи доступні ці кольори?

      Генератор не перевіряє контраст. Перевіряйте пари, які плануєте використовувати, наприклад текст на світлішому відтінку, засобом перевірки контрасту: WCAG вимагає 4,5:1 для звичайного тексту.

      Чи можна використати результат зі шкалою Tailwind 50–950?

      Експорт використовує назви у відсотках (tint-10, shade-30), щоб значення залишалося зрозумілим. Якщо вам більше до вподоби числові ключі, перейменуйте кілька кроків в експортованому коді, наприклад світліший відтінок 90 % як 50, а темніший 80 % як 950.

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