须弥昼开阔清朗蓬勃

须弥城·青昼

Sumeru City in Cyan Daylight

色卡

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

重构渐变

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

0%6db5d822%59abc846%6da9ba70%4c939a88%3b908d100%58a765

为什么和谐

纵深的第三种走法:只让色相单调。把画面横切成五条等高带,自上而下色相 230°→230°→217°→204°→192° 一路不回头,而明度(0.74/0.69/0.70/0.57/0.58)和彩度(0.088/0.090/0.067/0.072/0.072)都中途折返过——诺思托伊区靠一升一降的明度与彩度拉开远近,这里把那两个旋钮按住,空间全部交给 38° 的色相位移。

只有色相不回头

五条等高带自上而下量:色相 230°、230°、217°、204°、192°,是三个通道里唯一单调的一条;明度 0.74/0.69/0.70/0.57/0.58 折返过两次,彩度在 0.067 到 0.090 之间只有 0.023 的活动余地。诺思托伊区做同一件事的路子正好相反——明度 0.72 升到 0.87、彩度 0.106 降到 0.079,而色相全程不动。空气透视要的从来不是三个旋钮一起动,是其中任意一个真的不回头:先选定一个,再把另外两个按住。

树城的树,没有一个绿像素

那棵城所在的大树,树冠占了画面左上到中部的一大块;在这块里落进绿带 90°–165° 的像素只有 157 个,落进青带 165°–215° 的有 39253 个,整个上半幅的绿加起来 786 个、只占全图绿的 1.4%。树冠均值色相 208°,离头顶那条天空带的 230° 只差 22°。这是雨林里的树城,而它的树是青的——在色相队列里它排在离天空最近的一格,那一格是什么色主体就是什么色,材质说了不算。

本地色只发给最近的一格

全图 6.5% 的绿(57271 像素)有 63% 挤在右下角那片草坡上,均值色相 148°、彩度 0.124,全图的彩度峰值 0.170 也在那里,比树冠的 0.076 高出六成。队尾必须留一块没被天空改造过的原色,否则 230° 到 192° 只是一片渐变的蓝,读不出「越远越贴天」。想用色相做纵深:先定天空色,再把一块本地色说满的近景放进最靠前的一格,让观众有得比。

带走这组颜色

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

/* 须弥城·青昼 · Sumeru City in Cyan Daylight — Teyvat Palette */
:root {
  --cumulus-white: oklch(0.97 0.012 196); /* 积云白 #ecf8f8 */
  --zenith-blue: oklch(0.68 0.119 244); /* 晴空蓝 #50a0dc */
  --far-ridge-haze: oklch(0.71 0.096 228); /* 远岭霭 #5aadd1 */
  --canopy-shade: oklch(0.43 0.049 219); /* 荫下城 #2e5662 */
  --crown-cyan: oklch(0.65 0.076 208); /* 树冠青 #519ca7 */
  --lake-teal: oklch(0.7 0.081 173); /* 湖光碧 #66af9a */
  --slope-green: oklch(0.66 0.124 148); /* 坡草绿 #58a765 */
  --gradient-sumeru-city: linear-gradient(180deg, oklch(0.74 0.088 230) 0%, oklch(0.7 0.09 224) 22%, oklch(0.7 0.067 217) 46%, oklch(0.62 0.072 204) 70%, oklch(0.6 0.081 192) 88%, oklch(0.66 0.124 148) 100%);
}

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

色卡