カラーパレット生成ツール
プロフェッショナルな配色を自動生成
色彩理論に基づいてプロフェッショナルなカラーパレットを自動生成。HEX・RGB・HSL形式に対応し、色覚異常シミュレーションでアクセシビリティも確認できるデザインツール
カラーパレット生成ツールの使い方
1
カラーピッカーでベースカラーを選択、またはHEXコードを入力
2
パレットタイプを選択（単色系、類似色、補色、三角形配色、四角形配色）
3
「パレット生成」をクリックして色彩理論に基づいた配色を作成
4
「ランダム色」で様々なベースカラーを試す
5
表示形式をHEX、RGB、HSLから選択して用途に応じて切り替え
6
色覚異常シミュレーションでアクセシビリティを確認
7
気に入った色をクリックしてカラーコードをクリップボードにコピー
8
CSS変数またはJSON形式でパレットをエクスポートして開発プロジェクトで活用
主な機能
色彩理論に基づく5種類のプロフェッショナル配色パターン（単色系、類似色、補色、三角形配色、四角形配色）
HEX、RGB、HSL の3つのカラーフォーマットに対応
1型・2型・3型色覚の色覚異常シミュレーションでアクセシビリティをチェック
ワンクリックでカラーコードをクリップボードにコピー
WCAG準拠のコントラスト分析に使える輝度値を自動計算
CSS変数・JSON形式での一括エクスポート機能
クリエイティブなインスピレーションを得られるランダム色生成機能
スマートフォンからデスクトップまで全デバイス対応のレスポンシブデザイン
よくある質問 (FAQ)
単色系は1つの色相のバリエーション、類似色は色相環の隣接色、補色は対向色、三角形配色は等間隔の3色、四角形配色は色相環上で長方形を形成する4色を使用します。
1型色覚（赤色盲）、2型色覚（緑色盲）、3型色覚（青色盲）の3つの色覚特性をシミュレートし、色覚に特性のある方がどのように色を見るかを確認できます。
輝度は色の知覚的な明るさを0-100%で表します。テキストと背景のコントラスト比を判断し、WCAGアクセシビリティガイドラインを満たすために重要な指標です。
エクスポートしたCSS変数をスタイルシートの:rootセレクター内にコピーし、'color: var(--color-1)'のようにCSS全体で一貫したテーマ色として使用できます。
現在、色の入力はHEX形式（#RRGGBB）のみ対応していますが、ツールはHEX、RGB、HSLの全形式で色を表示し、任意の形式でコピーできます。
HEXは16進数記法（#FF0000）、RGBは赤緑青の値（0-255）、HSLは色相（0-360°）・彩度・明度（0-100%）で色を表現します。それぞれ異なるデザイン・開発用途に適しています。