Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
花羽会秘藏之所·晴午
纳塔昼敞亮喧腾草香

花羽会秘藏之所·晴午

Flower-Feather Clan Secret Space, Clear Noon

色卡

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

重构渐变

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

0%5a85a814%62253944%69382c64%6b6a91100%8ca851

为什么和谐

一个要放进很多场景的元素,不能把对比度写死在自己身上:花羽会这张是这一组里最亮最艳的一张——明度中位数 0.43、彩度中位数 0.078、无彩只剩 6.33%,八个色相带全部有量——而那扇门的彩度 0.060 已经低于画面中位数,倍率 0.77,是同一扇门在五张里唯一一次跌破 1。它在悬木人那张夜景里是 2.3 倍。同一块颜色,五个环境,一路从主角退到布景。给复用的元素定常数,要按最亮的那个场景定「还找得到」,不能按最暗的那个场景定「最显眼」。

01

正午把三条通道全占满了

前景那片被正午照透的草实测 L 0.69 / 彩度 0.118 / 色相 124°,草里那丛白花 L 0.70 / 0.111;红砂岩崖面 L 0.40 / 0.073 / 35°;建筑缝隙里露出来的天 L 0.60 / 0.072 / 244°;崖上矮树 L 0.38 / 0.076 / 84°;部落垂下来的长旗,取画面上部 20% 宽、15% 高里落在 340°–30° 的 5542 个像素,L 0.36 / 0.090 / 2°。明度从 0.36 排到 0.70、彩度从 0.072 排到 0.118、色相八个带全占——门那块 L 0.54 / 彩度 0.060 / 色相 285°,在每一条榜上都排不进前列。

02

连它的色相都不再稀有

在悬木人那张夜景里,门那一族(240°–300°)只占 2.36%,而且没有第二个来源——整幅画的这个色相就是它。这里 210°–300° 有 86942 个像素,占 9.88%:天、远处的建筑影、半空飘着的气球都在这一族里。门旁边那块岩石实测 L 0.37 / 彩度 0.073 / 色相 40°,门只比它亮 0.17,而全图明度 p99 已经到 0.79——这 0.17 在正午的动态范围里只是浅浅一层凹陷,看上去就是崖脚一个开口而已。稀有度是环境给的,不是元素自己带的。

03

常数要按最亮的场景定

这扇门在五张里的绝对值几乎没动:明度 0.46 到 0.59,色相 253° 到 295°,彩度 0.026 到 0.070。变的全是环境——无彩比例从 55.13% 到 0.97%,彩度中位数从 0.023 到 0.078,于是它对中位数的彩度倍率从 2.3 一路掉到 0.77。这正是复用元素该有的样子:按夜景把它调到「最显眼」,它在正午会烧成一块白斑;按正午调到「还找得到」,它在夜里自然就是唯一的光。做设计系统里的高亮态、徽标、指示灯也照这条走——定一个绝对常数,让每个场景拿自己富余的那条通道去和它拉开,不要把对比度写进元素里。

带走这组颜色

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

/* 花羽会秘藏之所·晴午 · Flower-Feather Clan Secret Space, Clear Noon — Teyvat Palette */
:root {
  --cliff-ochre: oklch(0.4 0.073 35); /* 崖赭 #69382c */
  --noon-grass: oklch(0.69 0.118 124); /* 午草绿 #8ca851 */
  --zenith-blue: oklch(0.6 0.072 244); /* 缝隙天 #5a85a8 */
  --canopy-yellow: oklch(0.38 0.076 84); /* 树冠黄 #553e03 */
  --banner-red: oklch(0.36 0.09 2); /* 旗红 #622539 */
  --gate-violet: oklch(0.54 0.06 285); /* 门紫 #6b6a91 */
  --gradient-tribal-secret-space-flower-feather-clan-location-context: linear-gradient(180deg, oklch(0.6 0.072 244) 0%, oklch(0.36 0.09 2) 14%, oklch(0.4 0.073 35) 44%, oklch(0.54 0.06 285) 64%, oklch(0.69 0.118 124) 100%);
}

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