本ツールが提供する配色生成機能と基本操作の概要
本ツールは，利用者が指定した一つのベースカラーから，固定の変換規則に従い6種類のカラースキームを計算し，比較用の候補として表示するツールです．ベースカラーは，不透明な6桁のHEXコードを入力するか，ブラウザのカラーピッカーを使うか，色相・彩度・HSL明度の各スライダーを動かして調整できます．
HEX入力は「#RRGGBB」の形式に限定して検査します．例えば#3B82F6や#ffffffは有効ですが，#fffのような3桁，透明度を含む8桁，#を省いた値，rgb()やhsl()の文字列は受け付けません．入力の途中で無効な形式になった場合はエラーを表示し，パレットは直前の有効なベース色の結果を維持します．入力欄の文字列と表示中の結果が一時的に異なる理由はこのためです．
画面右側に並ぶ色カードには，その候補色のHEX，RGB，HSLを表示します．カードはマウスだけでなく，キーボードでも操作できるボタンです．操作するとコピーされるのはその色の6桁HEXだけで，RGBやHSL，CSS変数，パレット全体はコピーしません．Clipboard APIが成功したときだけ完了表示を出し，権限やブラウザ環境で失敗したときは手動コピーを案内します．
HSLを用いた6種類のカラースキーム生成規則
本ツールが提示する配色候補は，ベースカラーのHSL値を基準に，色相の角度や彩度・明度に固定の差分を加える規則で作ります．色相は360度周期なので，計算結果が負になるか360度以上になったときは，0度以上360度未満の同値な角度へ折り返します．
「補色（Complementary）」はベース色と色相を180度ずらした色の2色です．「類似色（Analogous）」はベース色を中心に，色相-60度，-30度，0度，+30度，+60度の5色を並べます．「トライアド（Triadic）」は0度，+120度，+240度の3色，「分裂補色（Split-Complementary）」は0度，+150度，+210度の3色です．
「テトラード（Tetradic / Square）」は0度，+90度，+180度，+270度の4色を生成します．
「単色バリエーション（Monochromatic）」は色相を固定し，5色の彩度Sを順に-20，-10，0，+5，+10ポイント，HSL明度Lを+25，+12，0，-12，-25ポイント変えます．結果は0〜100%に収めます．ベース色が彩度0%の無彩色の場合は，便宜的な色相から色味が新たに発生しないよう，5色とも彩度0%を保って明度だけを変えます．
これらは本ツールが採用する固定の色相・彩度・明度規則です．名称が一般的な配色用語であっても，すべての用途で美しいこと，最適であること，必ず調和することを保証する評価アルゴリズムではありません．同じ候補でも，面積，文字，周囲の色，表示環境によって印象は変わります．
HEX，8bit RGB，HSLの内部変換と表示丸め
6桁HEXは，赤・緑・青の各チャンネルを2桁の16進数で表す不透明sRGB色です．例えば#12AB34は，R=18，G=171，B=52の8bit整数として読み取れます．本ツールはこのRGBをHSLへ変換し，色相と彩度，HSL明度を用いて第2章の候補色を作ります．
色の入力と生成に使うHSLは，知覚的に均一な色空間ではなく，sRGB色を色相・彩度・Lightnessで扱うための表現です．彩度が0%の灰色・白・黒では，色相を変えても表示色に影響しません．本実装はこの場合の色相を便宜上0度としますが，「灰色の本来の色相が0度」という意味ではありません．
RGBからHSLを求めると，H・S・Lには小数が生じることがあります．本ツールは内部計算でこの小数を保ち，カードに表示する直前だけHSLを整数に丸めます．パレット中のベース色は入力したHEXをそのまま保ち，その他の生成色はHSLから8bit RGBとHEXへ変換した後，実際に返すHEXからRGBとHSLを再計算して表示します．
そのため，画面に丸めて表示されたHSLの整数値を別の変換器へ入れても，カードのHEXと文字列の上で完全に同じになるとは限りません．HEX・RGB・HSL間の変換を完全可逆，誤差ゼロとするツールではなく，カードのHEXが最終的な表示色です．
色カードの表示と黒・白文字色の選択
各色カードの背景には生成したHEXを適用し，カード内にHEX，RGB，HSLを並べます．RGBは0〜255の各チャンネルの整数，HSLは色相と彩度・明度の丸めた表示値です．表示される三形式のうち，操作時にクリップボードへ書き込むのは大文字にした6桁HEXです．単色のRGB・HSLだけをコピーする切替や，全色の一括コピーはありません．
背景色によってカード上の値が読みづらくならないよう，表示用の文字色は黒#000000または白#ffffffから選びます．生成色の8bit RGBを0〜1のsRGB成分へ正規化し，現行定義の0.04045を境に線形化して，0.2126R + 0.7152G + 0.0722Bから相対輝度を求めます．その輝度と黒・白それぞれのコントラスト比を比較し，比率が高い方をカード文字に適用します．
この黒・白選択は，各カード内の値を表示するための局所的な処理です．パレット内の任意の二色を文字色と背景色にしたときの比率は求めず，WCAG AA・AAAの合否も表示しません．UI部品，画像，フォーカス状態，ページ全体のアクセシビリティ適合を判定・保証する機能でもありません．実際に使う前景色と背景色は，別のコントラストチェッカーで組み合わせごとに確認してください．
擬似乱数でベース色を作るランダム操作
「ランダム」ボタンは，JavaScriptのMath.random()を各RGBチャンネルに使い，0〜255の整数を一つずつ作って，6桁HEXへ変換します．この擬似乱数で変わるのはベースカラーです．その後の補色，類似色，トライアド，分裂補色，テトラード，単色バリエーションは，ランダムに探索せず第2章の固定規則で計算します．
したがって，ランダムボタンはAIが用途に最適な色を選ぶ機能でも，大量の配色を採点して最良案を返す機能でもありません．今のベース色と異なる起点を作り，6種類の規則でどのような候補になるかを比較するための操作です．Math.random()は暗号用の安全な乱数源ではありませんが，ここでは秘密値を作らず，色候補の起点にだけ使います．
実務では，色カードが並んだ状態だけで採用を決めず，文字，背景，ボタン，境界，ホバー，フォーカス等の実際の役割に当てはめて確認します．使用面積，隣接色，文字サイズ，端末の表示によって印象と視認性は変わります．本ツールは配色候補の起点を作る計算機であり，最終的なデザイン品質を保証するものではありません．
HSLの知覚的限界と本ツールの非対応範囲
HSLは色相角を加減して候補を作りやすい表現ですが，人間が感じる色差や明るさの差を均一に表す色空間ではありません．同じ30度の色相差でも，色域によって実際の見え方の差は異なります．同じHSL Lightness値の青と黄が，同じ視覚的な明るさに見えるとも限りません．これは色相間隔や明度差を「目にとって均等」とする計算ではないことを意味します．
本ツールはOKLCH・Oklab・Lab・LCHの知覚的な色差を使わず，Display-P3の広色域入力，CMYK，alpha付き色も扱いません．生成対象は不透明な6桁sRGB HEXです．透明度，グラデーション，画像背景，色覚特性別のシミュレーション，印刷時の色再現，ブランド適合性，色彩心理の効果は評価しません．
また，CSSカスタムプロパティやデザイントークンの生成，60-30-10の使用割合提案，個別色のロック，スペースキー等のショートカット，ダークモード用パレットの自動作成，配色の保存は行いません．HEXの検証，変換，6種類の候補生成，カード文字色の選択はブラウザ上のJavaScriptで実行しますが，それはページ表示，広告，アクセス解析，共通機能，ブラウザ拡張等の通信まで否定する説明ではありません．
生成結果は，実際の画面での見え方，コントラスト比，色以外の手掛かり，表示状態，端末差と組み合わせて判断してください．このツールの役割は候補を比較しやすい形で並べることであり，特定の配色が正解であることや，アクセシビリティ・安全性・品質を保証することではありません．