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

Создавайте гармоничные цветовые палитры из любого базового цвета с помощью нашего бесплатного генератора цветовых палитр. Выбирайте из 7 правил цветовой гармонии - комплементарное, триадное, аналогичное, разделённо-комплементарное, тетрадное, монохромное или оттенки в стиле Tailwind. Каждый образец включает значения HEX, RGB и HSL, а также оценки контраста WCAG. Экспорт в переменные CSS, конфигурацию Tailwind или SVG-образцы - регистрация не требуется.

Color Palette Generator

Pick a base color, choose a harmony rule, and get a ready-to-use color palette with HEX, RGB, HSL values and WCAG contrast scores. Export as CSS variables, Tailwind config, or SVG swatches. All processing runs locally in your browser.

Base Color

Color Harmony

Quick presets:

Complementary Palette

Opposite hues - high contrast, vibrant · 5 colors · Click any swatch to copy HEX

Base

rgb(13, 162, 231)

hsl(199°, 89%, 48%)

⬜ Fail⬛ AAA

Base Light

rgb(101, 200, 246)

hsl(199°, 89%, 68%)

⬜ Fail⬛ AAA

Base Dark

rgb(8, 95, 135)

hsl(199°, 89%, 28%)

⬜ AAA⬛ Fail

Complement

rgb(231, 82, 13)

hsl(19°, 89%, 48%)

⬜ AA Large⬛ AA

Complement Light

rgb(246, 147, 101)

hsl(19°, 89%, 68%)

⬜ Fail⬛ AAA

Export Palette

CSS Variables

:root {
  --color-base: #0da2e7;
  --color-base-light: #65c8f6;
  --color-base-dark: #085f87;
  --color-complement: #e7520d;
  --color-complement-light: #f69365;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          'base': '#0da2e7',
          'base-light': '#65c8f6',
          'base-dark': '#085f87',
          'complement': '#e7520d',
          'complement-light': '#f69365',
        },
      },
    },
  },
};

Почему стоит использовать наш генератор цветовых палитр?

Мгновенная генерация цветовых палитр: создавайте гармоничные палитры из любого базового цвета мгновенно. Наш генератор цветовых палитр применяет правила теории цвета в реальном времени - выберите цвет, гармонию и получите полную палитру со значениями HEX, RGB и HSL за миллисекунды.
Безопасный онлайн-генератор цветовых палитр: вся генерация палитр происходит локально в вашем браузере - никакие данные не отправляются на сервер. Используйте наш онлайн-генератор цветовых палитр с полной приватностью. Ваш выбор цвета и детали проекта никогда не покидают устройство.
Генератор цветовых палитр - без установки: создавайте цветовые палитры прямо в любом браузере без графического софта, плагинов и загрузок. Наш генератор цветовых палитр работает на любом устройстве и где угодно - просто выберите цвет и скопируйте результат.
7 правил гармонии + оценки контраста WCAG: выбирайте из 7 правил цветовой гармонии - комплементарное, триадное, аналогичное, разделённо-комплементарное, тетрадное, монохромное и оттенки в стиле Tailwind. Каждый образец включает оценки контраста WCAG AA/AAA для белого и чёрного текста.

Типичные случаи использования генератора цветовых палитр

Дизайн интерфейсов веб-приложений: фронтенд-разработчики используют наш генератор цветовых палитр, чтобы создать согласованную цветовую систему для приложений на React, Vue или Angular. Выберите фирменный цвет, создайте комплементарную или монохромную палитру и экспортируйте её в переменные CSS или конфигурацию Tailwind одним щелчком.
Разработка фирменного стиля: дизайнеры используют наш генератор цветовых палитр для построения систем фирменных цветов из основного цвета бренда. Правила триадной и аналогичной гармонии дают профессиональные палитры, работающие в логотипах, маркетинговых материалах и цифровых продуктах.
Настройка темы Tailwind CSS: разработчики Tailwind используют наш генератор цветовых палитр, чтобы создать пользовательскую цветовую шкалу (50-900) из любого фирменного цвета. Гармония «Оттенки» создаёт совместимую с Tailwind шкалу оттенков, которую можно вставить прямо в tailwind.config.js.
Дизайн с приоритетом доступности: инженеры по доступности используют наш генератор цветовых палитр, чтобы проверить коэффициенты контраста WCAG до финализации цветовой системы. Каждый образец показывает соответствие AA и AAA для белого и чёрного текста, помогая выбрать доступные цветовые сочетания.
Дизайн лендингов и маркетинга: маркетологи и no-code дизайнеры используют наш генератор цветовых палитр, чтобы создавать визуально привлекательные цветовые схемы для лендингов. Комплементарная и разделённо-комплементарная гармонии дают контрастные палитры, привлекающие внимание к CTA.
Документация дизайн-систем: инженеры дизайн-систем используют наш генератор цветовых палитр, чтобы экспортировать листы SVG-образцов и файлы переменных CSS для документации. Экспортированный SVG показывает названия цветов, HEX-коды и значения в готовом к презентации формате.

Что такое генератор цветовых палитр?

Генератор цветовых палитр - это инструмент, который создаёт гармоничные наборы цветов из одного базового цвета с помощью правил теории цвета. Теория цвета определяет отношения между цветами на цветовом круге - противоположные, соседние или равномерно распределённые оттенки выглядят визуально сбалансированными вместе. Наш онлайн-генератор цветовых палитр применяет эти правила автоматически: выберите любой базовый цвет, тип гармонии и получите полную палитру со значениями HEX, RGB и HSL, а также оценками контраста WCAG для доступности. Вся генерация происходит мгновенно в вашем браузере - без сервера и без регистрации.

