SofGate

グラデーションの明度と彩度


グラデーションは彩度を維持して調整する

色のグラデーションを作成する際に、明度調整(白:FFFFFFへの収束)では合わないと感じる場合は、彩度を維持して調整する方法を試してみましょう。

色のグラデーションに違和感を覚える

白:FFFFFFへのグラデーション(明度調整)に違和感を覚える事があります。
これは明るい部分が全部白に見える事は日常的に少ない事と関係しています。あまりに明るければ目を閉じますからね。
逆に、暗い部分が全部黒に見える事は誰しも経験したことがある事でしょう。試しに以下の例を比較してみてください。
どちらも計算上は数値差が似ている明度変化(白:FFFFFFと黒:000000への収束)なのですが、黒への変化が「暗くなった」と感じる事に対して、白への変化は「明るくなった」と言うよりも「薄くなった」と感じませんか?

基本色のグラデーション(RGBの値を白:FFFFFFへの収束させる:明度→明)

5555AA55AAAA55AA55AAAA55AA5555AA55AAAAAAAA
7777BB77BBBB77BB77BBBB77BB7777BB77BBBBBBBB
9999CC99CCCC99CC99CCCC99CC9999CC99CCCCCCCC
BBBBDDBBDDDDBBDDBBDDDDBBDDBBBBDDBBDDDDDDDD
DDDDEEDDEEEEDDEEDDEEEEDDEEDDDDEEDDEEEEEEEE
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF

基本色のグラデーション(RGBの値を黒:000000への収束させる:明度→暗)

5555AA55AAAA55AA55AAAA55AA5555AA55AAAAAAAA
444488448888448844888844884444884488BBBBBB
333366336666336633666633663333663366CCCCCC
222244224444224422444422442222442244DDDDDD
111122112222112211222211221111221122EEEEEE
000000000000000000000000000000000000000000

彩度を維持したグラデーション

上例のように明度を変化させると色の特徴(彩度)がなくなるため、どちらも数値上は「色が薄くなった」のですが、このへんが人間の感覚の面白いところです。
難しい話は省略させて頂きますが、色の特徴(彩度)を保ったままのグラデーションが以下となりますので、比較してみてください。

基本色のグラデーション(RGBの数値差を変えないようにする:彩度維持変化)

000055005555005500555500550000550055555555
222277227777227722777722772222772277777777
444499449999449944999944994444994499999999
6666BB66BBBB66BB66BBBB66BB6666BB66BBBBBBBB
8888DD88DDDD88DD88DDDD88DD8888DD88DDDDDDDD
AAAAFFAAFFFFAAFFAAFFFFAAFFAAAAFFAAFFFFFFFF

● HOME ▲ PAGE TOP