6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

色相(Hue)の回転はHSL色空間よりLCH色空間のほうが自然に見える

Last updated at Posted at 2020-07-04

色相(Hue)を少しずつずらして別の色を作ることがたまにありますが、その際、HSL色空間よりLCH色空間でずらしたほうが人間の知覚にとって自然に見えます。

それを視覚的に確認するためにデモサイトを作りました。

デモ: https://fujiharuka.github.io/color-rotation/

HSL 色空間で色相をずらした場合

スクリーンショット 2020-07-04 15.48.07.png

左端の色が基準となる色で、HSL 色空間で色相を少しずつずらして色を生成しています。白を背景色とした場合、文字が読みにくい色があることがわかります。

LCH 空間で色相をずらした場合

スクリーンショット 2020-07-04 15.48.02.png

左端の色が基準となる色で、今度は LCH 色空間で色相を少しずつずらして色を生成しています。白の背景色に対して文字が読みにくい色はありません。LCH のほうが自然に色のバリエーションが作れています。なぜこうなるのかというと、LCH色空間は人間の知覚差異を考慮した空間だからです。

参考

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?