1つの色から5つの配色パターンを計算
このツールは、基準となるベースカラーを入力するだけで、HSL（色相・彩度・輝度）カラーモデルに基づいて数学的に調和のとれた5つのカラーパレットを自動生成します。
生成されるのは、色相環の反対に位置する補色（Complementary）、隣り合う類似色（Analogous）、正三角形に配置されるトライアド（Triadic）、長方形に配置されるテトラード（Tetradic）、そして明暗を調整したシェード（Shades）の5種類です。デザインの目的に合わせて最適な配色パターンを選択できます。
プロジェクトに合わせたパレットの選び方
コントラストを強調してボタンなどの要素を目立たせたい場合は、補色（Complementary）が適しています。一方、統一感のある落ち着いたUIを構築したい場合は、類似色（Analogous）やシェード（Shades）を選ぶと自然に馴染みます。
トライアドやテトラードはより多くの色を扱うため、イラストやカラフルなダッシュボード画面などで活躍します。生成されたパレットはCSSのカスタムプロパティ（変数）として一括コピーできるため、コーディング作業にそのまま組み込むことが可能です。
配色における注意点とアクセシビリティ
本ツールは色相の角度（180度、30度、120度、90度）を回転させる数学的な計算によって色を算出するため、文化的な背景や特定の文脈における色の意味合いまでは考慮されていません。
また、生成された色同士のコントラスト比（視認性）の評価は行いません。そのため、背景色とテキスト色として組み合わせる場合は、実際のインターフェースに適用する前にWebアクセシビリティ基準（WCAG）を満たしているか、別途コントラストチェッカー等を用いて確認することを推奨します。
よくある質問
どの配色パターン（類似色、補色など）を選べばよいですか？
目的に応じて使い分けてください。注意を引きたいアクションボタンには補色が、全体をまとまった印象にしたい背景やカード要素には類似色やシェードが向いています。
生成された色はアクセシビリティ基準を満たしていますか？
いいえ、本ツールは色相の数学的な計算のみを行っており、コントラスト比の保証はしていません。テキストと背景の組み合わせに使用する場合は、別途アクセシビリティ専用のツールで視認性を確認してください。
複数の色や画像からカラーパレットを作成できますか？
本ツールは1つの基準色（ベースカラー）から配色を展開する仕様となっているため、複数の色や画像からの抽出には対応していません。ブランドカラーなど、メインとなる1色を入力してください。
彩度や明度が極端に低い色を入力するとどうなりますか？
白や黒、グレーなど彩度がゼロに近い色を入力した場合、色相を回転させても変化が生まれないため、類似色や補色などのパレットも同じ無彩色になります。有彩色のベースカラーを指定することをおすすめします。
生成する色の数や色相の角度をカスタマイズできますか？
現在のところ、カスタマイズ機能は提供していません。デザインの基礎となる標準的な角度（30度、90度、120度、180度）を用いた5種類の固定パターンのみを生成します。
ツールの不具合や改善案はありますか。 フィードバックを送る