枫丹昼爽朗洁净秩序

枫丹廷·朗照

Court of Fontaine in Open Daylight

色卡

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

重构渐变

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

0%66b4fe22%bceafa55%4c96cd80%467190100%5798a5

为什么和谐

「白」是一个比值,不是一个颜色:右侧那座临水石堡的墙面,一万个像素里只有 3 个是无彩的,其余全落在 241°——和它脚下 243° 的深海同一个色相,只是彩度砍到六成(0.069 对 0.111)。想在满屏彩色里造一块白,别把它调成中性,让它继承邻居的色相,再把彩度减半。

一万像素的墙,3 个是白的

取右侧那座临水石堡的墙面,约一万像素:均值 L 0.53、彩度 0.069、色相 241°,其中彩度低于 0.025 的只有 3 个。城里另取五处墙面——中央高塔、弧形扶壁、左侧圆台的挡墙——全部落在 L 0.52–0.62、彩度 0.067–0.082、色相 234–244° 这一小格里,没有一面是灰的。全图的无彩像素只有 4.26%,而最亮的 4000 个像素挤在 L 0.98、彩度 0.024,是天上的云,不是城。这座城读作白石,读的从来不是它的绝对色值。

白比周围暗 0.19

石面 L 0.53,紧挨着它的那片深水 L 0.65,全图明度中位数 0.72——这座「白」城比中位数低了 0.19。〈琼玑野·晴午〉里那面读作「黑」的崖壁,低于该图中位数 0.20。几乎相同的明度落差,一边读成黑,一边读成白:所以明度落差只够说明「这是一块独立的面」,说不了这块面是黑是白。那一篇用明度立论,这一篇必须换一根轴。

减半彩度还不够,色相也得让

城脚下那片浅水台地彩度同样是 0.069,和石面分毫不差,却读作碧色而不是白——它落在 212°,离深水的 243° 有 31°;石面落在 241°,只差 2°。彩度减半让它退出竞争,色相贴住邻居让它放弃身份,两件事一起做完才叫白。做界面同理:深蓝底上那张「白卡片」别用纯中性,取底色的色相、把彩度砍到六成,它才像是长在这张画里,而不是贴上去的。

带走这组颜色

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

/* 枫丹廷·朗照 · Court of Fontaine in Open Daylight — Teyvat Palette */
:root {
  --masonry-white: oklch(0.53 0.069 241); /* 石白 #467190 */
  --deep-bay: oklch(0.65 0.111 243); /* 深湾蓝 #4c96cd */
  --clear-sky: oklch(0.75 0.132 249); /* 晴空蓝 #66b4fe */
  --cloud-drift: oklch(0.91 0.052 221); /* 云絮白 #bceafa */
  --shoal-shelf: oklch(0.64 0.069 212); /* 浅台碧 #5798a5 */
  --garden-green: oklch(0.77 0.096 141); /* 庭园绿 #92c48a */
  --gradient-court-of-fontaine: linear-gradient(180deg, oklch(0.75 0.132 249) 0%, oklch(0.91 0.052 221) 22%, oklch(0.65 0.111 243) 55%, oklch(0.53 0.069 241) 80%, oklch(0.64 0.069 212) 100%);
}

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

色卡