璃月晨静谧空灵东方

绝云间·晨雾

Jueyun Karst at Dawn

色卡

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

重构渐变

从场景蒸馏出的渐变,按停靠点从左到右展开;成品角度 170°(hero 与导出使用),画廊卡片统一以 135° 斜向展示。

0%c2dde235%8ac4c360%44969182%285e6a100%1c4351

为什么和谐

近邻色相 + 明度阶梯做出空气透视;唯一的暖色赭岩以不到 5% 的面积出现,却让整幅画活了——中国山水的留白与点睛,翻译成了色彩语言。

单色系的胆量

主体全部压在 188°–225° 的青色邻域,五个层次全靠明度(0.36 → 0.92)拉开。少色相、多明度,足以撑起一整幅画面——这是最容易被低估的配色策略。

空气透视 = 明度阶梯

越远的山越亮、越灰(饱和度随距离衰减)。这是把大气散射的物理翻译成色彩;UI 的层级(前景 / 卡片 / 背景)可以套用同一逻辑:越靠后越接近环境色。

5% 的互补点睛

赭岩(60°)与青瓷(195°)接近互补,但面积被严格限制在山体棱线。互补色的正确用法从来不是对半分,而是 95:5。

带走这组颜色

CSS 变量、Tailwind v4 主题或 SVG,一键复制到你的项目。

/* 绝云间·晨雾 · Jueyun Karst at Dawn — Teyvat Palette */
:root {
  --mist-white: oklch(0.92 0.015 200); /* 云雾白 #dae8e8 */
  --celadon: oklch(0.75 0.07 195); /* 青瓷 #77bcbc */
  --pine-jade: oklch(0.58 0.08 188); /* 松石绿 #378a83 */
  --ochre-cliff: oklch(0.58 0.08 60); /* 赭岩 #9d6f48 */
  --indigo-peak: oklch(0.4 0.055 225); /* 黛山 #224e5e */
  --gradient-liyue-jueyunjian-dawn: linear-gradient(170deg, oklch(0.88 0.03 210) 0%, oklch(0.78 0.06 195) 35%, oklch(0.62 0.08 190) 60%, oklch(0.45 0.06 215) 82%, oklch(0.36 0.05 225) 100%);
}

1080×1350 的 PNG,原图、色卡与色值都在里面——存下来直接发。