Генератор цветовых палитр
Создавайте цветовые палитры по правилам гармонии или из фотографии. Смотрите оттенки, контраст и градиенты и экспортируйте в CSS, SCSS, Tailwind, JSON, Swift, Android или Figma.
Загрузка: Генератор цветовых палитр…
Ваши файлы не покидают устройство
Как пользоваться: Генератор цветовых палитр
- 1
Откройте «Генератор цветовых палитр» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Об инструменте
Этот генератор цветовых палитр подбирает гармоничные цветовые схемы для сайтов, приложений, брендов и иллюстраций. Начните с базового цвета и правила гармонии или загрузите фото и получите его основные цвета. Для каждого цвета показаны оттенки, значения HEX, RGB и HSL и проверка контраста, а всю палитру можно сразу экспортировать в код или в программу для дизайна.
Как создать палитру
- Выберите базовый цвет или загрузите изображение, чтобы извлечь из него палитру.
- Выберите правило гармонии (см. ниже) или начните с готового набора.
- Настройте цвета и нажмите на любой цвет или оттенок, чтобы скопировать его значение.
- Проверьте результаты контраста WCAG, прежде чем использовать цвета для текста.
- Экспортируйте палитру в нужном формате.
Правила цветовой гармонии
- Комплементарная: два цвета на противоположных сторонах цветового круга, для сильного контраста.
- Аналоговая: соседние цвета на круге, спокойные и естественные.
- Триада: три равноудалённых цвета, яркие, но сбалансированные.
- Тетрада и двойная расщеплённая: четыре цвета для богатых схем; пусть один из них доминирует.
- Расщеплённая комплементарная: базовый цвет и два соседа его дополнительного цвета, мягче, чем комплементарная.
- Монохромная: светлые и тёмные варианты одного оттенка, элегантно и беспроигрышно.
- Своя: выбирайте каждый цвет сами.
Форматы экспорта
Скопируйте или скачайте палитру как пользовательские свойства CSS, переменные SCSS, конфигурацию цветов Tailwind, JSON, Swift (iOS), XML цвета Android или готовый для Figma список. Конструктор градиентов создаёт линейные, радиальные и конические градиенты из ваших цветов и копирует CSS.
Советы для удачной палитры
- Используйте правило 60/30/10: основной цвет для большей части пространства, второстепенный цвет и акцент для кнопок и выделений.
- Проверяйте контраст текста. WCAG AA требует не меньше 4,5:1 для обычного текста, AAA требует 7:1.
- Добавьте нейтральные цвета. Большинству интерфейсов нужна шкала серого помимо фирменных цветов.
- Проверьте тёмную тему, если она есть в продукте: насыщенные цвета могут «светиться» на тёмном фоне.
Нужен только градиент? Попробуйте генератор CSS градиентов. Чтобы подробно проверить пару цветов, откройте проверку контраста.
Частые вопросы
Можно ли получить палитру из изображения?
Да. Загрузите фото, и инструмент извлечёт его основные цвета в палитру, которую можно редактировать и экспортировать.
Что такое цветовая гармония?
Правило подбора цветов, которые хорошо сочетаются, по их положению на цветовом круге: например, комплементарная, аналоговая или триада.
Можно ли экспортировать палитру в Tailwind CSS?
Да. Выберите экспорт Tailwind, чтобы получить конфигурацию цветов для вставки в проект. Также доступны форматы CSS, SCSS, JSON, Swift, Android и Figma.
Как понять, будет ли текст читаемым на цвете?
Палитра показывает проверку контраста WCAG. Ориентируйтесь минимум на 4,5:1 для обычного текста (AA) или 7:1 для более строгого уровня AAA.
Как скопировать код цвета?
Нажмите на любой цвет или оттенок, и его значение скопируется. Для каждого цвета показаны значения HEX, RGB и HSL.
Можно ли сделать градиент из палитры?
Да. Конструктор градиентов создаёт линейные, радиальные и конические градиенты из ваших цветов и копирует CSS.