稲妻昼涼陰静けさひやり

万端珊瑚探偵所・日陰の昼

Bantan Sango Detective Agency in the Shade

色カード

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

再構成グラデーション

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

0%3c85c416%a881ba34%32693e55%202d3a74%506373100%817a84

なぜ調和するのか

一面の青が空なのか影なのかは、彩度を測ればわかる。この絵は 22.70% の画素が青の帯に落ちるのに、画面で最も彩度の高い 4000 画素には青が一つもない。210°〜270° の 199,894 画素は平均彩度 0.054 しかなく、彩度順に並べた上位 3%(5,997 個)でようやく 0.124——左上の隅に覗く空(0.120)とちょうど一致する。天光が陰の面に配る分は、色相はそのまま、彩度は半分以下に削られている。影を描くとき黒に沈めても灰に寄せてもいけない。空の色相を動かさずに押さえ、彩度だけを動かすこと。

画面の二割が青、なのに最も鮮やかな四千画素に青は一つもない

青の帯は 22.70%。ところが彩度の高い上位 4000 画素は右手の松と草の斜面(2505 個、色相 139°)と屋根の上の桜(1431 個、313°)に配られ、210°〜270° は一つも入らない。理由は平均値にある。この 199,894 個の青画素の彩度は 0.054 しかなく、左上の隅にある本物の空は 0.120。広い青を見たらすぐ空と記録しないこと——天光の原色は一度手を渡るだけで半分以下に落ちる。

色相は一度も動かず、動くのは彩度だけ

左上のあの空は 247°、長い石段の上段は 245°、探偵所の陽の回らない板壁は 250°、青の帯全体の平均は 251°——四つの読みが 6° の内側に収まる。そして彩度は空の 0.120 から石段の 0.035、板壁の 0.030 まで落ちる。この絵の 45.10% が無彩の閾値を下回り、彩度中央値が 0.028 しかないのは、まさにこの一手による。影とは別の色を調合することではなく、同じ色の低彩度版なのだ。

空は隅に一片でいい、配られる分は変わらない

〈八重堂・青天〉では青の帯が 49.95%、ほぼ全面が空で、視線より下の 74,563 個の青画素は L 0.40、彩度 0.046、色相 252° だった。ここでは空は左上の一角しか残っていないのに、同じ陰の青は L 0.43、彩度 0.054、251°——色相の差は 1°、彩度の差は 0.008。二枚で空の占める面積は倍以上違うのに、陰の面に配られた分はほとんど動いていない。構図が決められるのは空をどれだけ見せるかであって、影が何色かではない。だから画面全体の色被りを変えたいなら、空の色を変えること。影を一つずつ塗り替えにいかないこと。

この配色を持ち帰る

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

/* 万端珊瑚探偵所・日陰の昼 · Bantan Sango Detective Agency in the Shade — Teyvat Palette */
:root {
  --sky-corner: oklch(0.6 0.12 247); /* 隅の空 #3c85c4 */
  --stair-shadow: oklch(0.49 0.035 245); /* 石段の影青 #506373 */
  --eave-ink: oklch(0.29 0.03 250); /* 軒下の墨 #202d3a */
  --petal-stone: oklch(0.59 0.016 318); /* 花びらの石畳 #817a84 */
  --pine-shade: oklch(0.47 0.09 149); /* 松影の緑 #32693e */
  --sakura-crown: oklch(0.66 0.093 315); /* 桜冠の紫 #a881ba */
  --gradient-bantan-sango-detective-agency: linear-gradient(155deg, oklch(0.6 0.12 247) 0%, oklch(0.66 0.093 315) 16%, oklch(0.47 0.09 149) 34%, oklch(0.29 0.03 250) 55%, oklch(0.49 0.035 245) 74%, oklch(0.59 0.016 318) 100%);
}

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