モンド昼軽やか蒼翠広闊

風唸りの丘・晴れと松の陰

Galesong Hill in Sun and Pine Shade

色カード

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

再構成グラデーション

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

0%65a0c722%e9f4f948%336b6b78%8aab63100%c2beac

なぜ調和するのか

調停役は灰である必要はない。ただし、いちばん声の小さい一段でなければならない:草の斜面 129° が 32.33%、空 239° が 45.67%、両者は 110° 離れている。そのあいだの松林帯 195° は、色相環で二つの中間に収まる(両側にそれぞれ 66° と 44°)だけでなく、残る二つのチャンネルでも同時に最下位だ——彩度 0.059 は草の 0.106 の半分と少し、明度 0.49 は両側の 0.70 と 0.68 より 0.19 以上低い。全画の無彩はわずか 8.83%。調停できる面が買っているのは静けさであって、「色相がないこと」ではない。

松林は色相を持った灰

165°–210° の帯は 12.08%、三本の色相帯で最も細いのに、左縁から右縁まで横一文字に伸びて草の斜面と空を実際に隔てている——この絵で二つの大きな色が直接接する場所は一つもない。その色相 195° は草の 129° と空の 239° のちょうど中間に落ち、彩度 0.059 と明度 0.49 は同時に三本中の最低。色相環の中点と画面の中点が同じ一本であること、それで調停が成り立つ。

静けさは二つのチャンネルで買う

同じ絵に反証がある:左手の砂岩の崖は実測で彩度 0.026、すでに無彩の線を踏んでいるのに L 0.80——草の 0.70 より、空の 0.68 より明るい。調停などしておらず、むしろ画面でいちばん目を引く形の一つだ。彩度を下げて買えるのは「うるさくない」までで、明度も下げて初めて「奪わない」が買える。UI で仕切りの面が欲しいときは、灰を使うと考えるのではなく、両隣より淡く、かつ両隣より暗く、と考えること。

灰なら四割、松林なら一割

〈ドラゴンスパイン・秋の雪〉は 39.47% の無彩で、百度以上離れた三つの色相を隔てた。同じものさし(bench の C<0.025)で風唸りの丘を測ると 8.83%、その四分の一にも満たない。あの 110° を隔てているのは 12.08% の松林である。灰にできるのは場所を占めることだけだが、中間に座る暗い帯はもう一つ仕事をする:それ自身が移行になり、ついでに 110° を 66° と 44° の二歩に割る。色相の幅が大きく、無彩の予算が乏しいときは、色相が中間で、彩度も明度も最下位の実在物を選ぶほうが、大きな灰を敷くより安い。

この配色を持ち帰る

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

/* 風唸りの丘・晴れと松の陰 · Galesong Hill in Sun and Pine Shade — Teyvat Palette */
:root {
  --high-sky: oklch(0.68 0.085 239); /* 高空の青 #65a0c7 */
  --cumulus-white: oklch(0.96 0.014 228); /* 積雲の白 #e9f4f9 */
  --pine-teal: oklch(0.49 0.059 195); /* 松林の青 #336b6b */
  --meadow-green: oklch(0.7 0.106 129); /* 丘草の緑 #8aab63 */
  --cliff-stone: oklch(0.8 0.026 99); /* 崖岩の白 #c2beac */
  --grass-ember: oklch(0.78 0.158 74); /* 草間の橙 #f2a621 */
  --gradient-galesong-hill: linear-gradient(180deg, oklch(0.68 0.085 239) 0%, oklch(0.96 0.014 228) 22%, oklch(0.49 0.059 195) 48%, oklch(0.7 0.106 129) 78%, oklch(0.8 0.026 99) 100%);
}

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