蒙德昏温暖辽阔怀旧

风起地·黄昏

Windrise at Dusk

色卡

点击色块复制 HEX;悬停查看 OKLCH 值。

重构渐变

从场景蒸馏出的渐变,按停靠点从左到右展开;成品角度 178°(hero 与导出使用),画廊卡片统一以 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,原图、色卡与色值都在里面——存下来直接发。