移行中の知識
色補間
Color Interpolation
定義
色補間（color interpolation）とは、2つ以上の色の間にある中間色を、選んだcolor spaceと補間方法に基づいて計算することです。同じendpointでも、sRGB、linear-light RGB、Oklab、OKLCHなど補間spaceが違えば途中の明るさ・chroma・hueの経路が変わります。gradient、animation、transition、color-mixなどで結果へ直接影響します。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
brand hero gradient
2色gradientの中間が濁る
見るポイント
endpointだけを固定してsRGBとOklab / OKLCHのinterpolationを比較する。中間部のlightness低下やchroma、hueの回り方を見て、目的に合うspaceを選ぶ。
interactive data visualization
status colorのtransition
見るポイント
state間をcolor animationする時、中間色が別のsemantic colorに見えたりcontrastを失ったりしないか確認する。開始色・終了色だけの適合で判断しない。
注意
誤解しやすい点
- endpoint colorが同じなら、補間spaceに関係なく中間色も同じになると考える。
- perceptual spaceを使えば常に最良のgradientになると考え、physical light mixingやlegacy compatibilityなど目的差を無視する。
- hue interpolationの経路を確認せず、補色付近で意図しない色相を通ることを見落とす。
関連
関連する概念
出典