Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
煙雲の山・夕靄
ナド・クライ夕幽寂荒寒凶兆

煙雲の山・夕靄

Ashveil Peak in Evening Haze

色カード

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

再構成グラデーション

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

0%6a568028%bfa1ce62%655382100%2b2f61

なぜ調和するのか

同じ測定、正反対の結果。ヒーシ島では最も明るい 4000 画素がすべて発光体の上にあった(L 0.96・彩度 0.020–0.031)。ここでは 3817 個が左手の、何も無い靄の中に落ちる(L 0.87・彩度 0.049)——そして本当に光っている二つのもの、岩壁の紫の核は L 0.66、崖下の青い光柱は L 0.48、彩度は 0.209 と 0.210 である。地そのものに色があるとき、「光っている」ことは彩度でしか語れない。

01

最も明るい一帯には何も無い

画面で最も明るい 4000 画素のうち 3817 個が (0.28, 0.30) に集まる——左手の遠峰の上に広がる空虚な靄で、平均 L 0.87・彩度 0.049、画面の彩度中央値 0.084 よりも低い。地平線に貼りついたその低い角度の明帯が画面唯一の光源方向でもあり、時刻を「夕」と取ったのはこの一条を根拠とする。残りは端数にすぎない:斜面に浮かぶ白い遊魂が 113 画素(L 0.91・彩度 0.033)、紫の核の外縁が 56 画素。眼は「最も明るい」を光源に与えない。まず最も遠いものに与えるのだ。

02

二つの光源が一つの彩度を共有する

岩の裂け目に嵌り、周囲に棘を炸裂させた紫の光核は実測 L 0.66・彩度 0.209・色相 313°。右手の崖下から野営の台へ垂直に落ちる青い光柱は L 0.48・彩度 0.210・色相 269°。明度差 0.18、色相の隔たり 44°、それでいて彩度の差は 0.001 しかない——しかも青い光柱の属する 210°–270° の色相帯は画面のわずか 0.34%、その色相さえ環境から与えられたものではない。二つが立つ紫の環境は平均彩度 0.085:光源は環境より 2.5 倍鮮やかでありながら、画面の明度中央値 0.38 より 0.10 高いだけだ。共有されている一項こそが「光っている」という信号である。

03

明度はとうに大気に貸してある

左手の靄帯は L 0.75・彩度 0.071、右手前の断崖は L 0.33・彩度 0.087——0.42 の明度差はまるごと奥行きを語るために使われ、両端の彩度はほとんど動いていない。しかも無彩画素は 1.69% しかなく、譲れる灰の一枚さえ無い。明度にも中性面にも残高が無いなら、強調は彩度の一本道しか残らない。これは発光の値付けでもある:同じ山の洞窟を描いた〈洞の光〉は彩度中央値が 0.034 しかなく、発光体は 0.178 まで登れば十分に眩しい。ここは地がすでに 0.084 なので、光源は 0.209 まで登らなければ物を言えない。ダークな画面設計でも同じだ——背景がグラデーションや写真になった時点で「より明るく」で強調するのをやめ、彩度をそれに与え、明度は奥行きに残しておくこと。

この配色を持ち帰る

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

/* 煙雲の山・夕靄 · Ashveil Peak in Evening Haze — Teyvat Palette */
:root {
  --dusk-haze: oklch(0.75 0.071 314); /* 夕靄の粉 #bfa1ce */
  --cloud-crown: oklch(0.49 0.07 306); /* 雲頂の紫 #6a5680 */
  --scarp-violet: oklch(0.33 0.087 277); /* 崖の紫 #2b2f61 */
  --abyss-core: oklch(0.66 0.209 313); /* 深淵核の紫 #be62eb */
  --beacon-blue: oklch(0.48 0.21 269); /* 導きの青 #3149d1 */
  --camp-ochre: oklch(0.6 0.053 41); /* 野営の赭 #9c7668 */
  --gradient-ashveil-peak: linear-gradient(180deg, oklch(0.49 0.07 306) 0%, oklch(0.75 0.071 314) 28%, oklch(0.48 0.077 301) 62%, oklch(0.33 0.087 277) 100%);
}

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