Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
雲来の海・遠照
璃月昼遼闊賑わい遠望

雲来の海・遠照

The Sea of Clouds in Far Light

色カード

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

再構成グラデーション

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

0%c9e2f630%7cbadc55%629fb576%67b4b2100%c6907a

なぜ調和するのか

白が光になるには、隣人の色相から遠ざかるか、いっそ色相を持たないかのどちらかが要る。彩度を半分削っただけでは、それはやはり空のままだ。雲来の海で最も明るい 4000 画素は上辺の二マスにあり、L 0.90 と 0.89、彩度 0.039 と 0.042、色相はどちらも 243°——頭上の空の 0.086 に対して確かに半分以上を削っている。しかし 243° は、全画面の 76.02% を占める青帯の平均 233° からわずか 10° しか離れていない。だからそれは空へ吸収され、「より遠い」と読まれて「光」とは読まれない。この絵に光源は無く、焦点は下辺が自力で稼ぐしかない。

01

雲はまだ青い

上辺の二マス:(0.8, 0.0) は 1884 画素で L 0.90 / 彩度 0.039、(0.4, 0.0) は 1209 画素で L 0.89 / 彩度 0.042、色相はどちらも 243°。頭上のあの空——(0.30, 0.00) を起点に幅 0.40・高さ 0.09——は全体で L 0.80 / 彩度 0.086 / 234°、最も濃い 3% が 0.102。〈フォンテーヌ廷・晴照〉の口径では、隣人の色相を継ぎ、彩度を六割まで削れば白と名乗ってよい。この雲はそれより深く削っている。それでも削り終えたところで青帯の平均から 10° しか離れていないのだ。同じ物差しで〈瓊璣野・晴午〉を測れば最も明るい 4000 画素は L 0.97 / 彩度 0.039–0.040、〈璃月港・晴昼〉なら L 0.95–0.96 / 彩度 0.046–0.049。三枚とも明度の頂点は色を残しており、三枚とも主役はそこにいない。

02

焦点は下辺へ落ちる

全画面で最も濃い 4000 画素のうち、橙の組が 1310 個(重心 (0.53, 0.93))、青緑の組が 823 個((0.58, 0.98))、赤の組が 752 個((0.67, 0.86))、緑の組が 701 個((0.59, 0.97))——四組で 3586 個、重心はすべて下辺の町と秋の木に押し付けられている。残る 414 個がようやく外海と左の島崖に配られる。とはいえ下が濃いからではない:画面の上 55% と下 45% それぞれで最も濃い 3% は 0.103 と 0.111、差はわずか 0.008 しかない。違うのは色相のほうで、上半分は 238°、下半分は 170°。明度の頂点が光を引き受けないなら、注意は色相の上で別のことを言っている唯一の一画へ行くしかない。

03

同じ町、同じ物差し

色相が 330°–90° に入り、かつ彩度 0.025 に達する画素は全画面で 35,241 個、4.00%。同じ窓で〈璃月港・晴昼〉のあの絵を測れば 31,329 個、3.56% だ。二枚の暖色の量はほぼ同じで、しかも二枚とも空が色を残している(L 0.95 / 0.048 と L 0.90 / 0.039)——つまり二枚とも、主役は空が譲ったものではなく、暖色が自力で稼いだものだ。この物差しは双方向である:頂点をゼロへ寄せれば光を一つ指定でき(珉林 0.005、来歆山 0.021)、寄せなくても誤りではなく、ただ主役を指す仕事を別の軸へ回しただけだ。いちばん明るい一画が主役だと決めてかかるな。まず、それがどれだけ彩度を手放したかを測れ。

この配色を持ち帰る

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

/* 雲来の海・遠照 · The Sea of Clouds in Far Light — Teyvat Palette */
:root {
  --cloud-rim: oklch(0.9 0.039 243); /* 雲縁の白 #c9e2f6 */
  --sea-sky: oklch(0.76 0.08 233); /* 海天の青 #7cbadc */
  --cliff-shadow: oklch(0.67 0.071 222); /* 崖影の青 #629fb5 */
  --shoal-jade: oklch(0.72 0.077 193); /* 浅湾の碧 #67b4b2 */
  --eave-vermilion: oklch(0.7 0.074 43); /* 軒瓦の朱 #c6907a */
  --gradient-sea-of-clouds: linear-gradient(180deg, oklch(0.9 0.039 243) 0%, oklch(0.76 0.08 233) 30%, oklch(0.67 0.071 222) 55%, oklch(0.72 0.077 193) 76%, oklch(0.7 0.074 43) 100%);
}

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