カラーパレットアプリ

全体の流れ

1. メインカラー（hex）を入力すると、その色を HSL（色相H・彩度S・明度L）に分解する。
2. 選んだ配色パターン（補色=+180°・類似色・分裂補色・3色配色・同系色）に応じて、色相 H に色彩理論の角度を足してアクセントの色相を決める。彩度 S と明度 L はメインから引き継ぐ（旧版はここを固定値にしていて色相しか効かなかったのを修正）。
3. 背景色から本文色 Ink を自動算出する（背景の明暗で近黒/近白を選び、メインの色相にわずかに寄せた“効きインク”）。
4. 生成した配色（背景・Main・Accent・Ink）を、擬似スライドの各役割（見出し=Main、下線/点/ボタン=Accent、本文=Ink、下地=背景）に当てはめて描画する。
5. 背景と Main / Accent の WCAG コントラスト比を chroma-js で判定し、近すぎる場合は枠線リングと注意文を表示。文字色はコントラスト不足なら Ink に退避させ、読めなくならないようガードする。
6. アクセントは直接編集（hex / ピッカー）や補色 ±60° スライダーで微調整でき、手編集はメインを変えても保持される。別パターンを選ぶとリセット、明示リセットで自動生成に戻る。
7. Vite で単一のSPAにビルドし、Cloudflare Workers で公開している。

使った技術

React

状態に応じてUIを再描画するコンポーネントベースのライブラリ。色を変えると全体が即再配色される基盤。

TypeScript

型付きJavaScript。配色ロジックの取り違えを型で防ぐ。

Vite

高速な開発サーバー＆ビルド。SPAを公開用の静的アセットに固める。

chroma-js

色の変換（hex↔HSL）・派生色の生成・WCAGコントラスト計算を担う色操作ライブラリ。

Cloudflare Workers

ビルドした静的サイトを公開（ホスティング）。

実装の工夫

• 派生色（アクセント）は『メインの色相に色彩理論の角度を足し、彩度・明度はメインからクランプして引き継ぐ』設計に修正。旧版の S/L ハードコードで色相しか効かない問題を解消した。
• 無彩色（彩度ゼロ）入力は色相が不定（NaN）になるため、直近の有効な色相を保持し、低彩度時は警告を出す。暗黙のフォールバック固定はやめた。
• 可読性を最優先に、枠線や文字色の基準を『ボタン自身の色』ではなく『背景に対して見える色』に置き、WCAG コントラストで判定する。
• 配色は『役割に当てはめた擬似スライド』で見せる設計にし、既に裏で算出していた本文色を Ink ロールとして明示。凡例から hex をワンクリックコピーできる。
• 1画面表示はデスクトップ（≥1280×720）限定の best-effort（CSS Grid＋minmax(0,1fr)＋min-height:0）。狭い画面は素直にスクロールを許容する。
• 設計の岐路（補色UX・1画面化・色数を3か4か）ごとに別モデル（Codex）でセカンドオピニオンを取り、過装飾を抑えて最小実装に収束させた。

用語

React

UIを部品（コンポーネント）で組み立てるJavaScriptライブラリ。状態（選んだ色）が変わると画面を自動で再描画する。色を変えると全体が即再配色されるのはこの仕組み。

TypeScript

JavaScriptに『型』を足した言語。配色ロジックの取り違えを型でチェックし、バグを書きにくくする。

Vite

開発サーバーとビルドを高速にこなすフロントエンドのビルドツール。アプリを公開用の静的ファイルにまとめる。

chroma-js

色の変換（hex↔HSL）・派生色の生成・コントラスト計算を行うJavaScriptの色操作ライブラリ。

HSL（色相・彩度・明度）

色を『色味（H）・鮮やかさ（S）・明るさ（L）』の3軸で表す方式。アクセント生成の土台になる。

補色・色相環

色を環状に並べたものが色相環。その反対側（約180°）にある色が補色で、互いを引き立てる。

WCAGコントラスト比

文字と背景の見やすさを数値化したアクセシビリティ基準。近すぎる配色を検出して警告するのに使う。