カラースウォッチシートジェネレータ
hex色のリスト（オプションで名前付き）を1つのスケーラブルなSVGスウォッチシートに変換します — ラベル付きグリッドで、1つのファイルとしてコピーまたはダウンロードできます。ブラウザで完全に動作します。
入力
1行に1つの色：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"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `color-swatch-sheet-generator` tool (Color Swatch Sheet Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<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 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このカラースウォッチシートジェネレータについて
色のリストを貼り付けます — 1行に1つ — 1つの統合されたSVGスウォッチシートに配置されます：色付きタイルのグリッド、各タイルはhex値でラベル付け（オプションで名前とRGB値も）、1つのファイルとしてコピーまたはダウンロード可能です。フラットな色リストで支えられているもののために作られています：ブランドパレット、デザイントークンファイル、Tailwind設定のカスタムカラー、またはリファレンスシートに変換しているムードボード。ウォーターマークなし、アカウント不要、実行回数に制限なし。
使い方
- 色をボックスに貼り付けます。1行に1つ — hex値（
#3B82F6）、オプションで名前とコロン付き（海: #3B82F6）。空白行はスキップされます。1回の実行で最大100色。 - 1行あたりのスウォッチ数、各スウォッチのサイズ、コーナースタイル（四角形、丸形、またはカプセル形）を設定します。
- 各スウォッチに表示するラベルを切り替えます：hex、RGB、および/または名前（指定されている場合）。
- 統合されたSVGソースをコピーするか、
.svgファイルとしてダウンロードします。 - 解析された色のリストもテーブルとして表示されます — hex、RGB、そのスウォッチで計算された読み取り可能な黒/白のテキスト色 — CSVとしてコピーまたはダウンロードできます。
どの色形式が受け入れられますか？
hex値のみで、3つの標準フォーマットのいずれか：3桁の短縮形（#3bf）、6桁（#3B82F6）、アルファチャネル付き8桁（#3B82F680）。行に名前とコロンをプリフィックスしてそのスウォッチにラベルを付けます（海: #3B82F6）— 名前はオプションなので、独立した行に単純なhex値も機能します。rgb()、hsl()、CSS名前付き色（tomato、rebeccapurple）は解析されません。最初にhexに変換してください。
ラベルの色はどのように選択されますか？
スウォッチごとに自動的に、WCAG Contrast Checkerと同じ相対輝度の計算を使用：各スウォッチは黒または白のテキストを取得し、その特定の塗りつぶし色に対して実際に読みやすいもの — 非常に明るいと非常に暗い色を混ぜているシートは、手動のスウォッチごとの調整なしに全体を通して読み取り可能なままです。
1つのシートに配置できる色の数に制限がありますか？
はい — 1回の実行で100色。統合されたSVGはプレビュー、コピー、ダウンロードを可能にするための管理可能なサイズに保たれます。より大きなパレットの場合は、複数の実行に分割してください。
データは私人情報ですか？
はい。シートはブラウザで完全に生成されます — 貼り付けたものはアップロード、ログ、送信されません。インターネットから切断してもこのツールは動作します。
PNGの代わりにSVGを使う理由は？
SVGスウォッチシートは任意のサイズに無損失でスケール可能です — ズームイン、大きく印刷、またはデザインツールに直接ドロップ — ラスター出力が大きなサイズで取得するぼやけやリサンプリングなし。すべての色タイルは単純な<rect>要素で、すべてのラベルは単純な<text>要素なので、ファイルは小さくて手編集しやすく、このツールの外で調整が必要になった場合。