稲妻昼明麗花の気町の音

烏有亭・桜晴れ

Uyuu Restaurant in Sakura Sunlight

色カード

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

再構成グラデーション

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

0%296fae22%b789d044%7e464262%343e4c76%162945100%867f93

なぜ調和するのか

面積で一番の色が受け持つのは、太陽の見えない場所だけである。青の帯が 51.54% を占め、そのほとんどが空、実測は彩度 0.120、色相 249°——けれどもそれが染めるのは陰の側だけだ。店の板壁 259°、入口の暖簾 258°、どちらも空のすぐ隣にいる。一方、陽の当たる石畳は 301°〜320°、空から五十度離れ、あの桜(313°)からは十二度と離れていない。しかも彩度は桜に近づくにつれて 0.018 から 0.039 まで上がっていく。天光は陰を、反射光は陽の面を——二つの帳簿は取り違えられない。

最も広い面は最も鮮やかな面ではない

画面で最も彩度の高い 4000 画素のうち 3138 個が右手の桜の樹冠に落ちる(L 0.55、彩度 0.157、色相 308°)。空に配られたのは 216 個だけだ。面積で数えれば青の帯は 51.54%、桜の二帯(紫 10.10% + 桃 6.12%)を足しても 16.22%、空の三分の一にも満たない。それでいて両者の平均彩度の差は 0.007 しかない(0.120 対 0.113)——面積は濃度を連れてこなかった。面積一位と濃度一位がこの一枚で別れたからこそ、次のことが見える。

石畳は空ではなく桜に寄る

同じ石畳を三か所で測る。桜から最も遠い左端は L 0.68、彩度 0.018、色相 305°。中央は L 0.61、彩度 0.031、301°。桜の真下は L 0.62、彩度 0.039、320°。色相は終始マゼンタ側に留まり、彩度は桜までの距離に沿って倍以上になる。頭上の半分を占める空は一度たりともこれを引き戻せなかった——石畳は太陽に直接照らされているからだ。直射光そのものに色はなく、照らされた面は最も近い明るいものが色を差すのを待っている。反射光の強さは距離の関数、天光はそうではない。

陰の側はすべて空のもの

店の暗い板壁は L 0.36、彩度 0.028、色相 259°。入口の藍の暖簾は L 0.28、彩度 0.058、258°。空は 249°——三者は 10° の内側に収まり、そして石畳とは 42° から 61° 離れている。ひとつの画面で二つの光源が半分ずつ受け持っているのだ。場面の配色を決めるとき、統一された環境色をひとつ置いて済ませないこと。まずどの面が空を見ているか、どの面が太陽しか見ていないかを分け、それから別々に色相を配る——一枚の絵に環境色は二つあってよく、しかも大きく離れているべきである。

この配色を持ち帰る

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

/* 烏有亭・桜晴れ · Uyuu Restaurant in Sakura Sunlight — Teyvat Palette */
:root {
  --clear-sky: oklch(0.53 0.12 249); /* 晴天の青 #296fae */
  --sakura-cloud: oklch(0.7 0.113 313); /* 桜雲の紫 #b789d0 */
  --petal-stone: oklch(0.61 0.031 301); /* 花びらの石畳 #867f93 */
  --eave-shadow: oklch(0.36 0.028 259); /* 軒影の青 #343e4c */
  --indigo-noren: oklch(0.28 0.058 258); /* 藍の暖簾 #162945 */
  --lacquer-red: oklch(0.46 0.078 25); /* 漆盆の朱 #7e4642 */
  --gradient-uyuu-restaurant: linear-gradient(180deg, oklch(0.53 0.12 249) 0%, oklch(0.7 0.113 313) 22%, oklch(0.46 0.078 25) 44%, oklch(0.36 0.028 259) 62%, oklch(0.28 0.058 258) 76%, oklch(0.61 0.031 301) 100%);
}

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