慵懒昏沉霓光

旗舰·霓照

The Flagship under Neon Glow

色卡

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

重构渐变

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

0%583f7522%f085f132%ddb18558%97546880%774678100%744a81

为什么和谐

色相铺得再宽也可以不吵,而且不必压天花板:七条色相带盖住 98.52% 的画面、从 268° 一路走到 96°,均值明度跟着排成 0.43 / 0.42 / 0.47 / 0.53 / 0.62 / 0.79 / 0.89,除最暗两档以 0.01 互换外一格不乱,而彩度全程钉在 0.074–0.098、极差只有 0.024。〈上风蚀地·浊午〉说吵不吵由彩度天花板定,六条带铺满 97.18% 而没有一个像素越过 0.121;这里天花板 0.231 几乎是它的两倍,照样安静——因为明度替色相排好了队。

明度替色相排队

七条带按色相排开是蓝 268°(0.15%)、紫 304°(27.94%)、粉 326°(25.71%)、红 2°(37.01%)、橙 23°(5.86%)、黄 66°(1.62%)、绿 96°(0.23%),合计 98.52%;均值明度依次 0.43 / 0.42 / 0.47 / 0.53 / 0.62 / 0.79 / 0.89。彩度却是 0.079 / 0.090 / 0.098 / 0.091 / 0.074 / 0.078 / 0.078,谁也没比谁浓。于是没有任何两块颜色在同一个明度上争位置,眼睛把 188° 的跨度读成一条连续的坡,而不是七种颜色。想用大跨度色相又不想吵,别先去压彩度,给每一档色相分一个不重叠的明度档。

安静有两条路,这是第二条

〈旧日之海·潜昼〉走的是第一条:99.2% 是同一族蓝,彩度中位数 0.153、无彩 0.00%,浓是全画一起抬上去的,所以没有一块显得突出(数字引自该篇)。这幅画的无彩只有 1.47%,同样没有灰可用,但它的色相摊在 188° 上、彩度中位数只有 0.087,既不能靠同族,也不能靠低天花板。它靠的是排序。同族一起抬和异族按明度排队是两种互不替代的安静:前者要窄,后者要序——你手上的色相跨度决定该用哪一种,而不是反过来。

焦点是梯子的最后一级

招牌不是这套规矩的例外,是它的顶端。最亮的 4000 个像素,报得出的七个格子色相全落在 76°–96°、明度 0.92–0.94,最大一格 2,155 个、重心 (0.48, 0.29),那是招牌的灯管,而全图明度中位数是 0.48;那一格的彩度只有 0.065,反倒低于全图中位数 0.087。最艳的一撮不在灯管上:最艳的 4000 个里 3,604 个落在 300°–360°、L 0.74 与 0.77、彩度 0.192 与 0.186,那是招牌打在横梁和墙面上的晕,和整间屋子同族。一盏灯于是分两笔账被认出来——晕负责「这屋子是这个颜色」,芯负责「光在这里」;底子已经浓到没有彩度可加时,芯只能用明度付账。

带走这组颜色

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

/* 旗舰·霓照 · The Flagship under Neon Glow — Teyvat Palette */
:root {
  --beam-violet: oklch(0.42 0.09 304); /* 梁柱紫 #583f75 */
  --porch-pink: oklch(0.47 0.098 326); /* 门廊粉 #774678 */
  --wall-vermilion: oklch(0.53 0.091 2); /* 砖墙朱 #975468 */
  --lit-corner: oklch(0.62 0.074 23); /* 近灯橙 #af7471 */
  --tube-amber: oklch(0.79 0.078 66); /* 灯管黄 #ddb185 */
  --sign-halo: oklch(0.77 0.186 327); /* 招牌晕 #f085f1 */
  --door-blue: oklch(0.43 0.079 268); /* 门扇蓝 #3d4e7b */
  --gradient-the-flagship: linear-gradient(180deg, oklch(0.42 0.09 304) 0%, oklch(0.77 0.186 327) 22%, oklch(0.79 0.078 66) 32%, oklch(0.53 0.091 2) 58%, oklch(0.47 0.098 326) 80%, oklch(0.48 0.098 318) 100%);
}

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

色卡