ナド・クライ薄暗がり手狭暮らしの匂い

レンポ島・灯の隅

Lempo Isle, a Lamplit Corner

色カード

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

再構成グラデーション

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

0%181b1e35%493b5b70%5a3337100%b3988b

なぜ調和するのか

空を取り去ったとき、絵が失うのは彩度であって明度ではない。同じレンポ島でも、露天のほうは明度中央値 0.41、彩度中央値 0.130、無彩 3.91%。空が一片も画面に入っていないこの隅は明度中央値 0.30——0.11 低いだけ——なのに彩度中央値は 0.036、あちらの 27% まで落ち、無彩は 30.12%、あちらの 7.7 倍にふくらむ。一枚の絵にどれだけ色があるかは、どれだけ明るいかではなく、空が届くかどうかが決めている。

灯の届かない面には 0.01 の彩度もない

左半分の、墨緑色に見える高い隔壁は、56,762 画素をまとめて実測すると L 0.22、彩度 0.008。しかも 90°–210° という緑から青緑にかけての帯は、この面のなかに一画素も存在しない——暗い緑ではなく、色がないのだ。右側で軒灯に照らされた錆色の壁は L 0.37、彩度 0.057、13°。明度は隔壁より 0.15 高いだけなのに、彩度は七倍ある。同じ隅の、同じ鉄板。違いはすべて灯が当たっているかどうかにある。

彩度の天井はまるごと光管が支えている

0.06% の青緑を除くと、六本の色帯の平均彩度はほとんど同じ数値になる——赤 0.047、橙 0.057、黄 0.051、青 0.045、紫 0.050、桃 0.041、レンジはわずか 0.016。同じ六本の明度は 0.32 / 0.40 / 0.57 / 0.25 / 0.34 / 0.37 で、レンジは 0.32。色相も明度もまだ動いているのに、彩度だけが一本まるごと押さえられている。この線を本当に越えるのは、自分で光っている二つだけだ。左の手すりの下を走る桃色の光管は、最も鮮やかな 3% が L 0.48、彩度 0.172、1°、ピーク 0.176。右端の紫の光に包まれた支柱は、最も鮮やかな 3% が L 0.50、彩度 0.143、302°、ピーク 0.175。全画面の彩度 99 パーセンタイルは 0.115、ピークは 0.216——どちらの数字にも光管しか届いていない。

昼はこうならない

〈万端珊瑚探偵社・陰の昼〉は空をほぼ全部画面の外へ追い出した——青帯は 22.70% しか残らず、最も鮮やかな 4000 画素のうち空は 0 だった——それでも水平線より下の影は彩度 0.054、251° のままで、あの空の 0.120 / 247° とは色相でわずか 4° しか違わない。昼は、空を画面から外しても、空が逆光面のひとつひとつに配ったぶんは残り、彩度が半分に落ちるだけである。ここにはそのぶんがない。左の隔壁の 0.008 が、その請求書がゼロになった姿だ。〈合轍駅・軒の下〉の室内は 75.1% が無彩、彩度中央値 0.011 で、色はすべて二つの開口から借りてきていた。この隅には開口すらなく、灯しかない。だから暗い場面をつくるとき、明度を下げて済ませてはいけない——二枚の絵の明度中央値は 0.11 しか違わないのに、読み味は別世界だ。まずどの面に灯が当たるかを決め、彩度を全部そこへ渡し、残りは一律に無彩へ押しやること。

この配色を持ち帰る

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

/* レンポ島・灯の隅 · Lempo Isle, a Lamplit Corner — Teyvat Palette */
:root {
  --hull-black: oklch(0.22 0.008 251); /* 舷壁の墨 #181b1e */
  --deck-violet: oklch(0.38 0.056 304); /* 甲板の紫 #493b5b */
  --rust-wall: oklch(0.37 0.057 13); /* 錆壁の橙 #5a3337 */
  --eave-lamp: oklch(0.7 0.038 46); /* 軒灯の黄 #b3988b */
  --pillar-violet: oklch(0.5 0.143 302); /* 柱の紫 #734ba6 */
  --glow-bar-pink: oklch(0.48 0.172 1); /* 灯管の桃 #a41f58 */
  --gradient-lunar-treasury-lempo-isle-location-context: linear-gradient(90deg, oklch(0.22 0.008 251) 0%, oklch(0.38 0.056 304) 35%, oklch(0.37 0.057 13) 70%, oklch(0.7 0.038 46) 100%);
}

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