Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
踞石山·烈日
纳塔昼炽烈开阔图腾

踞石山·烈日

Coatepec Mountain under a Blazing Sun

色卡

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

重构渐变

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

0%4f97ed32%72a7c168%a9614d100%7a4936

为什么和谐

把对面的颜色搬进主体:天(254°,占 40%)与红岩(37°,占 21%)相隔 143°,彩度都不低——而崖面上那几道流纹实测 231°,离天空只有 23°。对撞的两半之所以是一张画而不是两张海报,是因为其中一半借走了另一半的颜色。

01

崖壁上写着天空的色号

把崖面区域里所有青蓝色相的像素单独取出来(1.6 万个),均值落在 231°、彩度 0.068;天空是 254°、彩度 0.147。两者相隔 23°,在一片 37° 的红岩上读作同一种青。这是画面自己完成的调解:不在两块颜色之间塞第三色,而是把对面的颜色少量地画进主体内部。做界面同理——想让强调色和大面积底色不打架,在底色的纹理、描边、图标里放一点强调色的同族,比加中间色更省。

02

最饱和的是天,不是主角

天空彩度 0.147、峰值 0.205,是全图最高;红岩只有 0.098。通常最饱和的那块会抢主角,这里没有,因为它明度也最高(L 0.67)且没有细节——饱和加明度加空白,读起来是「亮」不是「近」。要一块颜色饱和而不抢戏,就抽掉它的细节。

03

第三个色带负责落地

台地草甸 72°、彩度 0.092,占了画面下缘,把青与赭的交界压在地面上而不是悬在半空。冷暖对撞的三个旋钮里(明度、彩度、面积),层岩巨渊那篇拧的是面积;这里三个都没大动,靠的是「借色 + 一条落地的暖带」。同一个问题,换了工具。

带走这组颜色

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

/* 踞石山·烈日 · Coatepec Mountain under a Blazing Sun — Teyvat Palette */
:root {
  --noon-blue: oklch(0.67 0.147 254); /* 正午蓝 #4f97ed */
  --mesa-ochre: oklch(0.57 0.098 37); /* 赭台 #a9614d */
  --banded-teal: oklch(0.7 0.068 231); /* 岩纹青 #72a7c1 */
  --dry-gold: oklch(0.55 0.092 72); /* 枯草金 #93682e */
  --crimson-crown: oklch(0.57 0.081 331); /* 绯冠 #93668d */
  --gradient-coatepec-mountain: linear-gradient(175deg, oklch(0.67 0.147 254) 0%, oklch(0.7 0.068 231) 32%, oklch(0.57 0.098 37) 68%, oklch(0.457 0.074 41.6) 100%);
}

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