须弥昼浩渺消融静谧

列柱沙原·白霭

Hypostyle Desert in White Haze

色卡

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

重构渐变

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

0%bdccfe30%dbe4fd49%ebf8fc56%d5ddfb72%b8a5ca100%bc9eaa

为什么和谐

〈大日御舆·白芒〉那条「雾的彩度梯度围着光源排」在这里只换了光源的几何:那边的光是一个圆盘,梯度朝四角同心散开;这里的光是一条线——地平线。全幅横量,y 0.46–0.52 那条带 L 0.97、彩度 0.015,天顶那条 L 0.85、彩度 0.064,脚下那条 L 0.73、彩度 0.038。线光源的梯度只有两个方向可走,于是整条被对折成上下两半。画厚大气别做从上到下的单向渐变,先在地平线上折一次。

最亮的一条线在画面正中

取左三分之一(x 0.02–0.32)自上而下逐条量:天顶 L 0.82、彩度 0.078,到 y 0.49 变成 L 0.98、彩度 0.009,再到 y 0.86 掉回 L 0.70、彩度 0.047。换一列(x 0.33–0.45)重新量一遍,峰还在同一个位置:y 0.50 是 L 0.99、彩度 0.010。色相也在那里折返——290° 一路收到 264°,过了地平线又一路开到 340°。这不是构图偏好,是大气本身:朝地平线看要穿过的空气比朝天顶看厚出许多倍,雾自己的颜色在那里饱和到把一切吃掉,而头顶的大气很薄。〈大日御舆·白芒〉的日轮核心 L 0.99、彩度 0.005 对上离光最远的四角 L 0.46、彩度 0.045(两组数字引自该篇),彩度谷同样压在光上——那边只需要一个方向,因为圆盘的外面处处是外面;地平线是一条线,线有两侧,所以同一条梯度必须走两遍。

最远的东西最看不见,最近的东西才最深

最远那几道山脊正好压在这条最亮的线上,左边一段实测 L 0.90、彩度 0.042,右边一段 L 0.94、彩度 0.027,是全画最淡的实体。而左下角那座半埋在沙里的列柱前殿 L 0.71、彩度 0.054,画面最下缘的沙丘(y 0.90–0.98,51,968 像素)L 0.73、彩度 0.038、色相 353°——最暗的、色相跑得最远的东西全在脚边。连天顶那道喷发的橙色羽流还读得出是火(L 0.90、彩度 0.051、色相 28°),靠的也是位置:地平线那条带的彩度只有 0.015,同一片羽流挪过去就被抹平了。

诺思托伊区的公式只管半幅画

那篇的两个梯度是前景湖面 L 0.72、彩度 0.106 走到最远的山 L 0.87、彩度 0.079——越远越亮、越远越淡。这里地平线以下完全照办,而且幅度更大:脚下 L 0.73、彩度 0.038 走到地平线 L 0.97、彩度 0.015。但地平线以上整条反着跑,从 0.97、0.015 回到天顶的 0.85、0.064。所以「越远越亮越淡」是半幅画的公式;整幅画的公式是把它在地平线上对折一次。做背景渐变时把这一折加进去,天空才不会像一块贴上去的板。

带走这组颜色

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

/* 列柱沙原·白霭 · Hypostyle Desert in White Haze — Teyvat Palette */
:root {
  --zenith-haze: oklch(0.85 0.073 272); /* 霾顶紫 #bdccfe */
  --horizon-white: oklch(0.97 0.015 219); /* 地平白 #ebf8fc */
  --far-ridge: oklch(0.9 0.042 274); /* 远岭蓝 #d5ddfb */
  --ember-plume: oklch(0.9 0.051 28); /* 焰羽橙 #fed2cb */
  --peak-violet: oklch(0.8 0.052 291); /* 主峰紫 #bdb8dd */
  --buried-hall: oklch(0.71 0.054 309); /* 殿基赭 #ab99bc */
  --near-dune: oklch(0.73 0.038 353); /* 近沙玫 #bc9eaa */
  --gradient-hypostyle-desert: linear-gradient(180deg, oklch(0.85 0.073 272) 0%, oklch(0.92 0.036 271) 30%, oklch(0.97 0.015 219) 49%, oklch(0.9 0.042 274) 56%, oklch(0.75 0.057 309) 72%, oklch(0.73 0.038 353) 100%);
}

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

色卡