フォンテーヌ昼爽やか清潔秩序

フォンテーヌ廷・晴れわたる昼

Court of Fontaine in Open Daylight

色カード

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

再構成グラデーション

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

0%66b4fe22%bceafa55%4c96cd80%467190100%5798a5

なぜ調和するのか

「白」は色ではなく比である。右手、水際に立つ石堡の壁面は一万画素のうち無彩なものがわずか 3 画素、残りはすべて 241°——足元に広がる 243° の深い海とまったく同じ色相で、違うのは彩度が六割に落としてあることだけ(0.069 対 0.111)。色で埋め尽くされた画面に白をつくりたいなら、無彩に寄せてはいけない。隣の色相をそのまま受け継ぎ、彩度だけを半分にすること。

一万画素の壁に、白は 3 つ

右手の水際に立つ石堡の壁面、およそ一万画素の平均は L 0.53、彩度 0.069、色相 241°。そのうち彩度 0.025 未満はたった 3 画素しかない。中央の塔、弧を描く控え壁、左手の円形テラスの擁壁——街のほかの五面を測っても、すべて L 0.52–0.62、彩度 0.067–0.082、色相 234–244° という小さな枠に収まる。灰色の面は一つもない。画面全体の無彩画素は 4.26% にすぎず、最も明るい 4000 画素は L 0.98、彩度 0.024 に固まっている——それは空の雲であって、街ではない。この街が白い石として読まれるとき、読まれているのは絶対値ではない。

白は周囲より 0.19 暗い

石の面は L 0.53、すぐ隣の深い水は L 0.65、画面全体の明度中央値は 0.72——この「白い」街は中央値より 0.19 も暗い。〈瓊璣野・晴れの正午〉で「黒」と読まれたあの崖壁は、あちらの中央値より 0.20 低かった。ほぼ同じ明度差でありながら、一方は黒と読まれ、一方は白と読まれる。つまり明度差が言えるのは「ここに独立した面がある」までで、その面が黒か白かは言えない。あちらは明度で論じた。こちらは軸を替えなければならない。

彩度を半分にするだけでは足りない

街の足元に広がる浅瀬の棚も彩度は 0.069、石の面と寸分違わない。それでも白ではなく碧として読まれる——212° に落ち、深い水の 243° から 31° 離れているからだ。石の面は 241°、差はわずか 2°。彩度を半分に落として競争から降り、色相を隣に貼りつけて素性を手放す。その二つを同時にやり終えたものだけが白になる。インターフェースでも同じだ。濃い青の地に置く「白いカード」を純粋な無彩にしてはいけない。地の色相をそのまま取り、彩度を六割に落とすこと。そうして初めて、貼りつけたものではなく、その絵に生えたものになる。

この配色を持ち帰る

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

/* フォンテーヌ廷・晴れわたる昼 · Court of Fontaine in Open Daylight — Teyvat Palette */
:root {
  --masonry-white: oklch(0.53 0.069 241); /* 石の白 #467190 */
  --deep-bay: oklch(0.65 0.111 243); /* 深湾の青 #4c96cd */
  --clear-sky: oklch(0.75 0.132 249); /* 晴天の青 #66b4fe */
  --cloud-drift: oklch(0.91 0.052 221); /* 綿雲の白 #bceafa */
  --shoal-shelf: oklch(0.64 0.069 212); /* 浅瀬の碧 #5798a5 */
  --garden-green: oklch(0.77 0.096 141); /* 庭園の緑 #92c48a */
  --gradient-court-of-fontaine: linear-gradient(180deg, oklch(0.75 0.132 249) 0%, oklch(0.91 0.052 221) 22%, oklch(0.65 0.111 243) 55%, oklch(0.53 0.069 241) 80%, oklch(0.64 0.069 212) 100%);
}

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