どの調和タイプが生成されますか？

補色（+180°）、類似色（±30°）、トライアド（±120°）、スプリット補色（±150°）です。彩度・明度は基準色のままです。

CSS 変数として書き出せますか？

はい。`:root` カスタムプロパティをコピーするか、スウォッチをタップして HEX をコピーできます。

ブランドガイドの代わりになりますか？

いいえ。色相環での探索用スタート地点です。役割名・コントラスト・ダーク/ライトは別途確認してください。

日本語 UI でも同じ計算ですか？

はい。ロケールは文言だけが変わり、HSL 回転アルゴリズムは共通です。

Utill.net

カラーパレット生成

調和とテーマ

任意のベースカラーから補色、類似色、三色配色などの調和のとれたパレットを生成します。デザインと開発にすぐ活用できます。

この変換はブラウザ内だけで実行され、サーバーへはアップロードされません。

色

16進

ベース#3b82f6
補色#f6af3b

不透明色のみ（HEX / RGB / HSL）。アルファなし。#rgb 短縮形または #rrggbb を入力できます。

ベース

#3b82f6

補色

#f6af3b

類似色

#3bdff6

#523bf6

トライアド

#f63b82

#82f63b

スプリットコンプリメンタリー

#f6523b

#dff63b

CSS 変数

:root {
  --color-base: #3b82f6;
  --color-complementary: #f6af3b;
  --color-analogous-1: #3bdff6;
  --color-analogous-2: #523bf6;
  --color-triadic-1: #f63b82;
  --color-triadic-2: #82f63b;
  --color-split-1: #f6523b;
  --color-split-2: #dff63b;
}

このツールについて

基準 HEX（#rgb / #rrggbb）から HSL 色相回転で補色・類似色・トライアド・スプリット補色パレットを生成します。スウォッチと CSS 変数ブロックをコピーできます。

ブランドガイドやコントラストチェッカーの代替ではありません。本番前にテキスト対比と意味役割を別途確認してください。

よくある用途

プロダクトのプライマリ HEX からモック用アクセント案を作る
プロトタイプ用 --color-* CSS 変数を書き出す
レビュー前に補色とスプリット補色を比較する

使い方

カラー入力または HEX で基準色を決めます。
ベース / 補色 / 類似色 / トライアド / スプリット補色を確認します。
スウォッチで HEX をコピーするか、CSS 変数ブロックをコピーします。
本番前にコントラストとブランド適合を検証します。

例

入力 / 設定	出力	メモ
`#3b82f6`	補色 `#f6af3b`; 類似 `#3bdff6`, `#523bf6`	サンプルの青
`#ff0000`	補色 `#00ffff`; トライアド `#00ff00`, `#0000ff`	純赤 → シアン補色
`#808080`	すべて `#808080`	彩度 0 — 色相回転が効かない

実務での落とし穴

生成パレットはブランドスタイルガイドではありません。
HSL の等角度は知覚的に均一ではありません（OKLCH とは異なる）。
無彩色シードでは全グループが同じ HEX になります。

参考資料

最終更新: 2026-07-27

よくある質問

どの調和タイプが生成されますか？: 補色（+180°）、類似色（±30°）、トライアド（±120°）、スプリット補色（±150°）です。彩度・明度は基準色のままです。
CSS 変数として書き出せますか？: はい。`:root` カスタムプロパティをコピーするか、スウォッチをタップして HEX をコピーできます。
ブランドガイドの代わりになりますか？: いいえ。色相環での探索用スタート地点です。役割名・コントラスト・ダーク/ライトは別途確認してください。
日本語 UI でも同じ計算ですか？: はい。ロケールは文言だけが変わり、HSL 回転アルゴリズムは共通です。