ナド・クライ昼峻厳涼やか晴れ晴れ

逐浪野・崖の陰

Wavechaser Plain in the Cliff's Shade

色カード

色をクリックすると HEX をコピー、ホバーで OKLCH 値を表示します。

再構成グラデーション

シーンから蒸留したグラデーションをストップ順に左から右へ展開。完成角度は 180°(ヒーローとエクスポートで使用)、ギャラリーのカードは一律 135° の斜めで表示します。

0%5e9be418%71799545%2c395b64%71799584%99af67100%5a8abc

なぜ調和するのか

色相は「素材が変わった」ときのために取ってあるもので、「明るさが変わった」ときのためのものではない。同じ一枚の崖の上で、あの洞口は明度だけを動かし(L 0.58 → 0.35)、色相は 6° しか歩かない(273° → 267°)。崖と空のあいだは彩度だけを動かし(0.044 → 0.126、2.9 倍)、色相は 19° しか歩かない。210°–315° というひとつの族のなかに岩、洞の翳り、空、水の四つが収まり、画面の 77.18% を占めていながら、どれも取り違えられない。全画面で本当に色相を替えている唯一の境は崖の足元の草の線、153°(275° → 122°)——そしてそこだけが、両側が本当に別の素材である境なのである。

洞口は明度しか借りない

崖の受光面の大きな一片は実測 273°、L 0.58、彩度 0.044。崖の中腹に大きく開いたあの洞口は 267°、L 0.35、彩度 0.063。明度は 0.23 落ちるのに色相の差は 6° しかない——画面の明度の 1 パーセンタイルは 0.25 で、いちばん暗い一片はこの口のなかにあり、中央値は 0.61 である。それでも「黒い塗り」ではなく「同じ岩の光の当たっていないところ」として読めるのは、明度以外に何ひとつ変えていないからだ(彩度はむしろ 0.019 上がる。逆光面を照らしているのが、彩度 0.126 のあの空だけになるからである)。

空は彩度しか借りない

右上のひと角の空は実測 254°、L 0.68、彩度 0.126、画面でいちばん鮮やかな大きい面である。崖の面とは明度で 0.10、色相で 19° しか違わないのに、彩度は 2.9 倍。同じ族はさらに続く——右手はるか奥の山と靄が 249°、L 0.76、彩度 0.103、右下に寄せてくる海の水が 251°、L 0.62、彩度 0.093。青帯 52.35% に紫帯 24.83% を足して画面の 77.18%。岩と空と靄と水の四つが同じ色相の族にひしめいていて、それらを分けているのは色相ではない。

唯一色相を替える境が、唯一素材を替える境

崖の足元の草地は緑帯 18.35%、実測 122°、彩度 0.106、L 0.71。崖の 275°、0.052、0.56 に対して 153°——画面で最大の色相の跨ぎであり、同時に両側が本当に別のもの(石と生きた地面)である唯一の境でもある。それより小さな例外は岩礁に立つ赤い幟で、315°–45° は全画面で 191 画素、0.02% にすぎないのに、実測 20°、彩度 0.155、ピーク 0.173——この絵の彩度の天井そのものである。インターフェースでも同じことで、同じ部品の状態は明度だけ、階層は彩度だけを動かし、色相を動かした瞬間に「これは別の種類のものだ」と告げてしまう。一つの境が借りるのは一本だけ。三本を同時にひねれば、階層はもう読めない。

この配色を持ち帰る

CSS 変数、Tailwind v4 テーマ、または SVG。ワンクリックでプロジェクトへコピーできます。

/* 逐浪野・崖の陰 · Wavechaser Plain in the Cliff's Shade — Teyvat Palette */
:root {
  --cliff-face: oklch(0.58 0.044 273); /* 崖の面 #717995 */
  --cave-mouth: oklch(0.35 0.063 267); /* 洞の翳り #2c395b */
  --zenith-blue: oklch(0.68 0.126 254); /* 天頂の青 #5e9be4 */
  --far-peaks: oklch(0.76 0.103 249); /* 遠峰の靄 #7cb6f0 */
  --shore-water: oklch(0.62 0.093 251); /* 岸の水 #5a8abc */
  --foot-meadow: oklch(0.72 0.1 123); /* 崖下の草 #99af67 */
  --banner-red: oklch(0.49 0.155 20); /* 幟の赤 #a62f3a */
  --gradient-lunar-treasury-wavechaser-plain-location-context: linear-gradient(180deg, oklch(0.68 0.126 254) 0%, oklch(0.58 0.044 273) 18%, oklch(0.35 0.063 267) 45%, oklch(0.58 0.044 273) 64%, oklch(0.72 0.1 123) 84%, oklch(0.62 0.093 251) 100%);
}

1080×1350 の PNG。元の風景・パレット・カラーコードが入っているので、保存してそのまま投稿できます。