配色方案

在聊配色之前，先搞清楚一个很多人从没想过的问题：你手机屏幕上的颜色，和画纸上的颜色，其实不是同一回事。屏幕是发光的——在完全黑暗的房间里，每个像素点是三盏小灯泡（红、绿、蓝），往你眼睛里灌光。开一盏红灯加一盏绿灯，叠出黄色；三盏全开，叠出白色。光越加越亮，加到头就是白，这叫加法混色。画纸正好相反——白光照在白纸上，你涂一层黄色颜料，黄色把蓝色光吸收掉了，只剩红色和绿色反射进你的眼睛。再涂一层品红，又把绿色光吸收掉。颜料越涂越厚，能反射的光越来越少，涂到头就是黑色，这叫减法混色。一个是往黑暗里加光，一个是从白光里减光，方向完全相反，所以屏幕的三原色（红绿蓝）和颜料的原色（青品黄）不一样。

理解了这个，后面所有配色参数就都好懂了。色相就是”这是什么颜色”——在彩虹上指一个位置，红、橙、黄、绿、青、蓝、紫，各是一个色相。饱和度就是”颜色有多纯”——同样是红色，正红很鲜艳，加了白变成粉红就不那么鲜艳了，再加白变成浅粉就更淡了。亮度就是”颜色有多亮”——天空蓝很亮，深海蓝很暗，但它们都是蓝色。灰度就是”从白到黑有多深”——跟颜色无关，纯粹是黑白之间的刻度。透明度就是”颜色透不透得出来”——一面灰墙上打一盏粉色的灯，墙本身还是灰的，只是被灯光染了一层粉，灰墙的纹理还透得出来。如果把透明度拉满，底子就完全被盖住了，那就不叫透明了，那叫直接刷了一层有色油漆。这五个参数叠在一起，就是你眼睛看到的最终效果。

给博客换一套衣服，远不是把红色换成蓝色那么简单。真正的色调切换，是让整个页面”呼吸”的空气都变了——背景在发光，侧栏在沉浸，文字在呼吸。这篇文档记录了 Zebin-Theme 主题的完整配色体系，包括五种可选色调、Tailwind 灰度层级，以及让色调”活起来”的渐变渲染手法。

整个站点的颜色由一套 CSS 变量驱动，核心变量分为背景色、文字色、边框阴影色，以及最重要的强调色和它的 RGB 拆分版。强调色直接控制链接、按钮、标签等一切需要”跳出来”的元素颜色；而 RGB 拆分版则被巧妙地喂给透明度函数，通过不同透明度来渲染背景光晕、侧栏色调、内容区渐变，这样切换色调时不需要改几十个地方，只换两个变量，整个站点的”氛围”就跟着变了。

五种色调预设各有性格。明亮模式下用更浅、更柔和的版本，暗色模式下用更深、更饱和的版本，这样无论在哪种光线环境下阅读，颜色都不会”刺”眼睛。

灰度层级参考了 Tailwind CSS 的 gray 色板，确保从最亮的白色到最深的黑色之间，每一级灰都有明确的分工。每一层之间刚好隔着一到两个色阶，不会糊在一起，也不会太突兀。

明亮模式灰度体系

暗色模式把整个灰度翻转过来，文字方面特别注意了护眼——不用纯白，而是用温和的灰色，避免在大面积暗色背景上出现光晕效应，长时间盯着屏幕也不会累。

暗色模式灰度体系

让色调真正”弥漫”到整个页面的秘密武器是渐变。页面底层叠加了两层径向光晕，一层在左上角，一层在右下角，都使用强调色的低透明度版本来渲染，就像在房间里开了两盏带色调的柔光灯，整个底色会随色调切换而自然变化，但又不至于浓到影响阅读。左右两个侧栏用内阴影从内部向中心扩散色调，透明度比中间栏更高，就像两侧的墙壁被色调浸染了一样。中间内容区从左到右做了一次极其微妙的线性渐变，让色调从侧栏向内容区”流淌”过来，阅读区域依然干净，但能感受到旁边飘来的那一抹色彩。

技术上，这套体系的精髓在于把强调色的 RGB 三个通道存成纯数字字符串，然后在 CSS 里通过透明度函数来使用。这意味着只需要改两个变量，几十处引用到强调色的地方就会自动跟着变——按钮颜色变了，标签云颜色变了，侧栏的色调深度变了，底层光晕也变了，一切浑然一体。色调偏好存在本地存储里，页面加载时立即读取并应用，避免切换页面时出现闪烁。切换明暗主题时也会自动同步色调的明暗版本，确保浅色主题配浅色调，深色主题配深色调。