须弥昼荫凉潮润市井

沙普尔旅舍·崖荫

Shapur Hotel in Cliff Shade

色卡

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

重构渐变

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

0%173f1a26%24563c38%4a3c5358%345c67100%2c3c34

为什么和谐

分开天与地,明度这一笔可以一分不花:同一对矩形量沙普尔旅舍的上下缘,明度是 0.33 对 0.33——一模一样,而彩度是 0.076 对 0.024。这地方头顶压着整面苔岩、画里没有一寸天空,本就没有能造出明暗差的光;差额全记在彩度上,读出来是「荫」而不是「暗」。同一批的〈维卡拉商栈·白照〉把同一笔差额整个记在明度上(上下 0.34 对 0.87),两张都分得开——分得开是共同项,读作什么地方,是那根轴决定的。

上下等明,靠三倍彩度分

背景那面苔岩崖 L 0.33 / 彩度 0.077 / 色相 145°,前景整片木栈道 L 0.34 / 彩度 0.025 / 色相 164°:明度差 0.01,色相差 19°,彩度差 3.1 倍。全图明度从 p01 的 0.22 到 p99 的 0.54,一张 720p 的画只活在 0.32 的明度带里,却一点不糊——绿带占 56.92%、均值彩度 0.059,而前景木板的 0.025 正踩在无彩线上。画一个没有直射光的地方,别靠压暗前景来分层;把彩度差拉到三倍,明度让它平。

明度只租给了一块石板

全图明度中位数 0.34,而右侧那块石板广场 L 0.45——它是画里唯一明显亮过中位数的面,也是唯一的蓝:那块 16,356 像素的矩形里有 14,687 个(89.8%)落在 190°–270°,均值色相 217° / 彩度 0.048;放到全图,190°–270° 共 80,107 个像素、218° / 0.050。最亮的 4000 个像素里也有 1,388 个在这块石板上(L 0.55 / 彩度 0.058 / 色相 223°)。可这张画里没有一个像素是天空。〈万端珊瑚侦探社·荫昼〉量过同一件事的另一端——那篇天只剩一个画角,影蓝 0.054 / 251°;这里天一个像素都没有,影蓝 0.048 / 217°,那笔账照收不误。明度这根轴不是不能用,是只够租给一块面;剩下的分离只能记在彩度上。

彩幡是唯一的外族,而它并不响

檐下那排三角彩幡是画里唯一成片的非绿青色:全图 270°–345° 共 5,001 个像素(0.57%),均值 L 0.38 / 彩度 0.043 / 色相 313°——彩度还低于绿带的 0.059。栈道正中那个红袍旅人更小,最艳的一撮 L 0.38 / 彩度 0.097 / 色相 17°,而全图 330°–90° 的暖色总共只有 4,082 个像素。一张 81.09% 落在绿、青、蓝三带里的画,靠这两撮不到百分之一的外族色就有了「这里有人做生意」的意思。在同族色的大面里安点缀,不必把它调响——面积够小、色相唯一就够;调响反而会把「荫」调没。

带走这组颜色

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

/* 沙普尔旅舍·崖荫 · Shapur Hotel in Cliff Shade — Teyvat Palette */
:root {
  --moss-cliff-green: oklch(0.33 0.077 145); /* 苔崖绿 #173f1a */
  --shell-roof-teal: oklch(0.41 0.07 158); /* 贝瓦青 #24563c */
  --bunting-violet: oklch(0.38 0.043 313); /* 彩幡紫 #4a3c53 */
  --skylit-flagstone: oklch(0.45 0.048 217); /* 天光石板 #345c67 */
  --deck-grey: oklch(0.34 0.025 164); /* 栈木灰 #2c3c34 */
  --gradient-shapur-hotel: linear-gradient(180deg, oklch(0.33 0.077 145) 0%, oklch(0.41 0.07 158) 26%, oklch(0.38 0.043 313) 38%, oklch(0.45 0.048 217) 58%, oklch(0.34 0.025 164) 100%);
}

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

色卡