読み込み中...
読み込み中...
ベースカラーから調和のとれた配色パレットを自動生成。6つの配色理論、ロック色、履歴、共有URL、AA/AAA目安、CSS・Tailwind・JSON Tokens 出力に対応しています。
ロックした色はランダム生成や配色理論の切り替え後も保持されます。現在の状態はURLで共有できます。
3桁 / 6桁HEXに対応。ランダム色から探索もできます。
プリセットカラー
色相環で正反対の色。強いコントラストを生み出します。
このパレットを使ったカードデザインのイメージです。
配色パレットの色をテキストに適用したイメージです。
:root {
--palette-1: #3B82F6; /* ベース */
--palette-2: #f6af3b; /* 補色 */
--palette-3: #9dc0fa; /* 明るめ */
--palette-4: #fad79d; /* 補色・明 */
--palette-5: #094fc2; /* 暗め */
}働き方を見直すなら
関連する選択肢をまとめて確認できます。
※ PRリンクを含みます
配色パレットとは、デザインで使用する色の組み合わせのことです。 色相環（カラーホイール）の理論に基づいて色を選ぶことで、調和のとれた美しいデザインを作成できます。 当ツールでは、カラーコード変換で分析した色をベースに、 6つの配色理論からパレットを自動生成できます。グラデーション作成と組み合わせることで、 より洗練されたデザインが実現します。ロック色や履歴、共有URLも使えるため、チームレビューやUI改善の試行錯誤にも向いています。
60-30-10のルール：メインカラー60%、サブカラー30%、アクセントカラー10%の比率で使うと、バランスの良いデザインになります。
色相環で正反対（180°）の色。強いコントラストでインパクトを与えます。
隣り合う色（±30°）。自然で落ち着いた統一感のある配色です。
120°ずつ離れた3色。バランスが良く鮮やかな配色です。
補色の両隣の色。補色より柔らかく、使いやすい配色です。
90°ずつ離れた4色。多彩で豪華な表現に適しています。
同じ色相で明度を変化。洗練された統一感のある配色です。
| シーン | 推奨パターン | 配色比率 |
|---|---|---|
| コーポレートサイト | モノクロマティック | 70 : 20 : 10 |
| ECサイト | 補色 | 60 : 30 : 10 |
| ポートフォリオ | 類似色 | 60 : 30 : 10 |
| ゲーム・エンタメ | トライアド | 50 : 30 : 20 |
| キッズ向け | テトラード | 40 : 30 : 20 : 10 |
配色パレットとは、デザインで使う色の組み合わせです。色相環（カラーホイール）の理論に基づいて、 調和のとれた配色を選ぶことで、美しいデザインを作成できます。
補色は色相環で正反対（180°）に位置する色で、強いコントラストを生みます。 類似色は隣り合う色（±15°〜30°）で、自然で調和のとれた組み合わせを作ります。
トライアド配色は、色相環上で120°ずつ等間隔に配置された3色の組み合わせです。 バランスが良く、鮮やかで活動的な印象を与えます。
60-30-10のルールが基本です。メインカラー60%、サブカラー30%、アクセントカラー10%の比率で使うと、 バランスの良いデザインになります。
Tailwind 出力は tailwind.config.ts の theme.extend に貼り付ける想定です。 そのまま palette.1 から palette.5 のキーで使えるので、必要に応じて primary や accent などの命名へ変更してください。
はい、完全無料でご利用いただけます。登録やインストールも不要です。すべての処理はブラウザ内で行われます。