一色からTailwindのテーマを生成する 〜 OKLCHによるカラーカーブ設計 by okunokentaro

Tailwind CSSによって色の指定は効率化されましたが、ブランドカラーなど一色だけが決まっている状態から50〜950までの色をすべて用意する作業は、依然として手間な作業です。その難しさは、単に多くの色を用意することではなく、Tailwindの既存カラーパレットの濃淡やコントラストの変化を理解しなければならない点にあります。

この課題に対してTailwindの全既存色を対象に、色相レンジごとにモデル化し、テスト駆動で検証することで、その変化を支えるカラーカーブを自動生成する関数を実装しました。この設計を成立させるためには、RGB や HSL では不十分で、知覚的に連続した補間が可能な OKLCH を用いることが不可欠でした。本セッションではそのモデリングや実装の過程を紹介します。

この仕組みによって、一色だけ決まっている状態でも違和感のないテーマ作成を進められるようになります。