カラーパレット調和・配色生成

カラーパレット調和・配色生成

補色、類似色、三色配色、分裂補色などの調和パレットを瞬時に生成。リアルタイムなWCAGコントラスト比検証とCSS/Tailwindエクスポートに対応したブラウザ完結型配色ツール。

プリセット
アンカーカラー調整コントロール
#0F172A
彩度モジュレーション0%
色温度シフト（暖色/寒色）0°
色彩調和エンジン待機中
色差（ΔE） 0%スロット数 5
主キー・プライマリアンカー
#0F172A
RGB15, 23, 42
HSL222°, 47%, 11%
OKLCH0.208, 0.04, 266°
相対輝度（Luminance）0.0088
和音構成色 1
#C0B8DB
RGB192, 184, 219
HSL254°, 33%, 79%
OKLCH0.8, 0.05, 296°
相対輝度（Luminance）0.506
和音構成色 2
#D8B69F
RGB216, 182, 159
HSL24°, 42%, 74%
OKLCH0.8, 0.051, 56°
相対輝度（Luminance）0.5056
和音構成色 3
#BCC29E
RGB188, 194, 158
HSL70°, 23%, 69%
OKLCH0.8, 0.049, 115°
相対輝度（Luminance）0.5174
和音構成色 4
#A0C3DA
RGB160, 195, 218
HSL204°, 44%, 74%
OKLCH0.799, 0.05, 237°
相対輝度（Luminance）0.5157
平均WCAG比4.43:1|アクセシビリティスコア106
5 色
適用中の調和則SPLIT-COMPLEMENTARY
平均コントラスト比4.43:1
計算カラーモデルOKLCH (266°)
完全ローカル保護通信ゼロ（完全ローカル）

完全ブラウザ内処理

すべての幾何学的色彩計算と変換をブラウザのローカルメモリ上で高速実行します。

サーバー送信ゼロの安心設計

入力したカラーコードや画像データは外部サーバーへ一切送信されず、完全なプライバシーを保護します。

プロダクション対応出力

CSSカスタムプロパティ、Tailwind CSS、JSONなど、開発現場へ即座に導入可能なコードを出力します。

ToolsAA•100% クライアント実行・完全プライベートWeb開発ツール
技術リファレンス・アーキテクチャガイド

配色パレット生成＆調和ガイド — 技術リファレンス

色彩調和理論に基づいたカラーパレットを瞬時に生成。補色・類似色・トライアド・分裂補色などの配色スキーム設計、リアルタイムなWCAGコントラスト比検証、CSS/OKLCHトークン出力に対応。

配色パレット生成＆調和ガイド — 技術リファレンス — クライアントサイド完全ローカル実行アーキテクチャ図
配色パレット生成＆調和ガイド — 技術リファレンス — クライアントサイド完全ローカル実行アーキテクチャ図

主要パラメータと設定項目

基準色相角 (θ)CIE色度角 [0° – 360°]

連続的な360度のCIE/マンセル色相環上における角度位置であり、主波長を決定します（0°: 赤、60°: 黄、120°: 緑、180°: シアン、240°: 青、300°: マゼンタ）。ブラウザのサンドボックス化されたV8ランタイム内で、色彩調和の回転計算を行う基準原点座標としてO(1)の三角関数時間で評価されます。

初期値: 240°（ロイヤルブルー）
幾何学的角度オフセット (Δθ)三角関数弦インターバル

古典的な調和トポロジーを構築する幾何学的な角度変位：補色（180°）、トライアド（120° / 240°）、類似色（±30° / ±60°）、分裂補色（150° / 210°）、テトラード（60° / 180° / 240°）。外部依存関係なしに純粋な数学的回転演算（modulo 360°）により算出されます。

初期値: 180°（補色）
知覚明度 (L*)CIE L* / OKLCH L [0.00 – 1.00]

0.0（完全吸収黒）から1.0（完全拡散白）までの知覚的均等な明度スケール。従来の生HSLに内在する黄色・青色の知覚的明度スパイクを排除し、すべての色相にわたって等しいL値を持つ色が人間の目に対して均一な知覚的明るさを共有することを保証します。

初期値: 0.55
クロマ / 彩度 (C*)OKLCH Chroma [0.00 – 0.37] / 純度指標

無彩色（ニュートラルグレー）の軸からスペクトル軌跡に向かう動径距離。高彩度（OKLCHで0.20超、sRGBで80%超）は眼精疲労や色立体視（クロモステレオプシス）を誘発します。アクセシブルなUIサーフェスでは抑制された彩度（0.08未満）が求められ、インタラクティブな操作要素には0.12〜0.18が推奨されます。

初期値: 75%（0.18 OKLCH）
WCAG 相対輝度 (Y)線形化測光比率 [0.00 – 1.00]

W3C WCAG 2.1 §1.4.3に基づき、Y = 0.2126R_lin + 0.7152G_lin + 0.0722B_lin として算出される線形化測光輝度。コントラスト比 (L1 + 0.05) / (L2 + 0.05) を規定し、通常テキストでは4.5:1以上（レベルAA）、高視認性テキストでは7.0:1以上（レベルAAA）が義務付けられています。

