纳塔昼开阔浮游和暖

安饶之野·浮火

Atocpan, Drifting Embers

色卡

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

重构渐变

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

0%4d76ad26%6c618c58%a97372100%ab7a57

为什么和谐

多色相共处不止一条对齐可用:这幅画八条色相带的均值明度全部落在 0.54–0.68 这 0.14 的一格里,彩度反而散到 0.052–0.087——和坚岩隘谷正好对调,那里对齐的是彩度(0.091 / 0.092 / 0.094),明度从 0.47 一路铺到 0.73。按住哪条通道,另一条就自由;160° 的跨度是明度让出来的。

山脊上没有明度差

天顶实测 L 0.56、彩度 0.097、256°,山体受光面 L 0.61、0.069、20°——明度只差 0.05,色相却隔着 124°。全画最长的那条边,从左下的岩脊一路爬到画心的峰顶,完全是色相划出来的,没有一段靠亮暗切开。后果就摆在峰顶:那一团碎裂的飘石和扬尘横跨山脊线,一半在天上一半在岩上,两边都不像贴上去的。想让主体待在场景里而不是浮在背景前,先把它和背景推到同一档明度,轮廓交给色相。

省下来的明度全花在远近上

八条色相带只用掉 0.14 的明度宽度,而全图从 L 0.42 走到 0.84——省下的两端一格没浪费,全给了距离。最亮的 4000 个像素分成两堆,一堆在 (0.10, 0.65)、一堆在 (0.96, 0.65),都是 L 0.87 的远海,画心的山则是 L 0.60。这幅画的纵深是横着走的:山把纵向占满了,远方只能从左右两侧退出去。明度一旦不再兼职分色相,它就能专心只说一件事。

火星和它浮在其中的天一样艳

左右两块纯天空(x 0–0.28 与 0.72–1 的上三成)里,332 个暖色像素对着 150,773 个蓝像素:火星实测 L 0.72–0.73、彩度 0.093–0.095,托着它们的天是 L 0.57–0.59、彩度 0.086–0.096——彩度一模一样,它们靠的是 125° 的色相差和 0.14 的明度。全图也是这个规矩:八条带的彩度只在 0.052–0.087 之间,最艳的 4000 个像素散在七条色相带上,最大一簇(30°–60°,1,326 个)也只占三分之一,而同一口径下翘枝崖是 4000 个全在一条带里。想在一个界面里同时开八种颜色,别急着给其中一种加饱和度——先确认没有哪一种正在靠明度压别人。

带走这组颜色

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

/* 安饶之野·浮火 · Atocpan, Drifting Embers — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.56 0.097 256); /* 天顶蓝 #4d76ad */
  --ochre-ridge: oklch(0.61 0.069 20); /* 赭岭 #a97372 */
  --summit-mauve: oklch(0.52 0.069 296); /* 峰紫 #6c618c */
  --meadow-gold: oklch(0.62 0.078 56); /* 草甸黄 #ab7a57 */
  --drifting-ember: oklch(0.73 0.095 23); /* 浮火橙 #dd908c */
  --far-sea: oklch(0.87 0.045 249); /* 远海白 #bed7f1 */
  --gradient-atocpan: linear-gradient(180deg, oklch(0.56 0.097 256) 0%, oklch(0.52 0.069 296) 26%, oklch(0.61 0.069 20) 58%, oklch(0.62 0.078 56) 100%);
}

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

色卡