稲妻夕やわらぎ静寂名残

浅瀬神社・宵の星

Asase Shrine under the First Stars

色カード

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

再構成グラデーション

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

0%9d799430%ab7d8b52%8658a182%4b6e47100%755e4b

なぜ調和するのか

補色のぶつかりを静かに収めるのに、両側そろって彩度を下げる必要はない。この絵は無名の剣塚と同じ幅(どちらも 174°)をまたぐが、あいだが切れているぶん彩度を差し出さねばならない——差し出したのは 53.95% を占める宵の空だけ(0.050–0.060)で、15.50% の草坡は 0.072 のまま、桜の冠と社の灯も 0.122 と 0.123 のままである。彩度の課税標準は面積だ。

彩度を納めたのは空だけ

紫 10.00%、桃 21.53%、赤 22.42%——合わせて 53.95% を占める宵の空は、彩度がそれぞれ 0.050、0.053、0.060。いっぽう 15.50% しかない緑は 0.072 である。画面全体の彩度の中央値 0.052 は空に引き下げられた平均であって、草坡まで退いたわけではない。絵を見ればそのままだ——空は洗い流したような灰がかった薔薇色なのに、その下の草は正真正銘の緑をしている。主色とアクセントが補色で、しかもどちらも面積を要るときは、大きいほうだけを淡くし、小さいほうは一段も動かさないこと。

同じ幅の跨ぎ、切れた中間

二枚の絵の両極は同じだけ離れている——剣塚は黄 69° から青 255°、ここは緑 142° から桃 328°、どちらも 174°。違いはすべて中間にある。剣塚では四つの色帯が首尾つながり、最も細い段でも 12.65% あった。ここでは緑から桃へ向かう二つの道の隘路が、それぞれ黄 3.47% と青 1.01% しかない。中間色の受け渡しがなければ、跨ぎの代償はほかから出すしかない——彩度の中央値は 0.052 対 0.072、p99 は 0.108 対 0.132。高くつくのは跨ぎそのものではなく、切れ目のほうだ。

小さい面積は一律免税

草坡を除けば、彩度を守っているのはどれも小さなものばかりだ。社の上に広がる桜の冠は、最も飽和した 570 画素が (0.51, 0.42) に落ち、実測 312°・彩度 0.122。社の前で灯る青い明かりは、最も飽和した 3% が実測 266°・彩度 0.123 で、青の帯そのものは 1.01% しかない。どちらも宵の空の 0.053 の二倍を超えるのに、面積が小さいから騒がない。同じ 0.12 でも、画面の半分を覆えば喧噪、ひと房の樹冠とひとつの灯に落ちればアクセントになる——彩度を下げる前に、下げようとしているその面がどれだけ大きいかを問うこと。

この配色を持ち帰る

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

/* 浅瀬神社・宵の星 · Asase Shrine under the First Stars — Teyvat Palette */
:root {
  --dusk-rose: oklch(0.62 0.058 336); /* 宵の桃色 #9d7994 */
  --afterglow-red: oklch(0.64 0.06 359); /* 残照の紅 #ab7d8b */
  --sakura-violet: oklch(0.54 0.122 312); /* 桜冠の紫 #8658a1 */
  --shrine-lamp-blue: oklch(0.56 0.123 266); /* 社灯の青 #5271bc */
  --meadow-green: oklch(0.5 0.072 142); /* 草坡の緑 #4b6e47 */
  --ledge-ochre: oklch(0.5 0.042 61); /* 岩背の黄土 #755e4b */
  --gradient-asase-shrine: linear-gradient(180deg, oklch(0.62 0.058 336) 0%, oklch(0.64 0.06 359) 30%, oklch(0.54 0.122 312) 52%, oklch(0.5 0.072 142) 82%, oklch(0.5 0.042 61) 100%);
}

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