初期値: 0.21
色空間変換エンジンIEC 61966-2-1 sRGB ↔ OKLCH / Display-P3

3×3行列表色変換パイプライン（ガンマ展開 [0, 255] ➔ リニアsRGB ➔ CIE XYZ（D65光源） ➔ LMS錐体空間 ➔ OKLCH極座標）をクライアントサイドで実行。サーバーテレメトリを一切介さず、ブラウザの隔離環境内で決定論的O(1)時間計算量で完結します。

初期値: OKLCH（W3C Color 4）

現場のベストプラクティス・実践Tips

ヘルムホルツ・コールラウシュ効果（知覚明度歪み）の克服

従来のHSL数式では、彩度100%の黄色（L=50%）と青色（L=50%）を同一の明度として処理しますが、人間の明所視では黄色が圧倒的に明るく知覚されます。テキストの可読性と背景色のバランスを取る際は、常にOKLCH知覚色空間へ切り替えてください。OKLCHで同一のL値を持つ色は、360度の全色相にわたり人間にとって均一な知覚明度を保証します。

無彩色ブリッジによる色収差振動（ハレーション）の防止

純色赤（#FF0000）と純色シアン（#00FFFF）のような高彩度な補色同士を直接隣接させると、網膜の側抑制や眼球のピント調節競合を引き起こし、激しい眼精疲労（ハレーション）の原因となります。彩度の高い補色の境界には、無彩色ブリッジ（Chroma < 0.02の淡色、またはL < 0.20かつ輝度差ΔY ≥ 0.30を確保した暗色サーフェス）を挿入してください。

UI配色における「60-30-10の法則」の徹底

調和パレットの各色を均等な面積比率で配置してはいけません。画面全体の60%を主たるベース・背景色（ニュートラルカラー）に、30%をナビゲーションや構造を示すブランドカラー（メインカラー）に配分し、残りの10%をCTAボタンやバッジ、アクティブ状態などの強調アクセントカラー（補色）専用として厳格に確保してください。

色覚特性（CVD）による識別衝突の事前検証

日本人男性の約5%（欧米では約8%）、女性の約0.2〜0.5%が2型（緑）または1型（赤）色覚特性を持っています。赤緑の補色パレットは2色型色覚において判別不能な茶黄色へと同化します。色相差のみに依存せず、重要なステータス表示間には必ず最低3.0:1の輝度差を確保し、WCAG 2.1 SC 1.4.1（JIS X 8341-3）に準拠してアイコンや文字情報を併用してください。

Web Crypto API のハードウェアエントロピーによる無作為配色生成

標準の Math.random() は擬似乱数（PRNG）エンジンに依存しており、周期性や剰余計算の偏りによって特定の色相象限に固まる傾向があります。バイアスのない探索的パレット生成を行うには、Web Crypto API を介して window.crypto.getRandomValues(new Uint32Array(1)) / 4294967296 * 360 を利用し、360度の全CIEスペクトル上で真に均一な確率分布を確保してください。

よくある落とし穴とトラブルシューティング

⚠️生成された補色パレットが白背景または黒背景でWCAG AAコントラスト基準を満たさない

補色関係にある色相は色彩的な対比を生み出しますが、輝度の整合性を保証するものではありません。必須要件である4.5:1のコントラスト比を達成するには、白背景に対しては前景アクセント色の知覚明度（L*）スライダーを0.35以下に下げ、ダークグレー背景に対しては0.75以上に引き上げてください。

⚠️グラデーションの中間色や類似色の遷移がくすんだ灰色（濁り）に見える

リニアRGB補間は色空間円柱の無彩色な中心部を直線的に通過するため、彩度低下（グレーデッドゾーン）が発生します。計算色空間をsRGB/HSLからOKLCHへ切り替えることで、知覚彩度を一定に保ちながら円弧補間を行い、濁りのないクリアな色遷移を実現できます。

⚠️CSSを広色域Display-P3へ書き出す際やCMYK印刷時に色化け・クリッピングが発生する

蛍光シアンや鮮烈なグリーンなどの高彩度な合成RGB値は、sRGB色度図の三角形やCMYK印刷色域の外側に位置します。「色域クリッピング防止」を有効にして標準sRGB [0, 255] の範囲内へクランプするか、広色域CSSトークン color(display-p3 r g b) のプレビューで実表示を確認してください。

⚠️トライアドやテトラードの配色がUIカード上で散漫になり、視覚的な圧迫感を与える

3〜4つの離れた色相すべてに同等の高彩度を適用すると、視覚的な焦点が競合してしまいます。主色となる1色のみを高彩度（70%超）に保ち、副色や第3の調和色については彩度（Chroma）を意図的に20〜35%まで落として補助的なトーンとして機能させてください。

よくある質問 (FAQ)

補色、トライアド、類似色などの色彩調和は数学的にどのように計算されますか？▼

