配色スキーム生成ツール
基本色から調和の取れた配色パレットを生成します — 補色、類似色、三色、四色、分割補色、または単色 — 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"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `color-scheme-generator` tool (Color Scheme Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<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 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
配色スキーム生成ツールは、単一の基本色から始め、古典的な色彩理論のルールに従って色相を色円の周りで回転させることで、うまく機能する配色パレットを構築します。基本色とスキームタイプを選択すると、パレット内のすべての色のHEXおよびHSL値が返されます — デザインツール、CSSファイル、またはTailwind設定にそのまま使用できます。
スキームタイプ
- 補色 — 基本色と色円上の反対色（色相 + 180°）。高いコントラスト、アクセント及びコールトゥアクションに最適です。
- 類似色 — 基本色と両側の隣色30°。色円上で隣同士の色で、落ち着きのある低コントラストパレットを作ります。
- 三色 — 120°ずつ均等に配置された3つの色。鮮やかでバランスの取れた色で、楽しいブランドパレットの一般的な選択です。
- 分割補色 — 基本色と補色に隣接する2つの色（+150°と+210°）。補色と同等のコントラストがありますが、より柔らかです。
- 四色 / スクエア — 90°ずつ均等に配置された4つの色。最大の多様性を提供し、通常1つの支配的な色と3つの補助色が必要です。
- 単色 — 4つの異なる明度レベル（20%、40%、60%、80%）で同じ色相。UI的なシェードとティントのための安全で統一的なパレットです。
使い方
- カラーピッカーで基本色を選択します（または16進数値を入力）。
- ドロップダウンからスキームタイプを選択します。
- パレットテーブルは各色の役割、16進数コード、HSL値で即座に更新されます。
- テーブルをコピーするか、CSVとしてダウンロードしてデザインソフトウェア、CSSカスタムプロパティ、またはTailwindテーマで使用します。
すべてがHSL空間で実行されます：基本色は色相/彩度/明度に変換され、色相は各スキームが必要とする固定オフセットで回転し、結果はRGBと16進数に変換され直されます。色相回転は360°で折り返されるため、基本色相300°に加えて三色オフセット120°は正しく60°に着地し、420°ではありません。
よくある質問
なぜRGBではなくHSLなのですか？ HSL空間で色相を回転させると、彩度と明度は一定のままになるため、生成されるすべての色は基本色と同じ強度と明るさを持ちます — 色相のみが変わります。RGB内で同等の回転を行うことは、はるかに複雑で、色円がどのように教えられるかにきれいにマップしません。
色の彩度または明度は色によって変わりますか？ 単色以外のすべてのスキームでは、いいえ — 色相のみが変わるため、パレット内のすべての色は基本色の彩度と明度を共有します。単色は色相と彩度を固定に保ち、代わりに4つの固定ステップ全体で明度を変化させます。
生成された色を直接CSSで使用できますか？
はい。各行は16進数コード（#RRGGBB）とHSL文字列（hsl(h, s%, l%)）の両方を提供するため、どちらの形式もスタイルシートまたはデザイントークンファイルに直接コピーできます。
どのスキームを選ぶべきですか？ 補色と分割補色は、ニュートラルな背景に対して単一のアクセントに適しています。類似色と単色は、落ち着きのある統一されたインターフェースに適しています。三色と四色は、複数の異なる色が必要なイラスト、チャート、またはブランドパレットのためにより多くの多様性を提供します。
プライバシー
すべての色数学はブラウザ内でローカルに実行されます — 基本色と選択されたスキームはサーバーに送信されることはありません。