
Puspa Café in Bleached Noon
点击色块复制 HEX;悬停查看 OKLCH 值。
从场景蒸馏出的渐变,按停靠点从左到右展开;成品角度 180°(hero 与导出使用),画廊卡片统一以 135° 斜向展示。
头顶只有敞开的天时,同一块地的受光处和背光处分居色轮两边:那片被晒白的广场 40,608 个像素 L 0.88 / 彩度 0.029 / 色相 115°,同一片石地跌进下缘那角深影的 4,608 个像素是 L 0.50 / 彩度 0.054 / 235°——色相差 120°,而彩度反过来涨了 1.9 倍。235° 不是随便一个蓝:画面上四分之一里落在 210°–270° 的 99,874 个天空像素均值 237°,只差 2°。这是同一批四张须弥城店面里落差最大的一张,也是最灰的一张(无彩 32.49%),两件事是同一件——受光面把彩度交了出去,阴影替它拿回来,而拿回来的是头顶那片天的色相。想同时要明亮和有颜色,别在同一块面上要。
CSS 变量、Tailwind v4 主题或 SVG,一键复制到你的项目。
/* 普斯帕咖啡馆·曝白 · Puspa Café in Bleached Noon — Teyvat Palette */
:root {
--clear-sky-blue: oklch(0.69 0.089 237); /* 晴天蓝 #63a4cc */
--cloud-white: oklch(0.97 0.02 203); /* 云白 #e6f9fb */
--trunk-deep-green: oklch(0.32 0.061 154); /* 树干深绿 #153c24 */
--glazed-roof-green: oklch(0.47 0.059 189); /* 釉瓦绿 #2e6661 */
--coral-parasol: oklch(0.6 0.07 42); /* 珊瑚伞 #a4725f */
--bleached-plaza: oklch(0.88 0.029 115); /* 曝白石场 #d6dac5 */
--shadowed-stone: oklch(0.5 0.054 235); /* 影中石 #44687e */
--gradient-puspa-caf: linear-gradient(180deg, oklch(0.69 0.089 237) 0%, oklch(0.97 0.02 203) 10%, oklch(0.32 0.061 154) 24%, oklch(0.47 0.059 189) 40%, oklch(0.6 0.07 42) 56%, oklch(0.88 0.029 115) 84%, oklch(0.5 0.054 235) 100%);
}1080×1350 的 PNG,原图、色卡与色值都在里面——存下来直接发。