移行中の知識
彩度
Saturation
定義
彩度（saturation）とは、ある色がその色自身のbrightnessに対して、どの程度強い色みを持って見えるかという色外観属性です。CIEではchromaとは別概念で、CSSのHSLにあるsaturation componentもCIEの知覚属性そのものではありません。実制作では「彩度を上げる」という言い方が広く使われますが、どのcolor modelの何を動かしているかを確認して扱います。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
Webのcolor pickerでaccent colorを調整する場面
HSLのSを上げた時の見え方
見るポイント
HSLのsaturation値を上げる前後を比較し、見た目の色みの強さだけでなくlightnessや色相ごとの見え方の差も確認する。HSLの100%を「知覚上の彩度100%」とは解釈しない。
light / dark modeのbrand color調整
明るさが異なる同系色の比較
見るポイント
明るい背景用と暗い背景用で色を調整する時、同じchroma値や同じHSL saturation値だけを揃えず、brightnessとの関係で色みがどの程度強く感じられるかを見る。
注意
誤解しやすい点
- saturationとchromaを完全な同義語として扱う。
- HSLのsaturation percentageを、color spaceや観察条件に依存しない知覚的な彩度尺度だと考える。
- 彩度を上げればcontrastやアクセシビリティも自動的に向上すると考える。
関連
関連する概念
出典