
Grand Bazaar, Lamps in the Shade
点击色块复制 HEX;悬停查看 OKLCH 值。
从场景蒸馏出的渐变,按停靠点从左到右展开;成品角度 180°(hero 与导出使用),画廊卡片统一以 135° 斜向展示。
一盏灯能不能被看见,取决于它照到的那块面还剩几笔账可改:大巴扎的石板路没有固有色——两处没被灯照到的路面,3,311 和 5,871 个像素,彩度都是 0.015,最大值只有 0.021 和 0.023,连一个越过无彩线 0.025 的像素都没有;而灯柱脚下那块地彩度涨到 0.038、色相从 193° 甩到 92°,明度只从 0.38 走到 0.40。〈舒茨铁铺·炉光〉的地是日光的青,差额只能记在色相上;〈衡准大厅·焰照〉的地本来就是火的暖,只能记在彩度上;这里的地什么都不是,于是两笔一起记。把一条路铺成无彩的,不是为了低调,是为了让每一盏灯都有两条通道可花——而明度那一条,三张画都没有动。
CSS 变量、Tailwind v4 主题或 SVG,一键复制到你的项目。
/* 大巴扎·灯荫 · Grand Bazaar, Lamps in the Shade — Teyvat Palette */
:root {
--canopy-ink: oklch(0.21 0.024 170); /* 冠盖墨 #0c1c17 */
--leaf-wall: oklch(0.25 0.04 161); /* 林壁青 #0e281b */
--awning-red: oklch(0.31 0.026 49); /* 篷影红 #3b2d25 */
--unlit-paving: oklch(0.39 0.015 178); /* 无灯石 #3d4845 */
--lamplit-paving: oklch(0.4 0.038 92); /* 灯下石 #4f4730 */
--stall-glow: oklch(0.46 0.053 86); /* 摊前黄 #655635 */
--gradient-grand-bazaar: linear-gradient(180deg, oklch(0.21 0.024 170) 0%, oklch(0.25 0.04 161) 18%, oklch(0.39 0.015 178) 48%, oklch(0.31 0.026 49) 66%, oklch(0.4 0.038 92) 84%, oklch(0.46 0.053 86) 100%);
}1080×1350 的 PNG,原图、色卡与色值都在里面——存下来直接发。