Как работает наш генератор цветовых палитр

1. Выберите базовый цвет: используйте палитру выбора цвета или введите HEX-код напрямую. Начните сразу с 6 предустановленных цветов (Океанский синий, Лесной зелёный, Оранжевый закат, Королевский фиолетовый, Розовый, Золотисто-жёлтый).
2. Выберите правило гармонии: выберите из 7 типов цветовой гармонии - комплементарное, триадное, аналогичное, разделённо-комплементарное, тетрадное, монохромное или оттенки в стиле Tailwind. Генератор применяет правило к значениям HSL базового цвета, создавая математически сбалансированную палитру.
3. Экспортируйте палитру: нажмите на любой образец, чтобы скопировать его HEX-код. Экспортируйте всю палитру как пользовательские свойства CSS, фрагмент конфигурации Tailwind, лист SVG-образцов или простой список HEX.

7 правил цветовой гармонии

Комплементарное: использует базовый цвет и противоположный ему на цветовом круге (на 180°). Создаёт контрастные, яркие сочетания - идеально для CTA и привлекающих внимание дизайнов.
Триадное: использует три цвета с равным шагом 120° на цветовом круге. Даёт сбалансированные, красочные палитры, которые выглядят энергично, но не перегружено.
Аналогичное: использует цвета, соседние с базовым (±15° и ±30°). Создаёт гармоничные, естественные палитры, которые выглядят целостно - часто в природных и спокойных дизайнах.
Разделённо-комплементарное: использует базовый цвет плюс два цвета, смежные с его комплементом (150° и 210°). Мягче по контрасту, чем комплементарное - более безопасный выбор для новичков.
Тетрадное: использует четыре цвета прямоугольником на цветовом круге (с шагом 90°). Насыщенно и сложно - лучше всего работает, когда один цвет доминирует, а остальные служат акцентами.
Монохромное: использует один и тот же оттенок при разной светлоте. Элегантно и целостно - идеально для минималистичных, изысканных дизайнов.
Оттенки (50-900): создаёт шкалу оттенков в стиле Tailwind CSS из базового цвета. Идеально для создания полноценной системы цветовых токенов для дизайн-систем и библиотек компонентов.

Понимание оценок контраста WCAG

Каждый образец в нашем генераторе цветовых палитр показывает оценки контраста WCAG для белого (⬜) и чёрного (⬛) текста. Руководство по доступности веб-контента (WCAG) требует минимального коэффициента контраста 4,5:1 для обычного текста (AA) и 7:1 для усиленной доступности (AAA). Коэффициент 3:1 допустим для крупного текста (AA Large). Используйте эти оценки, чтобы выбрать доступные цвета текста для каждого фона вашей палитры - зелёные значки означают соответствие, красные - несоответствие.

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

Генератор цветовых палитр - это инструмент, который создаёт гармоничные наборы цветов из одного базового цвета с помощью правил теории цвета. Наш онлайн-генератор цветовых палитр применяет 7 правил гармонии - комплементарное, триадное, аналогичное, разделённо-комплементарное, тетрадное, монохромное и оттенки в стиле Tailwind - чтобы получить сбалансированные палитры со значениями HEX, RGB и HSL.

Комплементарные палитры используют цвета, противоположные на цветовом круге (на 180°), создавая высокий контраст - идеально для CTA. Аналогичные палитры используют соседние цвета (±15° и ±30°), создавая гармоничные, естественные сочетания - распространённые в спокойных, природных дизайнах.

Гармония «Оттенки» создаёт шкалу оттенков в стиле Tailwind CSS из вашего базового цвета - 10 оттенков от очень светлого (50) до очень тёмного (900). Используйте её, чтобы создать полноценную систему цветовых токенов для дизайн-систем и библиотек компонентов.

Оценки контраста WCAG показывают, читается ли белый или чёрный текст на каждом цветном фоне. Коэффициент 4,5:1 соответствует AA (обычный текст), 7:1 - AAA (усиленный), 3:1 - AA Large (крупный текст). Зелёные значки означают соответствие, красные - нет.

Нажмите «Скачать Tailwind» или «Копировать» рядом с экспортом конфигурации Tailwind, чтобы получить фрагмент tailwind.config.js. Вставьте объект colors в раздел theme.extend.colors. Гармония «Оттенки» создаёт шкалу 50-900, которая бесшовно интегрируется с существующей цветовой системой Tailwind.

Да. Нажмите «Скачать SVG», чтобы получить векторный SVG-файл со всеми образцами палитры, их HEX-кодами и названиями. SVG можно импортировать в Figma, Sketch, Illustrator или любой векторный редактор для документации дизайн-системы.

Абсолютно. Вся генерация палитр происходит полностью в вашем браузере с помощью JavaScript. Ваш выбор цвета и детали проекта никогда не отправляются на сервер. Всё работает локально на вашем устройстве, обеспечивая полную приватность.

Да! Наш генератор цветовых палитр на 100 % бесплатный: без регистрации, без рекламы и без ограничений. Создавайте цветовые палитры для любого проекта сколько угодно раз - совершенно бесплатно, навсегда.