Как сгенерировать цветовую палитру из одного цвета бренда?

Введите HEX-код, название цвета, например teal, или значение rgb() / hsl() в поле Базовый цвет и нажмите Enter. Затем выберите тип: Палитра бренда, Дополнительные, Триадические или Монохроматические, и кликните по образцу, чтобы скопировать его.

Какие форматы экспорта поддерживает генератор палитр?

Цвета можно скопировать в форматах hex, rgb, hsl или oklch, а также экспортировать в файлы CSS, SCSS, JSON, шкалу Tailwind 50-950, PNG, SVG, GIMP/Krita GPL, Adobe ASE или Photoshop ACO. Доступные опции зависят от настроек экспорта.

Как проверить, читаемы ли цвета моей палитры на белом или чёрном фоне?

Рядом с каждым цветом отображаются метки На белом и На чёрном с уровнями WCAG: AAA, AA, AA крупный или Не проходит. В разделе Проверка текста и фона также можно выбрать цвет текста и фон, чтобы протестировать конкретную пару.

Как зафиксировать одни цвета и перемешать остальные?

Нажмите Зафиксировать цвет на образцах, которые хотите сохранить, затем нажмите Перемешать. Зафиксированные цвета останутся, а остальные изменятся. Кнопка Изменить цвет позволяет изменить отдельный образец, после чего палитра помечается как изменённая.

Можно ли поделиться палитрой или взять цвет с экрана?

Кнопка «Поделиться результатом» создаёт ссылку с базовым цветом, типом палитры и всеми правками, так что любой, кто её откроет, увидит ту же палитру. На телефоне открывается меню «Поделиться», на компьютере ссылка копируется. «Взять с экрана» использует браузерную пипетку EyeDropper, которая доступна только в поддерживающих её браузерах, в основном на базе Chromium.

Это правда бесплатно?

Да. Все инструменты бесплатны, без учётной записи и банковской карты. Работа выполняется на вашем устройстве, а не на наших серверах, что и позволяет оставаться бесплатными.

Работает на мобильных устройствах?

Да. Работает в современных мобильных браузерах на iOS и Android, ничего устанавливать не нужно.

🎨

Генератор цветовых палитр — бесплатно

Генерируйте дополнительные, аналогичные, триадные и монохроматические цветовые палитры из любого базового цвета. Копируйте HEX-коды одним нажатием.

Работает в браузереБез регистрации и всплывающих оконРегистрация не требуетсяБесплатно навсегда

Работает офлайн после загрузки

Базовый цвет

Введите hex-код, название цвета вроде teal или tomato, либо rgb(20, 184, 166) / hsl(174, 80%, 40%) и нажмите Enter.

Палитра бренда · 7 цветов

Формат копирования

Экспорт:Hex-подписи на PNG/SVG

Основной

На белом 2,5Не проходит

На чёрном 8,4AAA

Акцентный

На белом 2,9Не проходит

На чёрном 7,2AAA

Светлый тон

На белом 1,1Не проходит

На чёрном 19,4AAA

Тёмный тон

На белом 9,0AAA

На чёрном 2,3Не проходит

Светлый нейтральный

На белом 1,1Не проходит

На чёрном 19,3AAA

Средний нейтральный

На белом 4,1AA крупный

На чёрном 5,1AA

Тёмный нейтральный

На белом 16,1AAA

На чёрном 1,3Не проходит

Проверка текста и фона

Цвет текстаФон

Пример крупного заголовка

Пример основного текста для этой пары

8,44:1Обычный текст AAAКрупный текст AAA

Попробуйте

Нужны цвета с фотографии? Воспользуйтесь извлечением цветов из изображения

Частые применения

Генерировать цветовые палитры для веб-дизайнаСоздавайте гармоничные цветовые схемы для веб-сайтов, веб-приложений и компонентов пользовательского интерфейса.
Создать цветовые палитры брендаРазработайте полную систему цветов бренда из одного цвета бренда — основной, дополнительный, акцент и нейтральные.
Генерировать цветовые палитры для искусства и иллюстрацийСоздавайте гармоничные цветовые комбинации для цифрового искусства, иллюстраций и творческих проектов.
Генерировать цветовые стили для FigmaСоздавайте цветовые палитры для использования в качестве стилей цвета Figma и основ дизайн-токенов.
Создать цветовые палитры для темного режимаГенерируйте светлые и темные варианты вашей цветовой палитры для поддержки темного режима.

Как это работает

Инструмент построен без внешних библиотек — вся математика цвета работает в написанном вручную JavaScript прямо в вашем браузере. Он конвертирует выбранный вами цвет между hex и HSL, затем применяет классические правила гармонии теории цвета (комплементарная, триадная, аналоговая и т.д.) через арифметику на цветовом круге для создания каждой палитры.

1
Конвертация Hex-в-HSL
Когда вы выбираете цвет, инструмент разбирает строку hex на компоненты RGB и конвертирует их в HSL (тон, насыщенность, светлота). Тон — это позиция 0–360 градусов на цветовом круге; вся математика палитры происходит в этом пространстве.
2
Арифметика тона для гармонии
Каждый тип палитры — это фиксированная формула вращения, применённая к базовому тону. Комплементарная добавляет 180°, триадная добавляет 120° и 240°, тетрадная шагает на 90°, раздельно-комплементарная использует 150° и 210°. Монохромная и оттенки сохраняют тон и насыщенность постоянными, шагая светлотой вверх и вниз.
3
Вывод HSL-в-hex
Каждая вычисленная тройка HSL преобразуется обратно в цвет hex по стандартной формуле цветности. Результаты отображаются в виде цветовой полосы с автоматически контрастными метками (тёмный текст на светлых образцах, светлый текст на тёмных), определяемыми простым порогом яркости.
4
Экспорт в предпочитаемом вами формате
Палитру можно скопировать как строки hex или экспортировать как файл переменных CSS (:root { --color-1: … }), переменные SCSS, фрагмент конфигурации Tailwind, объект JSON, или полосу цветов PNG. Экспорт PNG использует API Canvas браузера (toDataURL) для рисования каждого образца с его меткой hex — всё генерируется локально по клику.

Генератор цветовых палитр — бесплатно

Проверка текста и фона

Частые применения

Как это работает

Похожие инструменты

Генератор случайных цветов

Извлечение цветовой палитры из изображения

Выбор цвета и генератор палитр

Часто задаваемые вопросы