璃月やわらぎ豊穣透明

沈玉の谷・上谷・逆光

Chenyu Vale: Upper Vale, Backlit

色カード

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

再構成グラデーション

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

0%c295b024%fed89842%ae7d5666%a98959100%54692f

なぜ調和するのか

逆光の画面で最も明るく、最も鮮やかな一点は太陽の上ではなく、一枚の葉の上にある。最も明るい 4,000 画素は二つの塊に分かれ、峰の隙間の日射しは L 0.90・彩度 0.091、右縁の光が透けた樹冠は L 0.93・彩度 0.177 である。反射は色を白のほうへ洗うことしかできない。透過は光の明度に素材自身の色相を掛ける——光を描くなら、ピークは光が通り抜けたものに渡すこと。光源自身は高明度・低彩度で足りる。

最も明るい一点は葉である

画面で最も明るい 4,000 画素は二つの塊に落ちる。一つは (0.53, 0.43)、二つのカルスト峰のあいだの隙間で、太陽はそこに沈み込んでいる。平均 L 0.90・彩度 0.091。もう一つは (0.96, 0.37)、右縁の、背後から光に貫かれた樹冠で、平均 L 0.93・彩度 0.177。葉のほうが太陽より明るく、そのうえ二倍近く鮮やかである。

空は一画素も 0.082 を越えない

空をつくる二本の色帯——赤 345°–15° が 12.11%、桃 315°–345° が 4.52%——はどちらもピーク彩度がちょうど 0.082 で止まる。画面上端 6% の空は実測 L 0.72・彩度 0.064、これに対し画面下三分の二のピークは 0.218 である。反射面も同じように洗われている。全画面で 165°–315° に落ちる画素はわずか 8 個、湖面ですら 77° の黄緑だ(同じ谷のもう一方、〈沈玉の谷・南峰・晴れの霞〉では 165°–270° だけで 97.12% を占める)。散乱と反射はスペクトル全体をまとめて持ち上げる。持ち上がる方向は白であって、純ではない——夕暮れが鮮やかに見えても、鮮やかなのは空ではない。

透過とは明度に色相を掛けること

右縁のあの樹冠から最も鮮やかな 3% だけを取り出すと、L 0.88・彩度 0.197・色相 125°——明度の首位と彩度の首位が同じ一握りの画素なのである。薄い葉は光を跳ね返すのではなく、葉自身の色相を乗せて光を通す。だから二つのチャンネルが同時に頂点に立てる。反射面のほうは、明るくなるぶんだけ淡くなる。UI のどこかを「光っている」ように見せたいなら、より白いハイライトを足すのではなく、自分の色相が透けて出る薄い面を一枚重ねること。

この配色を持ち帰る

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

/* 沈玉の谷・上谷・逆光 · Chenyu Vale: Upper Vale, Backlit — Teyvat Palette */
:root {
  --dusk-mauve: oklch(0.72 0.064 342); /* 霞の紫 #c295b0 */
  --sun-gap-gold: oklch(0.9 0.091 80); /* 日の隙間の金 #fed898 */
  --lit-leaf: oklch(0.88 0.197 125); /* 透ける葉の緑 #baed43 */
  --autumn-crown: oklch(0.61 0.143 47); /* 秋木の橙 #c6642c */
  --hazed-bank: oklch(0.63 0.081 59); /* 霞岸の金 #ae7d56 */
  --lake-sheen: oklch(0.65 0.076 77); /* 湖面の黄緑 #a98959 */
  --lotus-pad: oklch(0.49 0.087 126); /* 蓮葉の緑 #54692f */
  --gradient-chenyu-vale-upper-vale: linear-gradient(180deg, oklch(0.72 0.064 342) 0%, oklch(0.9 0.091 80) 24%, oklch(0.63 0.081 59) 42%, oklch(0.65 0.076 77) 66%, oklch(0.49 0.087 126) 100%);
}

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