OKLCH での勾配補間
知覚空間で補間することで、中間点の濁りを回避します。
Formula
スムーズなブレンドを実現するには、RGB ではなく OKLCH で L、C、H を補間します。
Variables
- R、G、B
- sRGB チャネル (0 ～ 255 または 0 ～ 1 の正規化)
- H、S、L
- HSL の色相 (度)、彩度、明度 (0 ～ 1)
- L
- HSL/OKLCH の相対輝度 (WCAG) または明度
FAQ
- OKLCH のグラデーション補間は印刷ワークフローに対して正確ですか?
- 画面の RGB と印刷の CMYK は異なる色域を使用します。変換を近似的な証明として扱います。商業印刷用の ICC プロファイルを使用して調整します。
- この式を CSS で使用できますか?
- 最新の CSS は、多くの操作で color-mix()、oklch()、および lab() をサポートしています。複雑なパイプラインの場合は、JavaScript で計算し、CSS 変数をエクスポートします。
- Color DevByte は私のカラーをアップロードしますか?
- いいえ。数式リファレンス ページは静的なドキュメントです。インタラクティブ ツールはブラウザ上で 100% クライアント側で実行されます。
概要
知覚空間で補間することで、中間点の濁りを回避します。
Color DevByte は、サーバーにデータを送信せずに再現可能な色の計算を必要とする開発者、デザイナー、アクセシビリティのレビュー担当者向けに、この公式を文書化しています。
リンクされたカラー ツールを使用して、ライブ プレビューとマルチフォーマット エクスポートでこの数式をインタラクティブに適用します。
この式を使用する場合
デザイン トークンの構築、WCAG コントラストの検証、または CSS、Tailwind、またはデザイン システム JSON でのカラー パイプラインの自動化を行うときに、oklch でグラデーション補間を適用します。
実稼働 UI の場合は、常にコントラスト チェッカーまたはビジュアル プレビューを使用して結果を確認してください。ガンマ補正と色域マッピングのエッジ ケースにより、結果が変わる可能性があります。
実装メモ
ブラウザベースのツールは、輝度または ΔE の計算前に sRGB を線形化する必要があります。
RGB ブレンドで一般的な灰色がかった中間点を避けるために、グラデーションとテーマには OKLCH または LAB 補間を優先します。