Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
逆さの古代都市・かすかな光
璃月夜閉塞沈黙倒懸

逆さの古代都市・かすかな光

Inverted City in Faint Light

色カード

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

再構成グラデーション

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

0%22253842%1d1d3078%16152a100%161327

なぜ調和するのか

明度を使い切ったとき、彩度が引き継ぐ。画面全体が 12 ポイントの明度帯(L 0.18→0.30)に押し込まれ、88% の画素は同じ一片の紫で彩度中央値はわずか 0.038——だから右崖の炭火は 0.183 のピーク彩度で、明度には買えない注意を買っている。

01

十二ポイントの中に街ひとつ

明度は p01 の 0.18 から p99 の 0.30 まで、画面の情報が 12 ポイントに収まっている。彩度中央値は 0.038、ほぼ無彩。露出不足ではない——二つの次元を同時に閉じたうえで、なお構図をつくっている。淵下宮はその裏面だ。あちらは彩度が 0.081 で打ち止めになり、明度は 0.58 の階段を伸ばした。二篇あわせて同じ規則の両端になる:どちらか一つの次元は残さなければならず、どちらを残すかは場面が決める。

02

霧が物体より明るく、輪郭は「引き算」で生まれる

倒懸の塔は実測 L 0.21、塔の右で最も明るい霧は L 0.27——霧のほうが明るい。つまり塔は照らされて見えているのではなく、より明るい霧から引き算されている。極端に暗い場面で形が欲しいなら、光源を足す前に背景の霧を六ポイント持ち上げること。前にあるものは自ずとシルエットになる。

03

0.183 の炭火は中央値の 4.8 倍

右崖の炭火は実測 L 0.54、彩度 0.114、色相 56°、ピークは 0.183。画面の彩度中央値は 0.038 だから、五倍近い飽和差で立ち上がっている——そして暖色帯に落ちる画素は画面全体の 0.02% にも届かない。明度が足りないとき、彩度だけが声を出せる次元になる。裏を返せば、ほぼ無彩の画面ではどんな小さな飽和色も無視できない主役になってしまうから、それをどこに置くかは決断でなければならない。

この配色を持ち帰る

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

/* 逆さの古代都市・かすかな光 · Inverted City in Faint Light — Teyvat Palette */
:root {
  --abyss-violet: oklch(0.21 0.04 285); /* 淵の紫 #16152a */
  --settled-haze: oklch(0.241 0.035 282.6); /* 沈む霧 #1d1d30 */
  --haze-ridge: oklch(0.27 0.037 277); /* 霧の稜 #222538 */
  --ember: oklch(0.54 0.114 56); /* 残り炭 #a05b22 */
  --gradient-inverted-city: linear-gradient(200deg, oklch(0.27 0.037 277) 0%, oklch(0.241 0.035 282.6) 42%, oklch(0.21 0.04 285) 78%, oklch(0.201 0.039 289.4) 100%);
}

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