Color Converter の設計

CSSでは色を #3b82f6（HEX）・rgb(59, 130, 246)（RGB）・hsl(217, 91%, 60%)（HSL）など複数の形式で表現できます。 デザインツール（Figma, Adobe XD など）からコピーした値と、 コードベースや shadcn/ui が期待する形式が一致しないことは日常的に発生します。

HEXからRGBへの変換は暗算でもできますが、HEXからHSLへの変換は三角関数と条件分岐を含む複雑な計算です。 これを瞬時に行えるツールの需要は高く、特にデザインシステムを構築する際に重宝します。

convertColor(input: string): ColorConvertOutput が単一のエントリポイントです。 入力文字列を複数のパーサーで試行し、最初にマッチしたパーサーの結果から 全形式（HEX・RGB・RGBA・HSL）を一度に算出して返します。

• パーサー群: parseHex・parseRgb・parseRgba・parseHslString の4関数が それぞれ正規表現で入力を検証し、RGBAコンポーネントに分解します。
• 変換関数: rgbToHsl・hslToRgb が 色空間間の変換を担います。内部でのみ使用される純粋な数値変換関数です。
• buildResult: RGBAコンポーネントを受け取り、ColorConvertResult（全形式の文字列を含む）を組み立てます。

HEXパーサーは3桁・4桁・6桁・8桁の4パターンに対応します。 3桁の場合は各桁を2回繰り返して6桁相当として解釈します（例: #abc → #aabbcc）。 8桁の場合は最後の2桁がアルファ値（0〜255）となります。

RGB→HSL変換では、まず各チャンネルを0〜1に正規化します。 輝度（lightness）は l = (max + min) / 2 で求め、 彩度（saturation）は l > 0.5 かどうかで計算式が変わります （明るい色と暗い色で異なる計算式を使うことで、視覚的に正確な彩度が得られます）。

HSL→RGB変換では、まず色の鮮やかさを表す補助値c = (1 - |2l - 1|) × s と、隣接する色成分への遷移量x = c × (1 - |(h / 60) mod 2 - 1|) を算出し、 色相の60°ごとの6セクターに応じてR/G/Bに値を割り当てます。

src/lib/tools/__tests__/color-converter.test.ts に Vitest による単体テストを実装しています。

• パーサーテスト: 3桁・6桁HEX、RGB・RGBA・HSL各形式の正常パース、 および無効な値（r=256 など境界値オーバー）のエラー確認。
• 変換精度テスト: 既知の色（赤 #ff0000、白 #ffffff、 黒 #000000）の変換結果が正確な値と一致するか検証。
• 往復変換テスト: HEX→RGB→HSL→RGBと変換した結果が 元の値に復元されることを確認（丸め誤差の許容範囲内で）。