Генератор таблицы образцов цветов
Преобразуйте список hex-цветов (опционально с названиями) в одну масштабируемую таблицу образцов SVG — сетку с метками, которую вы можете скопировать или загрузить как один файл. Работает полностью в вашем браузере.
Ввод
Один цвет в строке: hex-код (#3bf, #3B82F6, или #3B82F6FF с альфа-каналом), опционально с названием и двоеточием ("Океан: #3B82F6"). Пустые строки пропускаются.
Макет
Метки
Вывод
Ваша таблица образцов появится здесь.
| Название | Hex | RGB | Цвет текста |
|---|---|---|---|
| No data yet | |||
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-swatch-sheet-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"colorList": "Ocean: #3B82F6\n#F97316\nForest: #16A34A",
"columns": "4",
"swatchSize": "140",
"cornerStyle": "rounded",
"showHex": "true",
"showRgb": "",
"showName": "true"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `color-swatch-sheet-generator` tool (Color Swatch Sheet Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/color-swatch-sheet-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 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что делает этот генератор таблицы образцов цветов
Вставьте список цветов — один в строку — и он расположит их в одну объединённую таблицу образцов SVG: сетку цветных плиток, каждая с меткой её hex-значения (и опционально её названия и RGB-значения), готовую к копированию или загрузке как один файл. Создан для всего, что основано на простом списке цветов: палитра бренда, файл дизайн-токенов, пользовательские цвета конфигурации Tailwind, или доска настроения, которую вы преобразуете в справочный лист. Нет водяного знака, нет аккаунта и нет ограничения на количество запусков.
Как использовать
- Вставьте ваши цвета в поле, один в строку — hex-код (
#3B82F6), опционально с названием и двоеточием (Океан: #3B82F6). Пустые строки пропускаются, до 100 цветов за запуск. - Установите, сколько образцов в строке, размер каждого образца и его стиль углов (квадратный, скругленный или таблетка).
- Переключайте, какие метки показывать на каждом образце: hex, RGB и/или название (если оно было указано).
- Скопируйте объединённый исходный код SVG, или загрузите его как файл
.svg. - Разобранный список цветов также показывается в виде таблицы — hex, RGB и вычисленный читаемый чёрный/белый цвет текста для этого образца — которую вы можете скопировать или загрузить как CSV.
Какие форматы цветов принимаются?
Только hex-коды в любом из трёх стандартных форматов: 3-значное сокращение (#3bf), 6-значное (#3B82F6) и 8-значное с альфа-каналом (#3B82F680). Префиксируйте строку названием и двоеточием, чтобы обозначить этот образец (Океан: #3B82F6) — название опционально, поэтому простой hex-код на отдельной строке тоже работает. rgb(), hsl() и названия цветов CSS (tomato, rebeccapurple) не разбираются; конвертируйте в hex сначала, если это то, с чего вы начинаете.
Как выбирается цвет метки?
Автоматически, для каждого образца, используя ту же математику относительной светимости, что и WCAG Contrast Checker: каждый образец получает чёрный или белый текст, в зависимости от того, что лучше читается на этом конкретном фоне — поэтому таблица, смешивающая очень светлые и очень тёмные цвета, остаётся читаемой везде без каких-либо ручных корректировок на образец.
Есть ли ограничение на количество цветов, которые я могу поместить в одну таблицу?
Да — 100 цветов за запуск, чтобы объединённый SVG оставался управляемого размера для просмотра, копирования и загрузки. Для большей палитры разделите на несколько запусков.
Мои данные приватны?
Да. Таблица генерируется полностью в вашем браузере — ничто, что вы вставляете, не загружается, не логируется и не отправляется никуда. Вы можете отключиться от интернета, и этот инструмент всё ещё будет работать.
Почему SVG вместо PNG?
Таблица образцов SVG масштабируется без потерь на любой размер — приблизьте, распечатайте в большом формате или разместите прямо в инструмент дизайна — без размытия или переиспользования пикселей, которое получает растровый экспорт при больших размерах. Каждая плитка цвета — это простой элемент <rect>, а каждая метка — простой элемент <text>, поэтому файл остаётся небольшим и легко редактируется вручную, если вам когда-нибудь понадобится его подправить вне этого инструмента.