Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
レンポ島・夜の青
ナド・クライ夜深い夜人の営み機巧

レンポ島・夜の青

Lempo Isle in Night Blue

色カード

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

再構成グラデーション

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

0%184ab830%273a5d62%d1847182%37563a100%debcad

なぜ調和するのか

アクセントに配られる彩度の予算は「主場の色相からどれだけ離れているか」で決まる。この夜景は 73.04% が青帯、平均彩度 0.145——空そのものが彩度の天井(ピーク 0.282)である。右の高い竿の上の灯は青帯の平均 259° からわずか 23° しか離れておらず、彩度を 0.239 まで、全画面の 99 パーセンタイル 0.222 を越えて持ち上げる。一方そこから 132° 離れた暖色は全部あわせて 45,126 画素、画面の 5.13%、ピークでも 0.165 しかなく、99 パーセンタイルにさえ届かない。同族のアクセントは彩度を買い、対立するアクセントは明度しか買えない。

01

いちばん鮮やかなのは空

全画面で最も彩度の高い 4000 画素のうち 3997 画素が 240°–270°、平均彩度 0.239 に落ち、位置 (0.38, 0.09)——画面上端のあの夜空である。上縁 15% をまとめて実測すると L 0.45、彩度 0.183、263°、ピーク 0.282。青の一族が画面の 73.04% を占め、平均彩度は 0.145。そして全画面の彩度中央値は 0.130——中央値はほぼ空の読みそのものだ。空がこの絵の多数派だからである。無彩は 3.91% しかなく、譲れる灰が一枚もない。彩度というチャンネルは開始と同時に売り切れていて、あとから灯がそれを使うには空と値段を交渉するしかない。

02

二つの灯が別々のものを買う

右の高い竿の頂にある灯は、全体で L 0.39、彩度 0.141、271°。最も鮮やかな 3% は L 0.56、彩度 0.222、282° で、ピークは 0.239——青帯の平均 259° から 23° しか離れていないのに、彩度を全画面の 99 パーセンタイル 0.222 の上まで押し上げている。しかも明度は全画面の中央値 0.41 より 0.02 低い。巨大なリング状ドームの足元で開いている炉はその逆だ。全体で L 0.72、彩度 0.102、44°、暖色画素だけを数えると L 0.69、彩度 0.100、35°、ピーク 0.144。青帯から 132° 離れ、明度は中央値より 0.28 高いのに、彩度は 99 パーセンタイルに触れることすらできない。同じ村の二つの灯が、一方は彩度だけを、一方は明度だけを買っている——どちらを買うかは、夜空から何度離れているかが決めている。

03

暖色が受け取るのは明度の軸

330°–90° で画面全体を探すと 45,126 画素、画面の 5.13%、平均 L 0.56、彩度 0.064、31°、ピーク 0.165。それが何の上に乗っているかを一つずつ見る——川面に映る炉火の筋は L 0.82、彩度 0.044(667 画素)、左下の錆色の茂みは L 0.43、彩度 0.045、右下の同じ茂みは L 0.51、彩度 0.075、炉そのものは L 0.69、彩度 0.100。明度は 0.39 の行程に広がり、彩度は終始 0.044 から 0.100 の間に閉じ込められている。〈浅瀬神社・暮れの星〉は彩度の課税基準は面積だと言い、面積の大きい側だけを下げた(53.95% の暮天が 0.050–0.060 まで払い、15.50% の草地は 0.072 のまま)。ここは逆で、いちばん面積の大きい 73.04% こそが彩度の最も高い極であり、抑えられているのは 5.13% の暖色のほうだ。課税基準が色相距離に置き換わっている。深い青のインターフェースにアクセントを置くなら——同族の紫は彩度を振り切ってよい。補色の橙は鮮やかにせず、明るくすること。

この配色を持ち帰る

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

/* レンポ島・夜の青 · Lempo Isle in Night Blue — Teyvat Palette */
:root {
  --night-vault: oklch(0.45 0.183 263); /* 夜天の青 #184ab8 */
  --machine-indigo: oklch(0.35 0.067 262); /* 機体の藍 #273a5d */
  --furnace-orange: oklch(0.69 0.1 35); /* 炉火の橙 #d18471 */
  --pole-lamp-violet: oklch(0.56 0.222 282); /* 竿灯の紫 #6855f0 */
  --water-gold: oklch(0.82 0.044 44); /* 川面の金 #debcad */
  --slope-green: oklch(0.42 0.058 147); /* 斜面の草緑 #37563a */
  --gradient-lempo-isle: linear-gradient(180deg, oklch(0.45 0.183 263) 0%, oklch(0.35 0.067 262) 30%, oklch(0.69 0.1 35) 62%, oklch(0.42 0.058 147) 82%, oklch(0.82 0.044 44) 100%);
}

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