モンド昼田園自由明朗

モンド城・和やかな風

Mondstadt, Fair Winds

色カード

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

再構成グラデーション

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

0%89aca230%84a5a355%68a57a80%208fae100%007f9f

なぜ調和するのか

璃月港とまったく同じ公式——広い冷たい地が小さな暖点を立てる(青 68% 対暖色 1.1%)——なのに、街の気質は別物である。個性は公式の中にはない。アクセントの色相が 40° ずれている、その差の中にある。

公式は再現する

68.1% の青(平均 216°)に 25% の灰を地として敷き、暖色はわずか 1.1%——璃月港(2.6%)よりさらに抑制的だ。「冷たい地が暖かい点を立てる」というこの公式は、街をまたいで通用する。では公式が同じなのに、二つの街がまるで違って見えるのはなぜか。

個性は 40° に宿る

モンドの暖点は赤瓦で実測 47°、璃月のそれは杏金で 87°。同じ役割の位置にあるアクセントの色相が 40° 違うだけで、一方はヨーロッパの童話に、もう一方は水墨の江南に読まれる。シリーズでテーマを作るなら、システムは丸ごと共有できる。アイデンティティの色は、色相を一歩動かせば地域が変わる。

空へ近づくほど無彩になる

風車の帆 C 0.040、大聖堂の石 C 0.036——街の上半身はほぼ無彩で、輪郭だけで空に対している。色(赤瓦、緑の木、湖の青)はすべて下半身に集まっている。インターフェースも同じだ。上部のナビゲーションを素にして彩度をコンテンツ領域に残せば、階層は自ずと立つ。

この配色を持ち帰る

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

/* モンド城・和やかな風 · Mondstadt, Fair Winds — Teyvat Palette */
:root {
  --lake-teal: oklch(0.606 0.104 222.3); /* 湖の青 #218faf */
  --rampart-grey: oklch(0.696 0.036 192.7); /* 石垣の灰 #84a5a3 */
  --meadow-green: oklch(0.668 0.09 152.9); /* 草原の緑 #68a57a */
  --red-tile: oklch(0.731 0.063 46.7); /* 赤瓦 #ca9c87 */
  --windmill-white: oklch(0.715 0.04 175.7); /* 風車の白 #89aca2 */
  --gradient-mondstadt-city: linear-gradient(172deg, oklch(0.715 0.04 176) 0%, oklch(0.696 0.036 193) 30%, oklch(0.668 0.09 153) 55%, oklch(0.606 0.104 222) 80%, oklch(0.55 0.11 222) 100%);
}

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