Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
Sword and Strongbox Secure Transport Agency·晒白
璃月昼敞白日烈肃整

Sword and Strongbox Secure Transport Agency·晒白

Sword and Strongbox Secure Transport Agency, Sun-Bleached

色卡

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

重构渐变

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

0%c1c7b914%f9856c28%8bbe4248%96493a72%607b74100%68828f

为什么和谐

「在不在阳光下」可以完全不记在明度上:同一堵墙,受光的一段实测 L 0.62 / 彩度 0.014 / 130°,背光的一段 L 0.59 / 0.036 / 231°——明度只差 0.03,彩度差 2.6 倍,色相隔了 101°。这幅画 62.42% 的无彩全是被太阳照着的面:白光把它照到的东西洗成灰,阴影才是这里唯一发颜色的光源。想让一大片浅色材质有层次又不脏,别用明暗画阴影,用「受光洗白、背光染蓝」,明度留给构图。

01

最亮的面一点颜色都没有

广场正中受光的那片铺地,17,630 个像素实测 L 0.82 / 彩度 0.020 / 125°,峰值也只有 0.030;门楼左侧被晒到的那段白墙 L 0.62 / 彩度 0.014,是全图彩度最低的一块面;右下那面瓦顶更彻底,L 0.57 / 彩度 0.003。最亮的 4000 个像素散在六七个格子里,彩度全部落在 0.015 到 0.024 之间。这张画 62.42% 的无彩不是「调出来的灰」,是太阳把石头照白之后剩下的东西。

02

有颜色的全在阴影里

全图 210°–270° 共 209,221 个像素(22.7%),均值 L 0.48 / 彩度 0.037 / 233°:左侧那整面背光的高墙 (0.03, 0.30) L 0.59 / 0.036 / 231°,被投影罩住的铺地 (0.28, 0.74) L 0.56 / 0.033 / 177° 和 (0.62, 0.30) L 0.53 / 0.030 / 185°。同一种石头,受光 0.020,背光 0.030 到 0.037。〈舒茨铁铺·炉光〉量过这件事的反面:那片铺地日照处 194°、棚下背光处 190°,Δh 只有 4°、ΔC 不到 0.005——那幅画有一炉火替它说「这里不一样」,这幅没有,于是「背光」只能自己找一条通道,而它找的是彩度和色相,不是明度。

03

四处朱红,晒到的那一处艳一倍

这幅画的暖色一共 14,179 个像素(1.54%),分在四处:门楼前立着的两幅朱幡、右侧檐下垂着的小三角旗,还有左上角屋墙上那一片朱红的泼溅。四处色相几乎完全一样(33° / 33° / 30° / 33°),彩度却按晒没晒到分成两档——三处在背光里,最艳的 3% 是 0.107 / 0.101 / 0.088;泼溅在全日照下,同样量法 L 0.74 / 彩度 0.147,峰值 0.175。全图的天花板 0.184 是同一个道理,它既不归朱红也不归石头,归右上角那棵越过屋脊的树:最艳的 3% L 0.74 / 彩度 0.162 / 129°——8.07% 的绿顶起了一张 62.42% 是灰的画。

带走这组颜色

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

/* Sword and Strongbox Secure Transport Agency·晒白 · Sword and Strongbox Secure Transport Agency, Sun-Bleached — Teyvat Palette */
:root {
  --sunbleached-flagstone: oklch(0.82 0.02 125); /* 曝白石 #c1c7b9 */
  --shadowed-flagstone: oklch(0.56 0.033 177); /* 影里石 #607b74 */
  --shaded-wall: oklch(0.59 0.036 231); /* 背光墙 #68828f */
  --banner-vermilion: oklch(0.5 0.107 33); /* 幡朱 #96493a */
  --sunlit-splash: oklch(0.74 0.147 33); /* 泼溅红 #f9856c */
  --rooftop-tree: oklch(0.74 0.162 129); /* 檐树绿 #8bbe42 */
  --gradient-sword-and-strongbox-secure-transport-agency-point-of-interest: linear-gradient(200deg, oklch(0.82 0.02 125) 0%, oklch(0.74 0.147 33) 14%, oklch(0.74 0.162 129) 28%, oklch(0.5 0.107 33) 48%, oklch(0.56 0.033 177) 72%, oklch(0.59 0.036 231) 100%);
}

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