蒙德昼澄澈开阔清凉

果酒湖·澈午

Cider Lake at Crystal Noon

色卡

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

重构渐变

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

0%3278ba26%8ab4d345%71a7c266%72bdba84%96a581100%9f9665

为什么和谐

纵深和光源是两张地图,可以各占一条通道、各有各的原点:从画顶到近岸,七条等高横带的色相单调走了 248° → 143°,一次没有回头;明度却绕着地平线对折——天顶 0.59、地平线上方那条 0.75、脚下 0.59,两端一模一样。色相记的是「穿过了多少水」,明度记的是「离那条亮线有多远」,别把两件事叠在同一条通道上。

明度在地平线上对折

把画横切成八条等高的带,明度依次是 0.59 / 0.71 / 0.75 / 0.69 / 0.68 / 0.71 / 0.71 / 0.59:最暗的两条一条在天顶、一条贴着镜头,数值完全相同,最亮的 0.75 夹在地平线上方。〈列柱沙原·白霭〉量过这种对折——光源摊成一条地平线时,梯度就沿那条线折起来。区别是那篇里彩度跟着一起折,这里彩度不折:往上 0.064 → 0.118 在涨,往下 0.070 → 0.057 在掉。明度在这幅画里只回答一个问题:离那条亮线有多远。

那 151° 是一条路,不是一场对撞

四条有面积的色相带均值 88° / 130° / 188° / 239°,一档挨一档铺满 151°,合计 96.40% 的画面。听上去像多色相打架,实际它们从不在同一高度出现:天顶 250°、地平线 231°、水面 192°、水下沙底 126°、露出水面的沙滩 99°。跨度最远的两端,一个贴着画的上缘、一个贴着下缘,永远不相邻。色相这条通道被纵深整根占用,也正是这张画不需要一块中性底的原因——全图无彩只有 3.55%。

那片金沙里没有暖色

水线以下、画面右下那片沙洲看着是金色的,实测色相 126°、彩度 0.054;把 330°–90° 这 120° 宽的窗口套在同一个矩形上,18966 个像素里只匹配到 6 个。全图的红带(345°–15°)也只有 0.02%,下半张所有落在 45°–90° 的像素平均只到 88°。它读作金,是因为它是那条色相之路走到的最后一段。所以分派通道之前先量:「看上去是什么颜色」不能决定哪条通道去画哪张地图。

带走这组颜色

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

/* 果酒湖·澈午 · Cider Lake at Crystal Noon — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.56 0.124 250); /* 天顶蓝 #3278ba */
  --cumulus-white: oklch(0.97 0.01 216); /* 积云白 #eef7f9 */
  --horizon-blue: oklch(0.7 0.069 231); /* 地平蓝 #71a7c2 */
  --lake-teal: oklch(0.75 0.075 192); /* 湖面青 #72bdba */
  --sandbed-green: oklch(0.7 0.054 126); /* 沙底绿 #96a581 */
  --shoal-gold: oklch(0.67 0.068 99); /* 出水金 #9f9665 */
  --cliff-shadow: oklch(0.59 0.067 246); /* 崖影蓝 #5c81a3 */
  --gradient-cider-lake: linear-gradient(180deg, oklch(0.56 0.124 250) 0%, oklch(0.75 0.064 242) 26%, oklch(0.7 0.069 231) 45%, oklch(0.75 0.075 192) 66%, oklch(0.7 0.054 126) 84%, oklch(0.67 0.068 99) 100%);
}

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

色卡