璃月昼晴れやか広やかめでたさ

北国銀行・陽ざかり

Northland Bank in Full Sun

色カード

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

再構成グラデーション

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

0%398ccc22%b7d1cb44%68a86458%8db88a74%e1994c100%f25d50

なぜ調和するのか

人工物の色は二つに分かれる——周りから借りてきた色と、自前の色だ。この門楼の瑠璃瓦と岩の上の梢は色相 143° で一致し、瓦のほうが葉より三割淡い(彩度 0.081 対 0.117)。自前なのは朱だけで、左上の空と雲の 8.3 万画素のうち暖色の窓に落ちるのはわずか 3 個、門楼の背後の岩山にいたっては一つもない。借りた色相が帰属を、自前の一色が身元を引き受ける。

瓦は梢を見て焼かれた

右下に広がる大屋根の瑠璃瓦は実測で L 0.74、彩度 0.081、色相 143°。門楼の左手、岩の上に立つ木は L 0.67、彩度 0.117、色相 143°——色相は度の単位まで一致し、しかも人工の側は彩度が三割低い。だから緑の屋根は「緑の面」ではなく山の続きとして読まれ、屋根が重なるほど建物は斜面から生えてきたように見える。新しく作るものを風景に馴染ませたいなら、色相はその場から借り、彩度は一段譲ること。

朱はこの風景に生えない色

左上の空と雲は合わせて 8.3 万画素、そのうち 330–45° の暖色窓に落ちるのはわずか 3 個で、彩度 0.028。門楼の背後の岩山 2.0 万画素にいたっては一つもない。一方、画面でもっとも彩度の高い 4000 画素はすべて 28°、彩度 0.186 で、(0.63, 0.69) の柱の胴と階の手前に集まっている。青帯は面積の 24.3% を占め、その空の彩度は 0.125——面積でも彩度でも朱に引けを取らない。それでも視線が先に向かうのは門楼のほうだ。この風景で自然には生えてこない色が、朱だけだからである。存在を主張したいときは彩度を競うのではなく、環境が空けている色相を探すこと。

朱は立っているものにしか塗られない

朱は垂直な部材だけに厳しく配給されている。二本の柱(向光面 L 0.73、彩度 0.147、陰面 L 0.55、彩度 0.131)、両側の欄干、正面中央の階段(L 0.64、彩度 0.112、色相 39°)。屋根にも壁にも梁にも朱は一寸もない——扁額まわりでもっとも鮮やかな 3% は 32°、彩度 0.173 で、柱頭の縁取りと額縁のものであって、瓦ではない。結果として朱が描き出すのは「門」の骨格そのものであり、瑠璃瓦のほうは山の斜面と合流し続ける。同じ強調色を一種類の部材にだけ与えれば、境界線を引かなくても階層は生まれる。

この配色を持ち帰る

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

/* 北国銀行・陽ざかり · Northland Bank in Full Sun — Teyvat Palette */
:root {
  --cerulean-sky: oklch(0.62 0.125 245); /* 碧空の青 #398ccc */
  --cliff-stone: oklch(0.84 0.03 179); /* 崖岩の白 #b7d1cb */
  --canopy-green: oklch(0.67 0.117 143); /* 梢の緑 #68a864 */
  --glaze-green: oklch(0.74 0.081 143); /* 瑠璃瓦の緑 #8db88a */
  --plaque-gold: oklch(0.74 0.127 65); /* 扁額の金 #e1994c */
  --vermilion-post: oklch(0.67 0.186 28); /* 朱の柱 #f25d50 */
  --gradient-northland-bank: linear-gradient(180deg, oklch(0.62 0.125 245) 0%, oklch(0.84 0.03 179) 22%, oklch(0.67 0.117 143) 44%, oklch(0.74 0.081 143) 58%, oklch(0.74 0.127 65) 74%, oklch(0.67 0.186 28) 100%);
}

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