Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
沈玉の谷・南峰・晴れの霞
璃月昼空濛遥遠清澄

沈玉の谷・南峰・晴れの霞

Chenyu Vale: Southern Mountain in Bright Mist

色カード

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

再構成グラデーション

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

0%50bfef14%d7f6f534%acf3fb52%cdb1c372%579a72100%227183

なぜ調和するのか

明度が描くのは遠近で、主従を描くのは色相の「数」である。全画素の 97.12% が 165°–270° の一族に押し込まれ、明度は霞の中の遠峰 L 0.92 から前列の尾根 L 0.51 まで単調に下がる——この階段はどの層が遠いかを言えても、どこを見ればいいかは言わない。主役を指名するのは第二の階段のほうだ。画面の暖色画素 751 個のうち 750 個は y 0.35–0.55 の一本の帯にしかなく、そのために中景だけが三つの色相家族を揃えた層になる。

01

明度は遠近しか語らない

霞の中の遠峰 L 0.92、中景の主峰 L 0.76、前列の尾根 L 0.51——近づくほど暗くなる、きれいな距離の関数である。ところが彩度はそれについて行かない。同じ三か所を測ると 0.071、0.098、0.079 で、最も高いのは中景、両端はどちらも低い。つまり明度はどの層が遠いかを教えても、どの層を見るべきかは教えない。二つの仕事には二本の物差しが要る。

02

暖色は真ん中の帯にしか住まない

315°–45° の暖色画素は全画面で 751 個。平均 339°、彩度 0.041 で、青い岩肌の 0.093 より低い。それは中景の尾根に散る十数叢の桃色の花木で、左では小さな家並みを、中央では崩れた石垣と山へ上る土の道を囲んでいる。y 0.35 より上には一つもなく、y 0.55 より下も 1 個しか残らず、750 個が画面高の五分の一しかない真ん中の帯に集まっている。彩度で勝っているのではない——中景を、画面で唯一三つ目の色相家族を持つ層にしたことで勝っている。

03

緑は二本目の物差し

緑(90°–165°)は全画面で 21,178 画素、そのうち画面上 45% に入るのはわずか 47 個。一方で彩度の高い順に 4,000 画素を取ると、3,945 個がこの一族に属する。遠峰は第二の色相を持たないシルエットで、草は歩いて行ける二つの層にしか生えない——「この層にいくつの色相家族を許すか」が、明度から独立した二本目の物差しになるのだ。遠景 1、中景 3、近景 2。〈絶雲の間・朝霧〉は同じカルストで明度階段によって空気遠近法をつくった。この一枚もそれをやっている。違うのは、主役の居場所を言うためにもう一本の物差しを要したことだ。奥行きをつくるとき明度だけを回さないこと。最も遠い層は色相を一つに絞り、主役の層にはもう一つ家族を配ること。

この配色を持ち帰る

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

/* 沈玉の谷・南峰・晴れの霞 · Chenyu Vale: Southern Mountain in Bright Mist — Teyvat Palette */
:root {
  --cloud-crown: oklch(0.95 0.032 196); /* 雲頂の白 #d7f6f5 */
  --distant-ridge: oklch(0.92 0.071 205); /* 遠峰の青 #acf3fb */
  --valley-sky: oklch(0.76 0.121 230); /* 谷天の青 #50bfef */
  --blossom-pink: oklch(0.79 0.041 339); /* 花木の桃 #cdb1c3 */
  --ridge-grass: oklch(0.63 0.092 156); /* 崖上の草緑 #579a72 */
  --near-ridge-stone: oklch(0.51 0.079 216); /* 近尾根の石青 #227183 */
  --gradient-chenyu-vale-southern-mountain: linear-gradient(180deg, oklch(0.76 0.121 230) 0%, oklch(0.95 0.032 196) 14%, oklch(0.92 0.071 205) 34%, oklch(0.79 0.041 339) 52%, oklch(0.63 0.092 156) 72%, oklch(0.51 0.079 216) 100%);
}

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