色彩調和は、sRGB値を極座標（色相角 θ: 0°〜360°、彩度、明度）に変換して幾何学的に算出されます。補色（Complementary）は180度を加算（θ + 180° mod 360°）します。トライアド（Triadic）は120度刻みで均等回転（θ + 120°, θ + 240°）します。類似色（Analogous）は隣接する±30度や±60度（θ ± 30° mod 360°）を計算します。分裂補色（Split-Complementary）は基準色θに対し、直正補色の両隣となる角度（θ + 150°, θ + 210°）をペアリングします。これらの変換はすべてO(1)の計算量で瞬時に処理されます。

アクセシブルなボタンテキストや背景色に必要な最低WCAGコントラスト比はいくつですか？▼

WCAG 2.1（およびJIS X 8341-3）のレベルAAでは、18pt未満の標準テキストおよび14pt未満の太字ボタンラベルに対して、背景色との間に最低4.5:1のコントラスト比が義務付けられています。大きな文字（18pt以上、または14pt以上の太字）および必須UIコンポーネント（ボタンの輪郭線、フォーム入力欄の境界、アクティブなタブインジケーター等）には最低3.0:1が必要です。レベルAAAでは、通常テキストで7.0:1以上、大きな文字で4.5:1以上が求められます。

従来のHSL色空間とOKLCH知覚色空間による色彩調和にはどのような違いがありますか？▼

HSL（色相・彩度・輝度）は生のsRGBを単純に円柱座標へ変換したものであり、人間の網膜の分光感度特性を無視しているため、明度50%の黄色が明度50%の青色よりも圧倒的に明るく見えてしまいます。一方、ビョルン・オットソン（Björn Ottosson）氏によって開発されたOKLCHは、CIECAM02およびCAM16知覚色モデルを基礎としており、知覚明度（L）、彩度（C）、色相（h）を均等に分離しています。これにより、同じL値を持つ2色は360度の全色相において人間にとって完全に等しい知覚的明るさを保持します。

補色同士を直接隣り合わせに配置すると、なぜハレーション（視覚振動）や濁りが発生するのですか？▼

視覚振動（色立体視 / ハレーション）は、同等輝度を持つ高彩度の補色同士が十分な輝度コントラストなしに隣接網膜錐体に逆極性の信号を与えることで、視覚的な境界線が揺らいで見える生理現象です。また、色同士が濁って見える現象は、リニアRGB空間での線形補間において中間値がRGB立方体の暗い中心部（低彩度領域）を通過するために生じます。この問題は、十分な輝度差（ΔL ≥ 0.3）を設けるか、無彩色の境界線（セパレーター）を配置することで解決できます。

このツールでカラーパレットを生成する際、企業のプライベートなブランドカラー情報が外部サーバーへ送信されますか？▼

いいえ。すべての色空間変換（sRGB、CIE XYZ、OKLCH、Display-P3）、WCAGコントラスト比計算式、色覚特性シミュレーションは、ブラウザ内のサンドボックス化されたJavaScript（V8）仮想マシン上で100%クライアントサイド完結で実行されます。カラーコードやブランドアセットがネットワーク経由で外部へ送信されることは一切なく、サーバーテレメトリゼロ、完全オフライン動作、およびエンタープライズセキュリティ基準に準拠した厳格なデータ隔離を保証します。

関連開発者ツール

全ツール一覧 →
CSSグラスモーフィズム生成デザイン

backdrop-filterのぼかし、透明度、ボーダー、陰影をリアルタイムに調整し、モダンなCSSグラスモーフィズムやすりガラスUIコードを即座に生成・コピーできます。

ツールを開く→
画像圧縮・写真サイズ縮小デザイン

画質を落とさずにブラウザ上で画像を高速圧縮。JPG、PNG、WebPのファイル容量をサーバー送信ゼロで軽量化。目標KB逆算機能やZIP一括書き出しにも対応しています。

ツールを開く→
インタラクティブCSSグラデーション生成ツールデザイン

CSS linear、radial、conicグラデーションの完全な構文ガイド。二重位置カラーストップ、OKLCH色空間補間、放射形状制御、テキストマスク、Tailwind CSS / SVG連携まで網羅。

ツールを開く→
多重レイヤー CSS ボックスシャドウ ジェネレーターデザイン

自然で美しい光学多層シャドウを作成。アンビエントオクルージョン、インセット、ブラー拡散、多重階層を直感的に調整し、TailwindやCSSコードを即座に出力します。

ツールを開く→
CSS Clip-Path ポリゴン＆ベクターマスクジェネレーターデザイン

ドラッグ操作でポリゴン頂点を自由に編集。レスポンシブ対応のCSS clip-pathおよびSVGクリッピングマスクを即時生成。

ツールを開く→
CSS Grid レイアウト ビジュアルジェネレーターデザイン

直感的な2次元CSSグリッド作成ツール。fr比率単位・minmax()関数・gap間隔を視覚的に調整し、最適化されたCSS、Tailwind、React JSXコードを即座に生成します。

ツールを開く→