Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
颠倒古城·微光
璃月夜幽闭沉寂倒悬

颠倒古城·微光

Inverted City in Faint Light

色卡

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

重构渐变

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

0%22253842%1d1d3078%16152a100%161327

为什么和谐

明度用尽时,彩度接管:全图挤在 12 个百分点的明度带里(L 0.18→0.30),88% 的像素是同一片紫、彩度中位数只有 0.038——于是右崖那点炭火用 0.183 的峰值彩度,买到了明度买不起的注意力。

01

十二个百分点里的一整座城

明度从 p01 的 0.18 到 p99 的 0.30,画面的信息塞在 12 个百分点里;彩度中位数 0.038,几乎无彩。这不是欠曝,是把两个维度同时关掉之后还要构图。渊下宫是它的反面:那边彩度封顶 0.081,明度却拉开 0.58 的阶梯。两篇合起来是同一条规则的两端——总得留一个维度可用,留哪个由场景定。

02

雾比物体亮,轮廓是「减」出来的

倒悬的塔身实测 L 0.21,塔右侧最亮的那片雾 L 0.27——雾更亮。所以塔不是被照亮才被看见,是从更亮的雾里被减掉。极暗场景想要形状,别急着加光源:把背景的雾提亮六个点,前面的东西自己就成了剪影。

03

0.183 的炭火,是中位数的 4.8 倍

右崖上几点炭火实测 L 0.54、彩度 0.114、色相 56°,峰值到 0.183,而全图彩度中位数 0.038——它靠近五倍的饱和差站出来,而落在暖色带的像素总共不到全图的 0.02%。明度不够用时,彩度是唯一还能喊话的维度;反过来说,一个几乎无彩的画面里,任何一小块饱和色都会成为不可忽视的主角,所以它落在哪里必须是个决定。

带走这组颜色

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

/* 颠倒古城·微光 · Inverted City in Faint Light — Teyvat Palette */
:root {
  --abyss-violet: oklch(0.21 0.04 285); /* 渊紫 #16152a */
  --settled-haze: oklch(0.241 0.035 282.6); /* 沉雾 #1d1d30 */
  --haze-ridge: oklch(0.27 0.037 277); /* 雾脊 #222538 */
  --ember: oklch(0.54 0.114 56); /* 残炭 #a05b22 */
  --gradient-inverted-city: linear-gradient(200deg, oklch(0.27 0.037 277) 0%, oklch(0.241 0.035 282.6) 42%, oklch(0.21 0.04 285) 78%, oklch(0.201 0.039 289.4) 100%);
}

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