璃月昼明朗轩敞喜气

北国银行·艳阳

Northland Bank in Full Sun

色卡

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

重构渐变

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

0%398ccc22%b7d1cb44%68a86458%8db88a74%e1994c100%f25d50

为什么和谐

人造物的颜色分两半:抄来的和自带的。这座门楼的琉璃瓦和岩上的树冠是同一个色相 143°,瓦还比叶子淡了三成(彩度 0.081 对 0.117);唯一自带的是朱红——左上那片天与云的 8.3 万像素里只有 3 个落进暖色窗口,门楼背后的岩山一个都没有。抄来的色相负责归属,自带的那一个负责身份。

瓦是照着树烧的

右下那片大屋顶的琉璃瓦实测 L 0.74、彩度 0.081、色相 143°;门楼左侧岩上那株树 L 0.67、彩度 0.117、色相 143°——同一个色相到度,而人造的那一份彩度还低了三成。绿瓦因此不读作「一块绿」,读作山的延长:屋面越铺越多,建筑越像从坡上长出来的。想让新造的东西不显得突兀,把它的色相抄自现场,再把彩度往下让一档。

红是这片风景长不出来的

左上那块天与云共 8.3 万像素,落在 330–45° 暖色窗口内的只有 3 个,彩度 0.028;门楼背后那片岩山 2.0 万像素,一个都没有。而全图彩度最高的 4000 个像素全部是 28°、彩度 0.186,落在 (0.63, 0.69) 的柱身与阶前。蓝带占了 24.3% 的面积、那块天彩度 0.125,论面积论彩度都不输给红——但只有红是这片风景里长不出来的颜色,眼睛于是先去门楼。要立身份别比谁更艳,去找环境空着的那个色相。

红只刷在立起来的东西上

朱红严格配给竖直构件:两根柱(向光面 L 0.73、彩度 0.147,背光面 L 0.55、彩度 0.131)、两侧栏杆、正中那道台阶(L 0.64、彩度 0.112、色相 39°)。屋面、墙体、梁枋一寸红都没有——门楣那一带最艳的 3% 是 32°、彩度 0.173,来自柱头包边与匾框,不是瓦。于是红勾出的正好是「门」的骨架,而绿瓦继续和山坡合流。同一个强调色只发给一类构件,层级不用画分隔线也出来了。

带走这组颜色

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

/* 北国银行·艳阳 · Northland Bank in Full Sun — Teyvat Palette */
:root {
  --cerulean-sky: oklch(0.62 0.125 245); /* 碧空蓝 #398ccc */
  --cliff-stone: oklch(0.84 0.03 179); /* 崖石白 #b7d1cb */
  --canopy-green: oklch(0.67 0.117 143); /* 树冠绿 #68a864 */
  --glaze-green: oklch(0.74 0.081 143); /* 瓦绿 #8db88a */
  --plaque-gold: oklch(0.74 0.127 65); /* 匾金 #e1994c */
  --vermilion-post: oklch(0.67 0.186 28); /* 朱柱红 #f25d50 */
  --gradient-northland-bank: linear-gradient(180deg, oklch(0.62 0.125 245) 0%, oklch(0.84 0.03 179) 22%, oklch(0.67 0.117 143) 44%, oklch(0.74 0.081 143) 58%, oklch(0.74 0.127 65) 74%, oklch(0.67 0.186 28) 100%);
}

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

色卡