スメール昼明け放たれた賑わい見通し

トレジャーストリート・晴れの裂け目

Treasures Street under a Seam of Sky

色カード

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

再構成グラデーション

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

0%d1eef48%428dc528%508c3e42%37563860%714b36100%366174

なぜ調和するのか

上下を色相で分けるには、両端の彩度を先に揃えておく必要がある:同じ一対の矩形でトレジャーストリートの上下縁を測ると、彩度は 0.052 対 0.060——差は 0.008 で、色相は 159° 対 233°、74° 離れている。全画面に広げるともっと澄む:90°–165° の緑は 113,979 画素で平均彩度 0.062、190°–280° の青緑と青は 238,308 画素で 0.064。二大色族の彩度差はわずか 0.002、色相差は 85°。彩度が揃っていなければ、色相差は「片方が明るく片方が暗い」と読まれてしまう。揃っていて初めて、二つの光源の対話として読まれる——右上の空の裂け目と、それが足元の敷石に振り替えられた分と。

二大色族、違うのは色相だけ

全画面の 90°–165° の緑は 113,979 画素、平均 L 0.42 / 彩度 0.062 / 色相 145°。190°–280° の青緑と青は 238,308 画素、L 0.50 / 彩度 0.064 / 色相 230°。二族は 85° 離れ、彩度差は 0.002、明度差は 0.08。この絵が上下を色相に任せられるのはそのためだ——両端が残る二本の軸でほぼ重なっているから、その 85° が明暗と誤読されない。多色相の配色も同じで、対話させたい二族の彩度をまず同じ段に揃え、それから色相を離すこと。順番を逆にすると、色相を変えたつもりが、観る者には明るさの違いとして届く。

空は一筋だけ、それでも請求は足元に届く

この絵の空は、樹冠と瓦の軒に挟まれた右上の一筋にすぎない:画幅の 16%、画高の 8% を占めるその矩形は実測 L 0.62 / 彩度 0.113 / 色相 244°。そして足元の敷石の路は L 0.47 / 彩度 0.057 / 色相 229°——彩度は 0.50 倍まで落ち、色相は 15° しか動いていない。路面のその矩形 49,536 画素のうち 45,575 画素(92.0%)が 190°–280° に落ちている。〈万端珊瑚探偵所・日陰の昼〉の判定基準はスメールでもそのまま通る:一片の青が空なのか影なのかは、彩度を測れば分かる。一度手を渡ると半分以下まで落ち、色相はほとんど動かない。だからこの路は灰色の路ではなく、空に染められた路である——色相の立場があるからこそ、緑の瓦と対話できる。

最も明るいものと最も濃いものが別居した

最も明るい 4000 画素のうち 3,812 画素が右上の二区画に固まっている(L 0.93 / 彩度 0.030 と 0.034)。裂け目に覗く雲だ。最も濃い 4000 画素のうち 2,514 画素は 120°–150° の緑の瓦(L 0.58 / 彩度 0.128)で、全画面の彩度最大値 0.179 も緑の帯にあり、青の帯の最大値は 0.158 にとどまる。明度の天井は空へ、彩度の天井は瓦へ——どちらも二本の軸を同時に占めてはいない。これこそ、あの 85° が圧倒ではなく対話として読まれる条件である。街そのものの色はというと、全画面の 330°–90° の暖色はわずか 17,001 画素(1.93%)、平均 L 0.45 / 彩度 0.061 / 色相 50°。橙の衣も黄の花も屋台の幟も、合わせて画面の五十分の一に届かない。色相の対話の中にアクセントを置くなら、第三の色相に立たせ、面積を 2% 以内に抑えること。そうすれば対話を断ち切らない。

この配色を持ち帰る

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

/* トレジャーストリート・晴れの裂け目 · Treasures Street under a Seam of Sky — Teyvat Palette */
:root {
  --eaves-cloud-white: oklch(0.93 0.032 211); /* 軒上の雲白 #d1eef4 */
  --seam-sky-blue: oklch(0.62 0.113 244); /* 裂け目の空青 #428dc5 */
  --eave-edge-jade: oklch(0.58 0.128 139); /* 軒先の翠 #508c3e */
  --leaf-tile-green: oklch(0.42 0.062 145); /* 葉瓦の緑 #375638 */
  --market-warm: oklch(0.45 0.061 50); /* 市の暖点 #714b36 */
  --skylit-roadstone: oklch(0.47 0.057 229); /* 天光の敷石路 #366174 */
  --gradient-treasures-street: linear-gradient(200deg, oklch(0.93 0.032 211) 0%, oklch(0.62 0.113 244) 8%, oklch(0.58 0.128 139) 28%, oklch(0.42 0.062 145) 42%, oklch(0.45 0.061 50) 60%, oklch(0.47 0.057 229) 100%);
}

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