Генератор цветовой схемы
Создайте гармоничную цветовую палитру на основе основного цвета — дополнительный, аналогичный, триадный, тетрадный, расщепленный дополнительный или монохроматический — используя поворот оттенка HSL. Получите значения HEX и HSL для каждого цвета.
Ввод
Исходный цвет, на основе которого строится вся палитра.
Вывод
Your color palette will appear here.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-scheme-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#FF0000",
"schemeType": "complementary"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `color-scheme-generator` tool (Color Scheme Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/color-scheme-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор цветовой схемы — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Генератор цветовой схемы создает палитру цветов, которые хорошо работают вместе, начиная с одного основного цвета и поворачивая его оттенок вокруг цветового круга в соответствии с классическими правилами теории цвета. Выберите основной цвет и тип схемы, и получите назад значения HEX и HSL для каждого цвета в палитре — готовые к использованию в инструменте проектирования, файле CSS или конфигурации Tailwind.
Типы схемы
- Дополнительная — основной цвет плюс его противоположность на круге (оттенок + 180°). Высокий контраст, отлично подходит для акцентов и призывов к действию.
- Аналогичная — основной цвет плюс его соседи на 30° с каждой стороны. Цвета, которые находятся рядом друг с другом на круге, создавая спокойную палитру с низким контрастом.
- Триадная — три цвета, равномерно расположенные на расстоянии 120° друг от друга. Яркая и сбалансированная, часто выбирается для игривых корпоративных палитр.
- Расщепленная дополнительная — основной цвет плюс два цвета, смежные с его дополнением (+150° и +210°). Почти столько же контраста, как дополнительная, но мягче.
- Тетрадная / Квадрат — четыре цвета, равномерно расположенные на расстоянии 90° друг от друга. Предлагает наибольшее разнообразие, поэтому обычно требует одного доминирующего цвета и трех вспомогательных.
- Монохроматическая — один и тот же оттенок на четырех различных уровнях светлоты (20%, 40%, 60%, 80%). Безопасная и целостная палитра для оттенков и тонов пользовательского интерфейса.
Как использовать
- Выберите основной цвет с помощью палитры цветов (или введите значение в шестнадцатеричном формате).
- Выберите тип схемы из раскрывающегося меню.
- Таблица палитры обновляется мгновенно с ролью каждого цвета, шестнадцатеричным кодом и значением HSL.
- Скопируйте таблицу или загрузите как CSV для использования в программном обеспечении для проектирования, пользовательских свойствах CSS или теме Tailwind.
Все происходит в пространстве HSL: основной цвет преобразуется в оттенок/насыщение/светлоту, оттенок поворачивается на фиксированные смещения, которые требует каждая схема, и результаты преобразуются обратно в RGB и шестнадцатеричный формат. Поворот оттенка обтекает на 360°, поэтому базовый оттенок 300° плюс триадное смещение 120° корректно приземляется на 60°, а не на 420°.
Часто задаваемые вопросы
Почему HSL вместо RGB? Поворот оттенка в пространстве HSL сохраняет насыщение и светлоту постоянными, поэтому каждый сгенерированный цвет имеет такую же интенсивность и яркость, как база — изменяется только оттенок. Выполнение эквивалентного поворота в RGB намного сложнее и не отображает четко, как обучают цветовым кругам.
Изменяется ли насыщение или светлота между цветами? Для каждой схемы, кроме монохроматической, нет — изменяется только оттенок, поэтому все цвета в палитре имеют одинаковое насыщение и светлоту основного цвета. Монохроматическая сохраняет оттенок и насыщение фиксированными и вместо этого изменяет светлоту за четыре фиксированных шага.
Могу ли я использовать сгенерированные цвета непосредственно в CSS?
Да. Каждая строка предоставляет как шестнадцатеричный код (#RRGGBB), так и строку HSL (hsl(h, s%, l%)), поэтому вы можете скопировать любой формат прямо в таблицу стилей или файл токенов дизайна.
Какую схему выбрать? Дополнительная и расщепленная дополнительная хорошо работают для одного акцента на нейтральном фоне. Аналогичная и монохроматическая подходят для спокойных, целостных интерфейсов. Триадная и тетрадная обеспечивают большее разнообразие для иллюстраций, диаграмм или корпоративных палитр, требующих нескольких отличных цветов.
Конфиденциальность
Вся математика цветов происходит локально в вашем браузере — ваш основной цвет и выбранная схема никогда не отправляются на сервер.