モンド夕温もり広闊懐かしさ

風立ちの地・黄昏

Windrise at Dusk

色カード

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

再構成グラデーション

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

0%315b7238%8170a066%d37b8285%ee8f63100%f3ae58

なぜ調和するのか

教科書どおりの寒暖の衝突。空は青から金橙へと滑り、色相はおよそ 180° を横断するのに、明度は単調に増え、彩度は地平線に至ってはじめて解放される。だから衝突は濁りもせず、こもりもしない。

色相の長い旅

青(235°)→ 暮れの紫(315°)→ 薔薇(15°)→ 金(70°)と、色相環を一方向にだけ回っていき、隣り合う停車駅の間隔はどれも 90° を超えない。グラデーションが灰色に濁る元凶は補色を直に突き抜けることであって、回り道をすれば灰の帯を通ることは決してない。

明度は一直線

上から下へ L が 0.45 から 0.80 まで単調に上がっていき、視線は自然に地平線の最も明るい点へ導かれる。明度のリズムがそのまま構図の誘導になっている。ここでは配色と構図は同じ一つのことだ。

彩度は後ろに置く

高い彩度は最後の 30%(霞の橙、落日の金)にしか現れず、大面積の空は低彩度のまま後ろへ退いている。UI に置いても同じ法則になる。大面積は低彩度で地を作り、小面積の高彩度で点睛する。

この配色を持ち帰る

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

/* 風立ちの地・黄昏 · Windrise at Dusk — Teyvat Palette */
:root {
  --sunset-gold: oklch(0.8 0.13 70); /* 落日の金 #f3ae58 */
  --afterglow-orange: oklch(0.7 0.15 45); /* 霞の橙 #e97c48 */
  --rose-dusk: oklch(0.66 0.11 15); /* 薔薇の粉 #cc757c */
  --twilight-mauve: oklch(0.55 0.07 315); /* 暮れの紫 #81658e */
  --dusk-teal: oklch(0.45 0.06 235); /* 暮れの青 #315b72 */
  --gradient-mondstadt-windrise-dusk: linear-gradient(178deg, oklch(0.45 0.06 235) 0%, oklch(0.58 0.075 300) 38%, oklch(0.68 0.11 15) 66%, oklch(0.74 0.13 45) 85%, oklch(0.8 0.13 70) 100%);
}

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