なぜ私たちはRGBとHSLからOKLCHへ移行したのか？（翻訳）

• OKLCH色空間は、従来のRGBやHSLと異なり、人間の知覚に基づいているため、より精密で予測しやすい
• デザインシステムとアクセシビリティの向上に適しており、特にP3のような広色域カラーの表現に強みがあり、最新デバイスとの互換性も高い
• oklch()は読みやすく直感的な色形式で、コードベースでの色操作が容易になる。明度(L)、彩度(C)、色相(H)、不透明度(a)を区別できる
• CSS Colors 4/5仕様とともにネイティブな色操作機能が強化されつつあり、OKLCHは将来性のある選択肢である
• Stylelint、Figmaプラグイン、JSライブラリなどのエコシステムも急速に発展しており、デザインと開発の協業にも好影響がある
• ただし、まだエコシステムは成熟しておらず、一部の組み合わせはすべてのモニターで表示できない可能性がある

プロジェクトにOKLCHを適用する

1. 既存CSSの色の値を見つけてOKLCHに変換し、Figmaプラグインや変換ツールを使ってOKLCHの色をコピーして適用する
2. CSS内の色をカスタムプロパティのパレットとして整理し、再利用性と保守性を向上させる
3. Stylelintとpluginを使って、OKLCH以外の色の使用を自動検出して防止する
4. CI環境にStylelintを統合し、色の一貫性チェックを自動化する

OKLCH移行後に得られた利点

1. より高いコード可読性
2. 予測可能な色の修正
3. 相対色ベースのデザインシステム構築
4. P3カラーなど高度な視覚表現への対応
5. デザインチームとのより良い協業の可能性

[chinnotching]

DMXカラー照明のようなシーケンスの作成や可読性の面で、利便性がかなり向上しそうです