Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
遊月の海・夜の潮
ナド・クライ夜幽暗輝光開闊

遊月の海・夜の潮

Moontide Sea after Dark

色カード

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

再構成グラデーション

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

0%03071234%111c4144%38a9ea100%0d76f7

なぜ調和するのか

一本の線を画面の主語にしたいなら、明度と彩度を同じ線の上で一緒に跳ばせばよい。地平線の上は実測 L 0.13・彩度 0.026、下は L 0.70・彩度 0.137——明度差 0.57、彩度差 5.3 倍、同じ境界で二つのチャンネルが同時に断ち切れている。

01

断絶に使われたのは画面高の 10%

上半分(上端 20% のサンプル)は L 0.13・彩度 0.026、下半分の海面(55%–90%)は L 0.70・彩度 0.137。あいだに挟まるのは画高の約 6% の霧帯だけで、実測 L 0.24・彩度 0.073——これはグラデーションではなく一段の階段である。この線を越えると明度が 0.57 上がり、彩度は 5.3 倍になる。だから眼は地平線を画面の主語として読み、海と空を二つの色面としては読まない。無想刃狭間の一篇とちょうど補い合う関係だ:あちらの L/C の暴力的な跳躍は時間上(閃くか閃かないか)で起こり、ここでは空間上(線の上か下か)で起こる。

02

上半分は濃い青ではなく黒である

画面全体の 76.1% の画素が青帯(平均 254°)に落ち、見た目は「青い絵」になる。しかし夜空の一角は彩度 0.026 しかなく、すでに灰の閾値に張り付いている——画面の無彩画素 10.74% はほぼここに集まっている。色はすべて水線より下に賭けられているのだ。これは夜景の節約術である:空は本当に青くある必要はない。下のわずかな彩度を贅沢に見せるだけ暗ければよい。

03

暖色の画素が一つもない

画面全体に 330°–90° の暖色探索をかけると、灰の閾値を満たす画素は**一つも無い**。左下、金の砂州のように見える明るい筋は実測 L 0.90・彩度 0.048・色相 152° の淡い青緑で、画面で最も明るい 3300 画素はそこ (0.10, 0.88) に集まり、平均 L 0.91 に対し彩度は 0.039 しかない。一方で彩度のピーク 0.212 は画面中央の海溝 (0.58, 0.66)、L 0.59 にある。最も明るい場所と最も鮮やかな場所は別々だ——一方が光を、他方が色を担う。

この配色を持ち帰る

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

/* 遊月の海・夜の潮 · Moontide Sea after Dark — Teyvat Palette */
:root {
  --night-vault: oklch(0.13 0.026 263); /* 夜天の黒 #030712 */
  --haze-violet: oklch(0.24 0.073 268); /* 霞の紫 #111c41 */
  --moontide-blue: oklch(0.7 0.137 239); /* 潮の青 #38a9ea */
  --deep-tide: oklch(0.59 0.212 258); /* 深潮 #0d76f7 */
  --shoal-white: oklch(0.9 0.048 152); /* 汐の白 #c7e8cf */
  --dawn-pink: oklch(0.77 0.098 317); /* 曦の粉 #cea1de */
  --gradient-moontide-sea: linear-gradient(180deg, oklch(0.13 0.026 263) 0%, oklch(0.24 0.073 268) 34%, oklch(0.7 0.137 239) 44%, oklch(0.59 0.212 258) 100%);
}

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