Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
霧の幽林道・碧の昼
フォンテーヌ昼清澄幽碧気配

霧の幽林道・碧の昼

Foggy Forest Path in Teal Daylight

色カード

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

再構成グラデーション

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

0%62cddb16%abfcfc40%3e949f62%7bbd5184%023934100%023536

なぜ調和するのか

二つの極値を相対する二辺に分ける必要はない——同じ中軸の上に積めば、画面は「枠がある」から「行き先がある」に変わる。最も明るい 2034 画素は (0.48, 0.31) の水霊の渦の上、L 0.94。最も鮮やかな 3310 画素は (0.46, 0.67) と (0.49, 0.62) のあの草地の上、彩度 0.148 と 0.149。二つの重心の横座標の差は 0.02 しかなく、片方は空に、片方は地にあり、その間にあるのがあの道だ。枠の仕事は三本目の軸に回す:左の木 L 0.30、右の木 0.30、下縁の草 0.31。

01

三辺は同じ暗さ、四辺目は手放される

左に立つ前景の針葉樹は実測 L 0.30 / 彩度 0.050 / 195°、右の一株は L 0.30 / 0.049 / 197°、下縁の草の斜面は L 0.31 / 0.053 / 186°——三辺の明度差は 0.01、彩度はすべて全画の中央値 0.065 より下に押さえられている。四辺目は参加しない:上縁の空は L 0.77 から 0.83、彩度 0.093 から 0.100、色相 203°〜208°。三つの暗い辺と同族でありながら、明度軸の半分ぶん明るい。〈明冠山地・素昼〉の枠は四辺すべてが中心の明るい側にあった。ここは三辺だけが暗い側にあり、欠けたその一辺こそ主体が入ってくる場所である。枠は閉じている必要はない——閉じた枠には入口がない。

02

最も明るい点と最も鮮やかな点が一本の縦線に積まれる

最も明るい 4000 画素のうち 2034 個は (0.48, 0.31) にあり、L 0.94 / 彩度 0.079 / 196°——谷口に浮かぶ水霊の渦だ。最も鮮やかな 4000 画素のうち 2712 個は 120°〜150°(L 0.71 / 彩度 0.149、重心 (0.46, 0.67))、さらに 598 個が 150°〜180°(L 0.69 / 0.148、重心 (0.49, 0.62))に落ちる。その草地だけを取り出すと、最も鮮やかな 3%(553 画素)は L 0.73 / 彩度 0.157 / 135°、全画の頂点 0.179 もここにある。二つの重心の横座標は 0.48 と 0.46。〈デボール大飯店・斜照〉は二つの極値を相対する二辺に配り、主体にはどちらも持たせなかった。この一枚は逆に両方を積み上げる。だから「最も明るい」と「最も鮮やか」は二つの目印ではなく、空から地へ通う一本の線になる。

03

ひとつの極値はひと筋しか使わない

渦は明度を取ったので他は要らない:色相 196° は最も暗い左の木の 195° と 1° しか違わず、彩度 0.079 は背後の空の 0.093 より低い。草地は彩度を取ったので他は要らない:L 0.71 から 0.73 で、空の 0.79 と木の 0.30 のちょうど間に挟まっている。それぞれがひと筋しか引き出さないから、積み重ねてもぶつからない。画面の残りは一筋も引き出さない——砂の道に見えるあの小道は実測 L 0.41 / 彩度 0.071 / 173° で、木とも空とも同族。緑は全画の 6.33% しかないのに 0.179 の天井を握り、76.54% を占める青帯の彩度平均は 0.067 にすぎない。全画に 330°〜90° の暖色検索をかけると、合わせて 2 画素・彩度 0.027。アクセントカラーも同じだ:ひとつの要素が枠を外れていいのは一本の通路だけ、二本目は返すこと。そうすれば焦点はひとつに限らなくてよくなる。

この配色を持ち帰る

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

/* 霧の幽林道・碧の昼 · Foggy Forest Path in Teal Daylight — Teyvat Palette */
:root {
  --open-sky: oklch(0.79 0.1 207); /* 木漏れの空青 #62cddb */
  --spirit-glow: oklch(0.94 0.079 196); /* 霊光の白 #abfcfc */
  --path-end-green: oklch(0.73 0.157 135); /* 道の果ての緑 #7bbd51 */
  --far-ridge: oklch(0.62 0.083 206); /* 遠嶺の青 #3e949f */
  --bank-grass: oklch(0.31 0.053 186); /* 岸辺の草の暗 #023934 */
  --frame-conifer: oklch(0.3 0.05 195); /* 縁取りの針葉樹 #023536 */
  --gradient-foggy-forest-path: linear-gradient(180deg, oklch(0.79 0.1 207) 0%, oklch(0.94 0.079 196) 16%, oklch(0.62 0.083 206) 40%, oklch(0.73 0.157 135) 62%, oklch(0.31 0.053 186) 84%, oklch(0.3 0.05 195) 100%);
}

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