HedgieTools

Генератор палітр

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

Ваш основний колір

Введіть значення або виберіть колір: решта палітри будується навколо нього.

Вторинний і третинний
Формат значень

Введіть значення HEX, наприклад #2563EB, або натисніть на квадрат, щоб вибрати колір.

Ваша палітра

Натисніть на значення або відтінок (від 50 до 950), щоб скопіювати його. Олівцем можна замінити запропонований колір власним: він не зміниться, коли ви зміните основний колір.

  • —

    Основний

    ваш колір
  • —

    Вторинний

    комплементарний
  • —

    Третинний

    майже комплементарний
  • —

    Інформація

    синій
  • —

    Успіх

    зелений
  • —

    Увага

    помаранчевий
  • —

    Небезпека

    червоний
  • —

    Нейтральний

    сірий з відтінком

Світлі й темні токени

Робочі кольори вашого інтерфейсу, готові для світлої й темної теми. Кожен із них посилається на відтінок палітри. Натисніть, щоб скопіювати.

  • --backgroundТло сторінки
  • --surfaceКартки й панелі
  • --surface-mutedДругорядні області
  • --borderРамки й роздільники
  • --textОсновний текст
  • --text-mutedДругорядний текст
  • --primaryКнопки й посилання
  • --primary-hoverСтан при наведенні
  • --on-primaryТекст на основному кольорі
  • --focus-ringКонтур фокуса
  • --secondaryВторинний акцент
  • --tertiaryТретинний акцент
  • --infoІнформація
  • --info-softТло інформації
  • --successУспіх
  • --success-softТло успіху
  • --warningУвага
  • --warning-softТло попередження
  • --dangerНебезпека, помилка
  • --danger-softТло помилки

Гармонійні кольори

Класичні гармонії навколо вашого основного кольору — для ілюстрацій, діаграм чи акцентів.

  • Комплементарна

    протилежний колір

  • Розділена комплементарна

    м’якший варіант протилежного кольору

  • Аналогова

    сусідні кольори

  • Тріада

    три врівноважені кольори

  • Тетрада

    чотири кольори у квадраті

  • Монохромна

    один тон різної інтенсивності

Попередній перегляд і контраст

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

Тема попереднього перегляду
Заголовок сторінкиДругорядний, менш важливий текст під заголовком.
Картка з посиланням і кнопками.
ОсновнийВториннийТретинний
Інформація · Доступне оновлення.
Успіх · Ваші зміни збережено.
Увага · Ваша підписка скоро закінчується.
Помилка · Платіж не вдався.
  • Текст на тлі
    Співвідношення—Звичайний текст—Великий текст—AAA—
  • Другорядний текст на тлі
    Співвідношення—Звичайний текст—Великий текст—AAA—
  • Посилання на тлі
    Співвідношення—Звичайний текст—Великий текст—AAA—
  • Основна кнопка
    Співвідношення—Звичайний текст—Великий текст—AAA—
  • Вторинна кнопка
    Співвідношення—Звичайний текст—Великий текст—AAA—
  • Третинний текст на тлі
    Співвідношення—Звичайний текст—Великий текст—AAA—
  • Сповіщення: інформація
    Співвідношення—Звичайний текст—Великий текст—AAA—
  • Сповіщення: успіх
    Співвідношення—Звичайний текст—Великий текст—AAA—
  • Сповіщення: попередження
    Співвідношення—Звичайний текст—Великий текст—AAA—
  • Сповіщення: небезпека
    Співвідношення—Звичайний текст—Великий текст—AAA—

Експорт

Отримайте палітру у вибраному вище форматі (HEX).

Введіть основний колір, щоб згенерувати код.

Змінні CSS для палітри (--color-primary-500…). Токени посилаються на ці змінні; темну тему вмикає атрибут data-theme="dark" на елементі html.

Про генератор палітри

Виберіть основний колір свого бренду й отримайте все, що потрібно інтерфейсу навколо нього: супутні кольори, кольори станів, нейтральні, відтінки, світлі й темні токени, перевірку контрасту та готовий код для вставлення — не виходячи з браузера.

Повна палітра з одного кольору

Інструмент підбирає до вашого основного кольору вторинний і третинний, кольори станів (інформація, успіх, попередження, небезпека) у тому самому стилі та злегка тоновані сірі для тла й тексту.

Готові відтінки

Кожен колір має одинадцять відтінків, від найсвітлішого (50) до найтемнішого (950), — для тла, рамок, станів наведення й тексту. Якщо запропонований колір вам не підходить, замініть його власним: його відтінки оновляться разом із ним.

Світлі й темні токени

Тло, поверхня, рамки, текст, наведення, фокус і тло сповіщень: кожен робочий колір посилається на відтінок палітри — одне значення для світлої теми й одне для темної.

Перевірений контраст

Кожне поєднання тексту й тла оцінюється за правилами WCAG: 4,5:1 для звичайного тексту, 3:1 для великого та 7:1 для рівня AAA.

Експорт у CSS, Tailwind, JSON

Копіюйте кожне значення в HEX, RGB, HSL чи OKLCH або завантажте файл змінних CSS, тему Tailwind v4, конфігурацію Tailwind v3, JSON чи простий список. Усе відбувається у вашому браузері: нічого не надсилається й не зберігається.

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