须弥肃穆空阔静候

君王之殿·双照

Bayt Al-Muazzam under Two Lights

色卡

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

重构渐变

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

0%171c2d38%27416263%fbd77878%637578100%997d64

为什么和谐

同一间厅里两束色温相反的光不是在竞争,是在分工,而分工按面积和明度分开记账:冷的蓝光占 53.00% 的画面、均值明度 0.35,负责把这个洞撑成一间厅;暖的金光只占 3.72%、均值明度 0.58,负责指出该看哪。两族隔着 168°,谁也没抢谁——这张的彩度额度(p99 0.081 减中位数 0.035)只有 0.046,和同批彩度归零的生命之殿 0.038 几乎一样,焦点却硬得多。焦点的硬度是色相距离买的,不是彩度额度买的。

冷光按面积收费,暖光按明度收费

蓝带(210°–270°)占 53.00%,均值 L 0.35 / 彩度 0.049 / 色相 258°;金带(45°–90°)占 3.72%,均值 L 0.58 / 彩度 0.051 / 色相 66°。面积差 14 倍,明度差 0.23,而彩度几乎相同——两束光谁也没在对方的账上花钱。金要的是亮:那盏灯的芯实测 L 0.89 / 彩度 0.121,绕过右侧的光带 L 0.61 / 色相 64°,左边小香炉上的火 L 0.77 / 色相 53°,一处也没有铺开过 4%;蓝要的是面积:它从头顶那块岩(L 0.23)一路铺到中景的雾(L 0.37),一处也没有亮起来。光在一幅画里有两种活——撑体积和指焦点——它们要的资源正好互补。同一个界面里放两个色温时先分工:大面积的那束不许亮,亮的那束不许大;两束都想要,就会互相注销。

3.72% 的金,和 2.81% 的花一样确定

同批的酣乐之殿把焦点交给两朵自己发光的花:2.81% 的面积、矩形彩度 0.144,把全图彩度额度顶到 0.173。这里的金只有 3.72% 的面积、均值彩度 0.051,彩度额度 0.046,不到那边的三成——两张的焦点却一样一眼可辨。差别在色相账上:那边的花 322° 离雾的 275° 只有 47°,是同一条带的末端;这里的金 66° 离蓝雾的 258° 有 168°,几乎正对。而付得起色相距离是有前提的:这张的蓝加紫合计 71.46%,大面积已经收进一条窄带,金才有「对面」可站。想省彩度就去买色相距离——先把最大的那几块面压进一条窄带,再把焦点放到那条带的正对面。

同一块 0.022 的灰,一处是抵消出来的,一处是让出来的

中央那块铺着星形图案的石地实测 L 0.55 / 彩度 0.022 / 色相 207°,低于 0.025 的无彩阈值,是全图 23.22% 无彩面的主体。〈冒险家协会(蒙德)·暮灯〉的地面读数是彩度 0.022 / 201°——隔着两个国家,两块地板到小数点后三位都一样。但来路正相反:蒙德那块灰是暖灯和冷暮在同一块地板上互相抵消出来的;这里的石地是人铺的,它本来就没有色相,两束光在它上面各写各的——金色光带压到下缘那一段仍是 L 0.55 / 彩度 0.036 / 色相 65°,蓝雾压在它上面仍是 255°,谁也没被对方吃掉。要让两个色温在同一块面上还认得出各自的身份,就别让它们在那块面上相遇:给那块面一个本来就没有色相的材质,让它当画布,不要当调色盘。

带走这组颜色

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

/* 君王之殿·双照 · Bayt Al-Muazzam under Two Lights — Teyvat Palette */
:root {
  --lampcore-gold: oklch(0.89 0.121 89); /* 灯芯金 #fbd778 */
  --ribbon-gold: oklch(0.61 0.05 64); /* 流光金 #997d64 */
  --vault-blue: oklch(0.37 0.066 255); /* 窖雾蓝 #274162 */
  --star-pavement: oklch(0.55 0.022 207); /* 星纹石 #637578 */
  --dome-slate: oklch(0.23 0.034 272); /* 穹顶黛 #171c2d */
  --gradient-bayt-al-muazzam: linear-gradient(180deg, oklch(0.23 0.034 272) 0%, oklch(0.37 0.066 255) 38%, oklch(0.89 0.121 89) 63%, oklch(0.55 0.022 207) 78%, oklch(0.61 0.05 64) 100%);
}

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

色卡