Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
普斯帕咖啡馆·曝白
须弥昼曝晒清爽疏朗

普斯帕咖啡馆·曝白

Puspa Café in Bleached Noon

色卡

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

重构渐变

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

0%63a4cc10%e6f9fb24%153c2440%2e666156%a4725f84%d6dac5100%44687e

为什么和谐

头顶只有敞开的天时,同一块地的受光处和背光处分居色轮两边:那片被晒白的广场 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%),两件事是同一件——受光面把彩度交了出去,阴影替它拿回来,而拿回来的是头顶那片天的色相。想同时要明亮和有颜色,别在同一块面上要。

01

晒白不是调黄,是交彩度

广场那 40,608 个像素彩度 0.029,只比无彩线 0.025 高 0.004,而全图彩度中位数是 0.037——画面最大的一块面比中位数还淡,色相 115° 却一步没动。〈枫丹廷·朗照〉说白是同色相下的半彩度;这里砍得更狠,砍到贴着无彩线,靠的是明度顶到 0.88(全图 p99 才 0.95)。这张 32.49% 的无彩几乎全由这一片地贡献,而它并没有换成灰色颜料。要画晒,别往黄里调:把那块面的彩度压到无彩线上,明度推到接近全图上限。

02

影子里那 2°

下缘那角深影 4,608 个像素 L 0.50 / 彩度 0.054 / 235°,和上四分之一那片天的 237° 只差 2°;远处那条背街的阴影是 226°,也在同一族。〈万端珊瑚侦探社·荫昼〉量过这件事的另一半:天光转手一次,彩度掉到不足一半而色相一度不动。这里的符号是反的——受光 0.029、背光 0.054,彩度是涨的,因为受光那一侧先被晒空了。所以判断一片蓝是天还是影,量彩度仍然对,但要先看清哪一侧才是被漂过的那一侧。

03

伞晒不到,就艳不起来

两把珊瑚色遮阳伞是这张画唯一成片的暖色:15°–60° 窗口 12,472 个像素,L 0.60 / 彩度 0.070,峰值只有 0.103;全图 330°–60° 共 17,542 个像素,峰值 0.106,不到天花板 0.177 的六成。它们站在自己撑出来的阴影里,拿到的补光是 237° 的天,给不了 42° 一点力气。同一批的〈健康之家·篷荫〉那顶红帐被太阳直射,同样是布,峰值 0.149。同一座城、同一种材料,一块布能有多浓,先看它晒不晒得到。

带走这组颜色

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,原图、色卡与色值都在里面——存下来直接发。