ナド・クライ昼澄明広闊晴れやか

逐浪野・晴れた海

Wavechaser Plain under a Clear Sky

色カード

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

再構成グラデーション

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

0%88b9ed24%abe5fc32%6ebcfc44%6b9fdb62%4889bd100%688f65

なぜ調和するのか

境界は断裂である必要がなく、極値でもいい。天頂は実測 251°/L 0.77/彩度 0.091、海面は 253°/L 0.69/彩度 0.105——色相の差はわずか 2°、明度の差 0.08、彩度の差 1.15 倍で、ほとんど同じ色でありながら、両者を取り違える人はいない。分けているのは海と空のあいだに横たわるあの帯、L 0.89、彩度 0.067、両側より明るく、なおかつ両側より淡い。だから両側とも「そこから離れていく」ことになる。

明るさの尖りと鮮やかさの窪みが同じ帯に来る

上から下へ一列に測る。天頂 251°/L 0.77/彩度 0.091 → 水平線の帯 224°/0.89/0.067 → その下の沖 245°/0.77/0.120 → 中ほどの海 253°/0.69/0.105 → 手前の海 245°/0.61/0.104。明度は帯の上で尖り、彩度はまさに同じ帯で窪む。画面で最も明るい 4000 画素のうち 3336 個が y≈0.22 のあの一本の横帯に落ち、L 0.93、しかも彩度の上限は 0.068 しかない。逆に画面の彩度のピーク 0.166 は明度 0.61–0.69 の深い海にある——最も鮮やかな 4000 画素のうち 3966 個が 240°–270°、位置は (0.39, 0.39)。明るさと鮮やかさは、この絵では厳密に逆を向く二つの量である。

海に立つものはみな海の色

左手、海から生えたあの晶柱は白く見えるが、一本まるごと実測 252°、L 0.76、彩度 0.095——真上の空(251°、0.091)よりわずかに鮮やかですらある。右下、石門のわきに立つ亭の青い甍は 227°、L 0.75、彩度 0.072 で、これもまだ青帯の内側にいる。210°–270° は画面の 73.86% を占め、空も海も晶柱も屋根もこの一族に入っており、無彩の画素は 3.07% しかない。この一族に属さない大きな面は左手の草原だけで、13.31%、143°、彩度 0.076——頼っているのは色相であって、彩度ではない。

同じ水平線、二つのやり方

〈月蕩海・夜の潮〉は明度と彩度を境界の上で一緒に断ち切った。線の上は L 0.13/彩度 0.026、下は L 0.70/彩度 0.137、明度差 0.57、彩度差 5.3 倍——一本の線がそれで主役になった。同じノド・クライの水平線でありながら、こちらは両側の差が明度 0.08、彩度 1.15 倍しかない。線そのものはほとんど存在せず、仕事はすべて継ぎ目に載せた L 0.89/0.067 の帯が引き受けている。ほとんど同じ色の面を二つ分けたいとき、片方の色相を替えたり暗く沈めたりする必要はない。継ぎ目に明るくて淡い帯を一本置けば、両側は自分でそれぞれの場所に収まり、しかも絵は一つの色相のままでいられる。

この配色を持ち帰る

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

/* 逐浪野・晴れた海 · Wavechaser Plain under a Clear Sky — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.77 0.091 251); /* 天頂の青 #88b9ed */
  --horizon-band: oklch(0.89 0.067 224); /* 水平の白 #abe5fc */
  --far-water: oklch(0.77 0.12 245); /* 沖の碧 #6ebcfc */
  --deep-water: oklch(0.61 0.104 245); /* 深海の青 #4889bd */
  --slope-meadow: oklch(0.61 0.076 143); /* 斜面の草 #688f65 */
  --crystal-spire: oklch(0.76 0.095 252); /* 晶柱の青 #84b5ec */
  --pavilion-roof: oklch(0.75 0.072 227); /* 亭の甍 #7cb8d2 */
  --gradient-wavechaser-plain: linear-gradient(180deg, oklch(0.77 0.091 251) 0%, oklch(0.89 0.067 224) 24%, oklch(0.77 0.12 245) 32%, oklch(0.69 0.105 253) 44%, oklch(0.61 0.104 245) 62%, oklch(0.61 0.076 143) 100%);
}

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