须弥昼敞亮喧腾轻快

兰巴德酒馆·敞晴

Lambad's Tavern under Open Sky

色卡

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

重构渐变

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

0%98556112%45426826%5d9ac238%e66b4a52%39807176%78676a100%b2af97

为什么和谐

头顶最响的那块颜色,可能一个像素都不下来:画面上三分之一横着一整幅红布幡,330°–40° 那扇窗口在那里有 53,418 个像素、彩度 0.090、色相 9°,全图彩度天花板 0.190 也在那一带;而它正下方那片石阶铺地,138,240 个像素里只有 204 个落进同一扇窗(0.15%),色相从 y 0.70 到 0.94 一路是 108°/102°/95°/101°/100°/100°/103°,和被太阳直射的 100° 分不开。同一批的〈健康之家·篷荫〉里,一块 54,237 像素的绿布篷把篷下的地拨到 159°、离布本身只差 3°。两块布面积几乎相等,一块把色相交了出去,一块一分没交——差的是它挂多高、以及天有没有被封住。遮蔽物要当补光源,得占住被照面头顶的那片天,不是够响就行。

53,418 对 204

上三分之一 330°–40° 的红幡与遮阳布共 53,418 个像素,彩度 0.090、色相 9°;正下方那块铺地共 138,240 个像素,同一扇窗口里只有 204 个,占 0.15%。整片地是 L 0.72 / 彩度 0.036 / 104°,一个红像素都没被染上。上缘唯一进得了光的账的是门楣那块招牌:最艳的 3% 是 L 0.67 / 彩度 0.161 / 36°,峰值 0.190 就是全图天花板——它靠的不是补光,是它自己被太阳直射。布挡光,不给光,除非它遮掉的正是那面地本来看得见的天。

一道彩度 0.023 的影子

石阶正中那道投影 4,544 个像素,L 0.53 / 彩度 0.023——踩在无彩线 0.025 的下面,连一个色相都报不出来;受光的石阶是 L 0.75 / 彩度 0.033 / 100°。这张画的天是敞的(上四分之一 210°–270° 有 46,716 个像素、均值 239°),四面又都是被晒亮的浅石头,补光来自整个半球而不是某一件东西,所以影子只剩少了多少光,没有少的是谁的光。要让影子有颜色,先给它一个够近够大的邻居;办不到就别硬调,一道彻底无彩的影子比一道假蓝的影子诚实。

天也没有把地面染蓝

这张画 14.18% 是天,左缘那块量到 253°,按理说敞天该把每一块背光面染成天的色相——同一批的〈普斯帕咖啡馆·曝白〉正是这样,它那片铺地跌进深影的一角是 235°,离天顶的 237° 只差 2°。这里没有:除了那道彩度 0.023、报不出色相的投影,地面 x 0.30 到 0.60 一路 94°–108°、明度 0.69–0.80,几乎不存在背光面。天光那一笔要收得到,前提是有东西挡住太阳;全是直射的地方,天等于没有颜色。想让一片天参与配色,先在地上放一个投影。

带走这组颜色

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

/* 兰巴德酒馆·敞晴 · Lambad's Tavern under Open Sky — Teyvat Palette */
:root {
  --bunting-crimson: oklch(0.53 0.09 9); /* 幡红 #985561 */
  --bunting-indigo: oklch(0.4 0.064 287); /* 幡靛 #454268 */
  --open-sky-blue: oklch(0.66 0.087 239); /* 敞天蓝 #5d9ac2 */
  --signboard-amber: oklch(0.67 0.161 36); /* 招牌琥珀 #e66b4a */
  --leaf-eave-teal: oklch(0.55 0.076 177); /* 叶檐青 #398071 */
  --hueless-shadow: oklch(0.53 0.023 3); /* 无色投影 #78676a */
  --sunlit-steps: oklch(0.75 0.033 100); /* 晒石阶 #b2af97 */
  --gradient-lambads-tavern-exterior: linear-gradient(180deg, oklch(0.53 0.09 9) 0%, oklch(0.4 0.064 287) 12%, oklch(0.66 0.087 239) 26%, oklch(0.67 0.161 36) 38%, oklch(0.55 0.076 177) 52%, oklch(0.53 0.023 3) 76%, oklch(0.75 0.033 100) 100%);
}

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

色卡