OKLCHで高コントラストなカラーパレットを生成するサイトを作った【ダークテーマ対応】

DRANK

おいカラーパレットさ作るんだで！（A11y工船）リスペクトこの記事およびプロダクトは、フロントエンドカンファレンス北海道での発表 「ダークテーマとアクセシビリティの融合したカラートークンの設計」 に感銘を受け製作しました。 裕貴（Qiita.inc）,「ダークテーマとアクセシビリティの融合したカラートークンの設計」August 23, 2024, slide 23この問題に対して、上記スライドでは以下のような解決をしています。出口 裕貴（Qiita.inc）,「ダークテーマとアクセシビリティの融合したカラートークンの設計」August 23, 2024, slide 36明度の変化曲線を工夫することで、見事にコントラスト比を高く維持することに成功しています。天才すぎる...OKLCHとの出会いHSB色空間では、色相（Hue）、彩度(Saturation)、明度(Brightness)を変化させて色を作ることができますが、明度が同じでも、色相によって色への感じ方に違いが出てしまったりしまいます。 green r g b)のように、fromから元の色を選択し、その後に各パラメータを入力すると、元の色からある一つのパラメータを変えた色を生成することができます。 ${color} ${lightness} c h)のようにすれば、OKLCH空間を使って…