璃月昼澄明開豁悠遠

碧水の原・晴れの汀

Bishui Plain, Sunlit Shallows

色カード

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

再構成グラデーション

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

0%95c9ea12%baf4fd28%5b9bbc50%b1d9c572%8cc27d100%f4eb4f

なぜ調和するのか

浅い水に自分の色相は無い。それは水底と空のあいだに渡されたスライダーで、どこで止まるかを決めるのは深さである。同じ碧の水が、岸際で 164°、岸を離れた湾中で 200°、最も遠い水路で 227°——そして空は 237°。63° を走り抜けてなお、彩度は 0.050–0.099 のあいだで揺れているだけだ。水を描くのに「水色」を一つ選んではいけない。まず両端を決め、深さに応じてそのあいだから取ること。

岸際のあの碧は、水ではなく砂である

島の縁に貼りつく浅瀬は実測で色相 164°、明度 0.85、彩度 0.050。対して空は 237°、明度 0.81——73° 離れていて、しかも浅瀬のほうが空より明るい。水が鏡なら空の色相を戴き、空より暗くなるはずだ。そうならないのは、薄い水の層越しに見えているのが水底だからである。左手の湾水を岸から沖へ四段取ると(各段およそ千百画素)、色相は 182° → 188° → 194° → 200° と単調に空へ向かって回り、右手でも 163° から 190° へ回る。水色の等高線は水深の等高線であり、だからそれは島の海岸線に沿ってもう一度輪郭を描き直す——陸を見ず水だけを見ても、この群島の形は読み取れる。

63° はすべて色相の勘定に付けられる

岸際の 164° から最遠の水路の 227° まで、水は 63° を移動する。それでも彩度は全行程 0.050–0.099 に留まったままだ——最も浅い所で 0.050、湾中で 0.097、最も遠い所で 0.069、画面全体の彩度中央値でさえ 0.074 にすぎない。ここでは厚みが変えるのは「どの色か」であって、「どれだけ色があるか」ではない。タラッタ海底谷は同じ媒質を内側から見た姿で、あちらの彩度中央値は 0.119、水塊自身の彩度も深さに従って 0.122 から 0.087 へ落ちていく。媒質越しに物を見るとき、厚みが動かすのは明度と彩度。媒質そのものを見るとき、厚みが動かすのは色相である。

砂浜にすら暖かさは許されていない

画面全体に 15°–60° の探索をかけると、最も鮮やかな 3% はわずか 9 画素、彩度 0.073 しか残らない。橙の帯は 0.03%、赤の帯は 0.01%。島の縁を巡る白っぽく見える砂も実測 L 0.78、彩度 0.069、色相 169° で、すでに水の側に立っている。この線を越えた唯一のものが島の黄葉の樹冠だ:90°–120° の中で最も鮮やかな 3% は L 0.92、彩度 0.170、色相 106° で、最も鮮やかな草地(彩度 0.112)より五割高い。水が主役の画面に焦点を一つ残したいなら、水の中を探してはいけない——地も空も同じ一本のスライダーに収め、そのうえで何か一つをスライダーの外に立たせること。

この配色を持ち帰る

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

/* 碧水の原・晴れの汀 · Bishui Plain, Sunlit Shallows — Teyvat Palette */
:root {
  --sky-blue: oklch(0.81 0.072 237); /* 空の青 #95c9ea */
  --haze-pale: oklch(0.93 0.059 208); /* 霞の白 #baf4fd */
  --grey-cliff: oklch(0.66 0.082 232); /* 崖岩の青 #5b9bbc */
  --bay-blue: oklch(0.75 0.097 200); /* 湾中の青 #57c1c6 */
  --shore-shallow: oklch(0.85 0.05 164); /* 汀の碧 #b1d9c5 */
  --plain-green: oklch(0.76 0.112 139); /* 原の緑 #8cc27d */
  --ginkgo-crown: oklch(0.92 0.17 106); /* 銀杏の黄 #f4eb4f */
  --gradient-bishui-plain: linear-gradient(180deg, oklch(0.81 0.072 237) 0%, oklch(0.93 0.059 208) 12%, oklch(0.66 0.082 232) 28%, oklch(0.85 0.05 164) 50%, oklch(0.76 0.112 139) 72%, oklch(0.92 0.17 106) 100%);
}

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