Перейти к содержимому
Toolars
Каталог
Сообщить об ошибке

Дизайн · утилита · Локально

Генератор цветовых гармоний

Color Harmony Builder

Стройте палитры из пяти цветов на основе одного исходного по аналогии, комплементарным, триадным и другим правилам, с бейджами контраста на каждом образце.

Путь задачи / от ввода к результату

Задайте цвет-затравку

Работает локально · Ничего не загружается на сервер

Как работает Генератор цветовых гармоний, конфиденциальность и похожие инструменты

Путь задачи / от ввода к результату

Как построить гармонию из пяти цветов

  1. 01

    Задайте цвет-затравку

    Введите шестизначное шестнадцатеричное значение в поле «Затравка HEX» — префикс # необязателен — или выберите цвет визуально через «Выбор затравки». Оба поля синхронизированы, и рабочая область открывается с затравкой #5D4DF1.

  2. 02

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

    Выберите аналоговую, комплементарную, разделённую комплементарную, триаду, тетраду или монохромную схему. Движок применяет фиксированные сдвиги оттенка, а затем закрепляет средний образец на точном исходном цвете; остальные не обязательно совпадают с теоретическими углами. Монохромная схема сохраняет оттенок, меняя насыщенность и светлоту.

  3. 03

    Задайте целевой контраст

    Выберите «Целевой контраст текста»: 3:1 для крупного текста, 4.5:1 для основного текста AA или 7:1 для основного текста AAA — по умолчанию 4.5:1. Каждый образец измеряется относительно чёрного или белого — того, что читается на нём лучше.

  4. 04

    Создайте палитру

    Нажмите «Создать палитру». Появляются пять образцов, и средний — всегда ваш точный цвет-затравка: остальные четыре сдвигают оттенок, насыщенность и светлоту вокруг него в ограниченных диапазонах, поэтому шкала остаётся пригодной, а не уплывает в неон или грязь.

  5. 05

    Прочитайте значки контраста

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

  6. 06

    Скопируйте CSS или скачайте JSON

    «Копировать CSS» копирует прокомментированный блок :root с пользовательскими свойствами от --palette-1 до --palette-5. «Скачать JSON» сохраняет toolars-palette.json, где записаны затравка, гармония, целевой контраст и данные о контрасте каждого цвета вместе с явными полями aiModel и api, равными null.

Факты об инструменте

Обработка
В вашем браузере
Ввод покидает устройство
Никогда
Хранение
Ничего не сохраняется
Цена
Бесплатно

Ваши данные остаются в браузере.

Генератор цветовых гармоний использует проверенный путь локального выполнения и не создаёт скрытую историю ввода и вывода.

Локальное выполнение

Работает внутри текущей вкладки браузера.

Никакой скрытой обработки

Активные данные инструмента никогда не становятся записями документов Toolars.

Аккаунт не требуется

Используйте основной сценарий без создания профиля. Избранное синхронизируется с аккаунтом после входа.

Мгновенный сброс

Закройте вкладку — и рабочие данные исчезнут.

Что на самом деле делает Генератор цветовых гармоний

Побочному проекту нужна палитра, которая выглядит осмысленно, а не случайно: основной цвет, поддерживающие его тона и доказательство того, что текст читается на каждом из них. Подбор гармоний на глаз плывёт с каждой правкой, поэтому Генератор цветовых гармоний применяет фиксированное правило к вашей затравке и показывает расчёт контраста рядом с каждым образцом. Движок детерминирован — одна и та же затравка с одним и тем же правилом всегда возвращает одни и те же пять цветов, — поэтому коллега может воспроизвести палитру точь-в-точь. Весь запуск работает без сети, а экспорт сразу встаёт в таблицу стилей или файл дизайн-токенов.

Частые вопросы

Палитра генерируется ИИ?
Нет, и рабочая область прямо сообщает об этом над элементами управления: это детерминированный локальный движок гармонии без моделей и API искусственного интеллекта. Одна и та же затравка и правило всегда дают те же пять цветов, поэтому результат воспроизводим на дизайн-ревью.
Какие значения затравки принимаются?
Шестизначный шестнадцатеричный цвет, например #5D4DF1, с ведущим # или без него. Трёхзначная сокращённая запись и другие обозначения отклоняются с сообщением, которое называет ожидаемый формат, а палитра выбора цвета всегда даёт валидную затравку.
Почему средний образец точно совпадает с моей затравкой?
Так задумано: третья позиция шкалы закреплена за значением затравки, чтобы палитра оставалась привязанной к выбранному цвету. Два образца по обе стороны выводятся вокруг него — правило гармонии сдвигает оттенок, светлота шагает наружу, а насыщенность затухает к краям.
Как вычисляется значок контраста?
Коэффициент контраста каждого образца вычисляется из относительной яркости относительно чёрного и относительно белого, и лучший из двух показывается рядом с шестнадцатеричным значением. Образец проходит, когда этот коэффициент достигает выбранной цели: 3:1, 4.5:1 или 7:1.
Что именно содержат оба экспорта?
«Копировать CSS» даёт блок :root со свойствами от --palette-1 до --palette-5 под комментарием с названием гармонии и затравки. JSON-файл записывает имя движка, поля aiModel и api, равные null, вашу затравку, гармонию и целевой контраст, а также каждый цвет с его шестнадцатеричным значением, победившим цветом текста, коэффициентом контраста и отметкой о прохождении. CSS также экспортирует --palette-N-text для каждого цвета; JSON сохраняет неокруглённый контраст.
Что-нибудь покидает мой браузер?
Нет. Панель явно помечена «Без сети»: затравка, сгенерированные цвета и экспорт остаются в этой вкладке, а учётная запись не требуется.

Читайте также

Продолжить: Дизайн

Связанные задачи, а не тупик.

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

Генератор CSS-лоадеров

CSS Loader Generator

Проектируйте спиннер-кольцо или три точки с настройкой размера, толщины, скорости и цветов и копируйте CSS с поддержкой reduced motion.

Создание

Генератор CSS-чекбоксов

CSS Checkbox Generator

Стилизуйте кастомный чекбокс — размер, рамка, цвета состояний — и копируйте CSS, под которым остаётся настоящий доступный с клавиатуры input.

Создание

Генератор CSS-переключателей

CSS Switch Generator

Собирайте переключатель на чистом CSS: дорожка, бегунок и цвета двух состояний; в коде — обработка фокуса и reduced motion.

Создание

Генератор CSS clip-path

CSS Clip Path Generator

Редактируйте вершины мышью, клавиатурой или координатами. Четыре шаблона, локальное копирование объявления clip-path или полного CSS.

Создание