Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
アルダラビ河谷・清明の昼
スメール昼深緑澄明潤沢

アルダラビ河谷・清明の昼

Ardravi Valley, Clear Day

色カード

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

再構成グラデーション

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

0%c8f4fd14%67b4e646%569eb474%54ae71100%6fc843

なぜ調和するのか

空が画枠に入ったからといって、彩度の順位まで空のものになるわけではない——それはその空がどれだけ濃いか次第だ。アルダラビ河谷の空は実測 彩度 0.106、画枠最下縁のあの草丘は 0.189 で、全画面のピーク 0.206 もそこにある。最も濃い 4000 画素は、4000 個すべてがその草丘に落ちている。〈万種母樹・乾いた晴れ〉では乾いた空気が空を 0.165 まで押し上げ、地上で最良のものは 0.097 しかなく、勝負にならなかった。近景を彩度の主役にしたいなら、近景の彩度を上げるのではなく、空を淡くすること。

01

四千の画素が、一つ残らず足元に

全画面で最も濃い 4000 画素は、すべて 120°–150° の一区画に落ちる。重心は (0.61, 0.97)——画枠の最下縁、白い花の咲くあの草丘、つまり視点が立っている場所そのものだ。そこだけを測ると(0.55, 0.94 起点)L 0.76 / 彩度 0.164 / 色相 140°、ピーク 0.203 もここにある。一方、上縁の空は 0.106、谷の奥の尾根は 0.079。最も濃い一段は光の中にも遠くにもなく、足の下にある。「あなたはここに立っている」という屋外を描くなら、彩度の頂点は画枠最下縁の一本に渡すこと。空に渡してはいけない。

02

空気は半分を持って行き、天井は動かなかった

同じ草の斜面を近くから遠くへ三度測る:下縁 彩度 0.164 / 色相 140°、中景の斜面 0.126 / 152°、谷の奥 0.079 / 221°——空気は彩度の半分以上を持って行き、色相も 81° 折り曲げている。それでも全画面の天井は 0.206 のまま。天井は最も近い一区画に座っており、その前には何も立っていないからだ。屋外の彩度上限は「この空気がどれだけ厚いか」ではなく「最も近い地面の前に何が立っているか」で決まる。そしてこの空気は自分の色相を持っているから、遠くのものは空の 239° に折り込まれるのであって、漂白されるのではない——全画面の無彩(C<0.025)はわずか 0.10%。

03

緑の谷に見えて、実は 62.42% が青

全画面に色相帯は三本しかない:青 62.42%、青碧 23.47%、緑 14.00%。そして 270°–90° という 180° 幅の窓には、全画面で 8 画素しかない。面積では青が圧倒的なのに、誰もがこの絵を緑の谷と呼ぶ——緑帯の平均彩度 0.129 は青帯の 0.080 の 1.6 倍で、しかもほぼ全部が下半分に押し込まれているからだ。面積は空気のもの、彩度は足元のもの。一つの色相に絵を定義させたいなら、彩度と位置さえ与えればよく、面積は丸ごと譲ってかまわない。

この配色を持ち帰る

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

/* アルダラビ河谷・清明の昼 · Ardravi Valley, Clear Day — Teyvat Palette */
:root {
  --valley-grass: oklch(0.75 0.189 137); /* 谷底の草緑 #6fc843 */
  --slope-moss: oklch(0.68 0.126 152); /* 斜面の苔緑 #54ae71 */
  --far-ridge-cyan: oklch(0.66 0.079 221); /* 遠嶺の青碧 #569eb4 */
  --valley-sky: oklch(0.74 0.106 239); /* 谷空の青 #67b4e6 */
  --cloud-rim: oklch(0.94 0.047 211); /* 雲縁の白 #c8f4fd */
  --gradient-ardravi-valley: linear-gradient(180deg, oklch(0.94 0.047 211) 0%, oklch(0.74 0.106 239) 14%, oklch(0.66 0.079 221) 46%, oklch(0.68 0.126 152) 74%, oklch(0.75 0.189 137) 100%);
}

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