紫穹低曦清寂

诸界秘展之厅·星霞

Secret Hall of the Realms, Stars and Afterglow

色卡

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

重构渐变

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

0%4e6cb124%fafdf540%9e6d5756%5b569b70%5f73ca84%5c5576100%8a7d98

为什么和谐

让位靠淡,不靠暗:右侧那根巨柱 87420 个像素、L 0.47 / 彩度 0.052 / 293°,中央那座彩窗亭 L 0.49 / 0.109 / 285°——明度只差 0.02、色相同族只差 8°,分出主从的只有彩度那 2.1 倍;前景的广场铺地甚至比主体亮 0.12(L 0.61),彩度只有它的四成(0.044)。想让一块面退进背景,别急着把它压暗——暗会在画面上多挖一个洞,淡不会。

陪衬比主体大一倍,还是陪衬

右侧那根石柱在取样里占 87420 个像素,中央亭子那片彩窗占 45562 个:陪衬的面积是主体的近两倍,还压在更靠前的位置。可它实测 L 0.47 / 彩度 0.052 / 色相 293°,主体 L 0.49 / 0.109 / 285°——明度差 0.02,肉眼分不出;色相差 8°,同一族;只有彩度差了 2.1 倍。全图最艳的 4000 个像素里,2519 个是 274°、1481 个是 268°,重心 (0.47, 0.60) 与 (0.49, 0.63),全在那座亭子和它脚下那道门光上(门光实测 L 0.58 / 彩度 0.135 / 272°,峰值 0.203)。一块大面积要退场,最省的一笔是抽掉它的彩度。

铺地比主体还亮 0.12

前景那片广场铺地实测 L 0.61 / 彩度 0.044 / 307°,右侧那面白崖 L 0.57 / 0.056 / 287°——两块都比彩窗亭的 L 0.49 亮,彩度却只有它 0.109 的四成上下。〈明星斋·正午〉登记的条件是「同明度可以靠彩度分开」;这幅画把明度反着排了 0.12,分离一点没松。所以那条规则里「同明度」不是必要条件,只是最省事的一种排法:主从是彩度分的,明度那根轴可以拿去画别的东西——这里画的是从天到地的空气。

最彻底的让位是那团光自己

左侧地平线上那团光是全图最亮的东西:最亮的 4000 个像素有 3872 个落在 (0.16, 0.50),实测 L 0.99 / 彩度 0.011——不到这幅画彩度中位数 0.061 的五分之一,踩在 0.025 的无彩线下面。它把明度那条通道占满,同时把色相整个交了出去,于是彩度天花板 0.203 一分不少地归了亭子的彩窗。做界面同理:想让主体独占彩度,先把画面里最亮的那块面清空——清空不是把它压暗(压暗它就不再是光了),是把它抽淡到无彩线以下。

带走这组颜色

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

/* 诸界秘展之厅·星霞 · Secret Hall of the Realms, Stars and Afterglow — Teyvat Palette */
:root {
  --zenith-violet: oklch(0.54 0.114 265); /* 穹顶紫 #4e6cb1 */
  --horizon-white: oklch(0.99 0.011 121); /* 曦白 #fafdf5 */
  --willow-gold: oklch(0.58 0.07 45); /* 柳金 #9e6d57 */
  --stained-blue: oklch(0.49 0.109 285); /* 琉璃蓝 #5b569b */
  --portal-core: oklch(0.58 0.135 272); /* 门心蓝 #5f73ca */
  --pillar-stone: oklch(0.47 0.052 293); /* 柱石灰 #5c5576 */
  --plaza-rose: oklch(0.61 0.044 307); /* 铺地霞 #8a7d98 */
  --gradient-secret-hall-of-the-realms-location-context: linear-gradient(180deg, oklch(0.54 0.114 265) 0%, oklch(0.99 0.011 121) 24%, oklch(0.58 0.07 45) 40%, oklch(0.49 0.109 285) 56%, oklch(0.58 0.135 272) 70%, oklch(0.47 0.052 293) 84%, oklch(0.61 0.044 307) 100%);
}

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

色卡