蒙德昼明快苍翠开阔

风啸山坡·晴荫

Galesong Hill in Sun and Pine Shade

色卡

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

重构渐变

从场景蒸馏出的渐变,按停靠点从左到右展开;成品角度 180°(hero 与导出使用),画廊卡片统一以 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 都亮。它一点没在调停,反而是画里最抢眼的形状之一。彩度低只换来「不吵」,明度也压下去才换来「不抢」。界面里想要一块分隔面,别只想着用灰,想着比两边都淡、并且比两边都暗。

一块灰要四成,一条松林只要一成

〈龙脊雪山·秋雪〉靠 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,原图、色卡与色值都在里面——存下来直接发。

色卡