濁らないグラデーションの色選び.pdf

Transcript

1. 見る目を鍛える会 濁らないグラデーションの色選び 2026/10/15 れふれふ
2. 美しいグラデーションにするには？ 1 黄→青 2 水色 → ピンク 3 緑→青 4 赤紫 → 橙 5 赤→白 6 黄緑 → 黒 2
3. グレースケールでチェックしてみる 3 1 くすむ 真ん中が灰色になる 2 沈む 3 浮く 真ん中だけ明るく光る 4 ぼやける 真ん中の色がくすんでいる 5 褪せる 6 黒ずむ 黒の手前がオリーブ色に濁る ピンクのまま白へ抜ける 真ん中が暗く落ち込む
4. 原因は、どれも「経由色」選びの失敗 経由色＝グラデーションの途中で通る色。 1 灰色 2 暗い紫 3 まぶしいシアン 1・5・6は、経由色を「選ばなかった」 2・3・4は、経由色の「選び方」を間違えた 4 4 くすんだ赤 5 白っぽいピンク 6 濁った緑
5. 経由色は、2つの順番で選ぶ コツ① コツ② 色相 明度・彩度 どの色を経由するか 補色は回り道させる 色ごとの得意な明るさを使う → その色を、どの明るさ・鮮やかさで置くか 明るさは両端の間に灰や白を混ぜない まず色の系統を決めて、次にその系統の中でどの色かを決める。 5
6. 補足：マンセル表色系 アメリカの画家マンセルが1905年に発表した、 色を色相・明度・彩度の3つの物差しで表す体系。 1 明度＝白黒にしたときの明るさ 色相が違っても、明度が同じなら白黒で同じ 灰色になる。 2 一番鮮やかになる明度は、色相ごとに違う 黄は明るい所で、青紫は暗い所で 一番鮮やかになる（図の枠）。 3 反対の色相は、灰色の軸をはさんで 向かい合う 画面で出せる色を、マンセルの考え方で並べたイメージ 6 まっすぐ結ぶと、真ん中で灰色の軸を通る。
7. コツ① 色相 どの色を通すか ① 色相 7 → ② 明度・彩度
8. ① 色相：補色の場合、他の色相を経由 そのまま結ぶ 灰色を通る → くすむ 回り道：黄と青の線を軸に色相環を6等分し、残りの4か所の色を経由 A 緑を経由 B 青緑を経由 C ピンクを経由 D 紫を経由 補色の間には、回り道の色相を1つ置く。回る方向は、作品のイメージで選ぶ。 8
9. ① 色相：無彩色への変化も、色相を回す 5 白へ（光らせたい） 6 黒へ（消したい） そのまま：ピンクのまま、白っぽく抜ける そのまま：オリーブ色に濁る 橙 → 淡い黄を経由：光って見える 緑 → 深い青緑を経由：色のある深い暗さ 明るくなる方は黄の側へ、暗くなる方は青紫の側へ、色相を少しずつ回す。 9
10. ナチュラルハーモニー：光は黄みに、影は青みに 日の光は黄みを帯び、影は空の青みを帯びる。この“色相の自然連鎖”に沿った配色は、見慣れた自然な調和に見える。 ナチュラル 明るい所は黄寄り 暗い所は青紫寄り 逆にすると 明るい所が青み、暗い所が黄み → 見慣れない、不自然な印象 だからグラデーションも、明るくなる方は黄の側、暗くなる方は青紫の側へ色相を回すと自然に見える。 10
11. ① 色相：原色は明度が同じではない 上：一番鮮やかな色を一周並べたもの 下：それを白黒にしたもの ポイント 11 明るくしたい所 暗くしたい所 黄に近い色相を通す 黄から離れた、青紫に近い色相を通す 赤なら橙の側へ、紫なら赤紫の側へ 黄緑なら緑・青緑の側へ、橙なら赤の側へ
12. コツ② 明度・彩度 その色を、どの明るさ・鮮やかさで置くか ① 色相 12 → ② 明度・彩度
13. ② 明度：経由色の明るさは、両端の間にする 2 暗すぎる → 沈む 3 明るすぎる → 浮く よく見る紫：白黒で真ん中が落ち込む まぶしいシアン：真ん中だけ光る 明るい紫に：なだらかにつながる 暗めのシアンに：なだらかにつながる 白黒にして、真ん中が両端より暗くも明るくもならない明るさを選ぶ。 13
14. ② 彩度：経由色に、灰や白を混ぜない 4番は、赤紫と橙の間に赤を通したかった例。 どちらも赤系で、明るさも近い。違うのは鮮やかさだけ。 → くすんだ赤 鮮やかな赤 くすんだ赤を経由 白黒はなだらかでも、色の帯がぼやける 鮮やかな赤を経由 真ん中まで色が残る 経由色の鮮やかさは、両端と同じか、それ以上に。 14
15. 落とし穴：HSVでは、彩度だけ・明度だけを動かせない HSV（HSB）は表色系ではなく、RGB を言い換えたカラーモデル。 A 左へ（S を下げる） → 彩度が下がり、明度は上がる 最小値が上がる（白が加わる） 元の色 明度 ↑・彩度 ↓ B 下へ（B を下げる） → 明度が下がり、彩度も下がる R・G・B が同率で減る（黒が加わる） 外周＝H（色相角） 四角の横＝S、縦＝B 15 元の色 明度 ↓・彩度 ↓
16. これまでのコツで 復習 最初の6つは、どう直したのか？ 16
17. もう一度、最初の6つを直してみよう！ 1 黄→青 くすむ 2 水色 → ピンク 3 緑→青 浮く 4 赤紫 → 橙 ぼやける 5 赤→白 褪せる 6 黄緑 → 黒 黒ずむ 17 沈む
18. 経由色を選び直すと... 1 黄 → ピンク → 青 3 緑 → 暗めのシアン → 青 5 赤 → 橙 → 淡い黄 → 白 18 回り道の色相 2 水色 → 明るい紫 → ピンク 明度を上げる 明度を下げる 4 赤紫 → 鮮やかな赤 → 橙 黄の側へ回す 6 黄緑 → 緑 → 深い青緑 → 黒 彩度を上げる 青紫の側へ回す
19. まとめ：グラデーションを見るときのチェックリスト まず、グラデーションの真ん中の色を見る 19 コツ① コツ② 色相 明度・彩度 反対の色を、まっすぐ結んでいないか 白黒にして、浮き・沈みがないか → 回り道の色相を通す → 明るさは両端の間に 与えたい印象が得意な色相を通っているか 無彩色になっていないか → 明るくなる方は黄の側、暗くなる方は青紫の側へ → 鮮やかさは両端と同じか、それ以上に
20. おまけ１ 自然から学ぶ 炎・夕焼け・海・花びらから、色を拾ってみる 20
21. 炎：芯から、根元の青まで 拾った6色 #fffaf6 #fee0ab #ff954d #924943 #273762 #183674 6色をつなぐと（下は白黒） 芯 21 根元の青
22. 夕焼け：太陽の近くから、真上の空まで 拾った6色 #fcf769 #feb375 #fe8f95 #d87ca2 #a1659d #554a8b 6色をつなぐと（下は白黒） 太陽の近く 22 真上の空
23. 海：手前の深い所から、島の近くの浅瀬まで 拾った6色 #244ac4 #3188d0 #30b2de #1db8e7 #4fc7e5 #46c3f2 6色をつなぐと（下は白黒） 手前の深い所 23 島の近くの浅瀬
24. 花びら：中心から、花びらのふちまで 拾った6色 #ead823 #eb7722 #f37d23 #ac3420 #711a1d #7a1932 6色をつなぐと（下は白黒） 中心 24 ふち
25. おまけ２ 計算による色の補間 人間の色彩感覚を計算で表す 25
26. OKLCH：今日の話を、計算でやっているもの Oklab（2020年に発表された色空間）を、明るさ・彩度・色相で表したもの。Oklab は Photoshop・Unity・CSS、OKLCH は CSS で使われている。 今日の話（感覚） 白黒にして、明るさを見る コツ② 明度 灰や白を混ぜない コツ② 彩度 色相を回す・回り道させる コツ① 色相 OKLCH（計算） → L 目の感じ方に合わせた明るさ → C 灰色の軸からの距離 → h 色相の角度 マンセルの「色相・明度・彩度」を、計算できる数値にしたもの。 26 数値の差 ＝ 見た目の明るさの差になるよう調整 0 なら灰色、大きいほど鮮やか 角度で補間すると、灰色の中心を通らない
27. 中身の具体例 OKLCH は、画面の数字を「明るさ L・彩度 C・色相 h」に置き換える。 RGB（画面の数字） 白黒にすると L 明るさ h 色相 黄 255, 255, 0 → 0.97 0.21 110° 赤 255, 0, 0 → 0.63 0.26 29° 青 0, 0, 255 → 0.45 0.31 264° 灰 128, 128, 128 → 0.60 0.00 — RGBでは同じ「255」でも、L は白黒にしたときの見た目どおり。灰色は C ＝ 0。 27 C 彩度
28. OKLCH：L・C・h で補間すると、色相が回転 L 明るさ 0（黒）〜 1（白） ＝マンセルの明度 C 鮮やかさ 0（灰色）〜 ＝マンセルの彩度 h 色相 0〜360°の角度 ＝マンセルの色相 L・C・h をそれぞれ補間するので、 色相は角度で回り、灰色の真ん中を通らない。 黄 → 青（下は白黒） 点線：Oklab（L・a・b のまま直線で補間）→ 灰 色の近くを通る オレンジ：OKLCH（角度で回る）→ 鮮やかなまま 28 回る向きは、ふつうは近い方（CSSでは shorter／longer hue で選べる）。 鮮やかさを保つぶん、画面で出せる色からはみ出すことがある。
29. OKLCHによる補間を感覚で出来るようになろう！ RGB補間 真ん中が灰色になる Oklab補間 明るさはなめらか。 でも、真ん中は灰色っぽい OKLCH補間 自動で回り道する。 でも、通る色は計算まかせ （ここでは緑〜青緑） Oklab ＋ 経由色（ピンク） 通る色を、自分で選ぶ 29