枫丹昼开阔蓬勃盛夏

苍晶区·盛光

Beryl Region in Full Light

色卡

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

重构渐变

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

0%2d7ff214%a2d9fc28%90c9f042%7aaaba62%248b6c86%61af49100%aaa55b

为什么和谐

「浓」和「响」是两个数,一个旋钮调不出来:苍晶区的彩度中位数 0.121,和黎翡区一模一样浓,可它的 p99 是 0.195、黎翡区只有 0.160——同样的中位数,一张还剩 0.074 的额度,一张只剩 0.039。差别不在地上那半幅草,在画框最上缘那块天:正中 40% 宽、5% 高的天顶矩形,这里实测彩度 0.190,白露区同一个矩形是 0.163。中位数高不是错,错的是中位数抬上去了而天花板没跟着上去。

半幅画站在高位

绿带占 51.94%,均值 L 0.68 / 彩度 0.138 / 色相 138°;取下缘正中 30% 宽、12% 高的那块草坡,33408 个像素均值 L 0.68 / 彩度 0.158——一块最普通的前景草地,均值就已经贴上白露区全图 p99 的 0.164。这就是中位数 0.121 的全部来路:不是哪一处特别艳,是有一半画面站在高位。连本该稀释它的东西都没稀释——那条从右中蜿蜒到左下角的土路,左下角那段实测色相 105° / 彩度 0.096,比草坡黄、比草坡淡,却一步都没跨出 90°–165° 的绿带;全图 45°–90° 的黄只有 0.14%(村口那几朵向日葵),330°–15° 的红只有 0.01%。想让画面浓,别去拧某样东西的饱和度,先看占面积最大的那样东西站在哪一档。

天花板还是天给的

最艳的 4000 个像素里 3705 个落在 240°–270°,均值 L 0.59 / 彩度 0.196,峰值点坐标 (0.45, 0.02)——画框最上缘,和白露区是同一个结构。绿再多也没把它顶下来:绿带的最高彩度 0.218,蓝带的是 0.225。变的只是这块天本身有多深,而这一步是取景走的——上缘一整条(高 3%)实测彩度 0.117,反而比白露区同一条的 0.152 低,因为右上角压着一大团积云;把云让开、只取正中那块空天,0.190 对 0.163。天花板不是调出来的,是你把最深的那一段天留了多少在画里。

额度要两个数一起算

把六个枫丹场景的彩度 p99 减 p50 排开:白露区 0.071、莫尔泰区 0.072、黎翡区 0.039、苍晶区 0.074、枫丹廷区 0.049、研究院区 0.069(白露区与黎翡区自己的正文用的是实测面减中位数,0.070 与 0.015,口径不同、名次一样)。苍晶区是六张里额度最大的,而它的中位数和额度最小的那张一样高——所以「压低中位数」只是攒额度的一种做法,不是唯一一种:你也可以不省,让画面浓的同时把最深的那块天留在画里。两条路都通,但两个数必须一起看,只盯中位数会把苍晶区错读成黎翡区。

带走这组颜色

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

/* 苍晶区·盛光 · Beryl Region in Full Light — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.61 0.19 258); /* 天顶蓝 #2d7ff2 */
  --cumulus-pale: oklch(0.86 0.075 237); /* 积云淡蓝 #a2d9fc */
  --saw-peak: oklch(0.81 0.081 239); /* 锯峰蓝 #90c9f0 */
  --grey-scarp: oklch(0.71 0.056 221); /* 灰岩崖 #7aaaba */
  --fir-ink: oklch(0.57 0.104 168); /* 冷杉墨 #248b6c */
  --slope-green: oklch(0.68 0.158 139); /* 坡草绿 #61af49 */
  --path-ochre: oklch(0.71 0.096 105); /* 土径黄 #aaa55b */
  --gradient-beryl-region: linear-gradient(180deg, oklch(0.61 0.19 258) 0%, oklch(0.86 0.075 237) 14%, oklch(0.81 0.081 239) 28%, oklch(0.71 0.056 221) 42%, oklch(0.57 0.104 168) 62%, oklch(0.68 0.158 139) 86%, oklch(0.71 0.096 105) 100%);
}

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

色卡