昼苔石荫凉静守

宗室密藏之地·石荫

Noblesse Secret Treasury, Stone in Shade

色卡

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

重构渐变

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

0%bbbe9615%3e864f34%40664060%25506280%3f3342100%1c3c4c

为什么和谐

点缀色买的不是彩度的名次,是色轮上的空位:垂在拱门里那面绛旗实测彩度 0.032,比这幅画自己的彩度中位数 0.056 还低,离 0.025 的无彩线只有 0.007;可 345°–15° 全图一个像素都没有,15°–45° 只有 0.02%,315°–345° 只有 0.41%——整个暖半边加起来 0.43%,它是那里唯一的住户。想让一小块面说话,先看色轮上哪一段空着,再决定要不要给它加彩度。

两个极值都在墙外边

全图最亮的 4000 个像素全部落在左下那片浅色岩上,重心从 (0.08, 0.51) 排到 (0.18, 0.87),均值 L 0.78 到 0.79;最艳的 4000 个也全在左边,2235 个落在 150°–180°(均值 154°,L 0.66 / 彩度 0.154),1765 个落在 120°–150°(138°,L 0.68 / 0.147),重心 (0.26, 0.56) 与 (0.29, 0.72),那是墙根那丛受光的灌木和它旁边的草,峰值 0.196。而所有人先看的那道拱门在画面正中,实测 L 0.34 / 彩度 0.047 / 232°,两榜都不占。它甚至算不上一个洞:砌石墙面 L 0.41 / 0.056 / 227°,拱门只比它暗 0.07,彩度还低 0.009,色相差 5°。这面墙上把入口标出来的不是那个洞。

那面旗比这幅画的平均还淡

绛旗实测 L 0.34 / 彩度 0.032 / 色相 320°,而全图彩度中位数 0.056、p99 0.127、峰值 0.196——它连中位数都够不着。它读得出来的原因全长在别处:蓝 56.55%(232°)、绿 20.75%(144°)、青 12.34%(184°),89.64% 的画面挤在色轮的同一半里,而 315°–45° 这 90° 一共 0.43%,红带 345°–15° 是空的。〈王山厅・正堂·薄青〉讲过主色的门槛——彩度中位数 0.026 贴着无彩阈值也读得出青,因为没有第二个色相出来反驳它。点缀色比主色还省:它连自己这幅画的中位数都不必够到,只要它站的那一段没有别人。

先找空位,再决定加不加彩度

同一幅画里,墙根那丛灌木彩度 0.112,是旗子 0.032 的三倍半,面积也大得多,却没有一个人把它当主角——它的 149° 就落在绿带 20.75% 的正中间,是那半个色轮上的第无数个居民;旗子的 320° 是第一个。做界面同理:强调色不是把品牌色再往艳调一档,是先把大面积的底色收进色轮的一半,再把强调色放到空着的那一半。色轮上的名次比彩度上的名次便宜,也稳——底色一变浓,靠彩度拉开的强调色就得跟着追,靠空位占住的那个一分都不用动。

带走这组颜色

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

/* 宗室密藏之地·石荫 · Noblesse Secret Treasury, Stone in Shade — Teyvat Palette */
:root {
  --wall-slate: oklch(0.41 0.056 227); /* 墙石蓝 #255062 */
  --vine-green: oklch(0.47 0.074 144); /* 藤蔓绿 #406640 */
  --lit-shrub: oklch(0.56 0.112 149); /* 亮丛翠 #3e864f */
  --pale-rock: oklch(0.79 0.055 111); /* 白岩 #bbbe96 */
  --arch-dark: oklch(0.34 0.047 232); /* 拱内暗 #1c3c4c */
  --noblesse-crimson: oklch(0.34 0.032 320); /* 宗室绛 #3f3342 */
  --gradient-noblesse-secret-treasury-location-context: linear-gradient(135deg, oklch(0.79 0.055 111) 0%, oklch(0.56 0.112 149) 15%, oklch(0.47 0.074 144) 34%, oklch(0.41 0.056 227) 60%, oklch(0.34 0.032 320) 80%, oklch(0.34 0.047 232) 100%);
}

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

色卡