スメール昼広闊清朗生気

スメールシティ・青の昼

Sumeru City in Cyan Daylight

色カード

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

再構成グラデーション

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

0%6db5d822%59abc846%6da9ba70%4c939a88%3b908d100%58a765

なぜ調和するのか

奥行きの第三の道——単調にするのは色相だけでいい。画面を等しい高さの五本の帯に横切り、上から測っていくと、色相は 230°→230°→217°→204°→192° と一度も引き返さないのに、明度(0.74/0.69/0.70/0.57/0.58)も彩度(0.088/0.090/0.067/0.072/0.072)も途中で向きを変えている——ノストイ地区は明度と彩度を一方は上げ一方は下げて遠近を作ったが、ここではその二つのつまみを押さえ、空間はすべて 38° の色相移動に任されている。

引き返さないのは色相だけ

五本の等高の帯を上から順に測る:色相 230°、230°、217°、204°、192° は、三つのチャンネルのうち唯一単調に動く一本である。明度 0.74/0.69/0.70/0.57/0.58 は二度折り返し、彩度は 0.067 から 0.090 のあいだ、0.023 しか動く余地がない。ノストイ地区は同じことを正反対のやり方でやっている——明度は 0.72 から 0.87 へ上がり、彩度は 0.106 から 0.079 へ下がり、そのあいだ色相はまったく動かない。空気遠近法が求めているのは三つのつまみを同時に回すことではなく、そのうちどれか一つが本当に引き返さないことだ:まず一つを選び、残りの二つは押さえておくこと。

樹の街の樹に、緑の画素が一つも無い

街を載せたあの大樹は、樹冠が画面の左上から中央にかけての大きな一塊を占める。その塊のうち、緑の帯 90°–165° に落ちる画素はわずか 157 個、青緑の帯 165°–215° に落ちるものは 39253 個。画面の上半分の緑を全部足しても 786 個、絵全体の緑の 1.4% にしかならない。樹冠の平均色相は 208°、頭上の空の帯の 230° とはわずか 22° の差である。雨林の樹の街でありながら、その樹は青い——色相の列の中で空にいちばん近い一枠に並んでいるからで、その枠が何色かで主体の色は決まる。素材に決定権はない。

土地の色は、いちばん手前の枠にだけ配られる

全図の緑は 6.5%(57271 画素)しかなく、その 63% が右下の草の斜面に固まっている。平均色相 148°、彩度 0.124。画面の彩度のピーク 0.170 もそこにあり、樹冠の 0.076 より六割高い。列の末尾には、空に染め替えられていない生の色を一枠残しておかなければならない——さもなければ 230° から 192° への移動はただの青いグラデーションになり、「遠いほど空に寄る」とは読めなくなる。色相で奥行きを作るなら:まず空の色を決め、土地の色を言い切った近景をいちばん手前の一枠に置いて、見る人に比べるものを与えること。

この配色を持ち帰る

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

/* スメールシティ・青の昼 · Sumeru City in Cyan Daylight — Teyvat Palette */
:root {
  --cumulus-white: oklch(0.97 0.012 196); /* 積雲の白 #ecf8f8 */
  --zenith-blue: oklch(0.68 0.119 244); /* 晴空の青 #50a0dc */
  --far-ridge-haze: oklch(0.71 0.096 228); /* 遠嶺の霞 #5aadd1 */
  --canopy-shade: oklch(0.43 0.049 219); /* 木陰の街 #2e5662 */
  --crown-cyan: oklch(0.65 0.076 208); /* 樹冠の青 #519ca7 */
  --lake-teal: oklch(0.7 0.081 173); /* 湖の青緑 #66af9a */
  --slope-green: oklch(0.66 0.124 148); /* 丘草の緑 #58a765 */
  --gradient-sumeru-city: linear-gradient(180deg, oklch(0.74 0.088 230) 0%, oklch(0.7 0.09 224) 22%, oklch(0.7 0.067 217) 46%, oklch(0.62 0.072 204) 70%, oklch(0.6 0.081 192) 88%, oklch(0.66 0.124 148) 100%);
}

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