如何计算十六进制颜色偏移量并基于Sass生成主题衍生色

云上老周

2026-5-26

嘿，这个需求在Sass里完全能搞定！核心思路是先算出你预设的基准色和对应主题色之间的颜色差值（也就是你说的偏移量），之后对用户输入的任意颜色套用这个差值，就能生成匹配的主题色了。我给你分两种常用的实现方式，你可以根据需求选：

方法一：基于RGB通道的固定偏移量

这种方式适合需要严格保持颜色间数值差的场景，比如你例子里的#110360到#1c3ea4，我们先算每个RGB通道的偏移值，再套用到用户输入的颜色上。

步骤1：计算偏移量

先把你的基准色和目标标题栏色转成RGB，算出每个通道的差值，在Sass里可以自动计算，不用手动算：

// 你的基准主题色
$base-theme-color: #110360;
// 预设的标题栏目标色
$target-header-color: #1c3ea4;

// 自动计算RGB偏移量
$header-rgb-offset: (
  r: red($target-header-color) - red($base-theme-color),
  g: green($target-header-color) - green($base-theme-color),
  b: blue($target-header-color) - blue($base-theme-color)
);

步骤2：写一个应用偏移量的函数

这个函数会接收用户输入的颜色，加上偏移量，再确保颜色值在有效范围内（0-255）：

@function apply-rgb-offset($input-color, $offset-map) {
  // 提取输入颜色的RGB通道值，加上偏移量
  $new-r: red($input-color) + map-get($offset-map, r);
  $new-g: green($input-color) + map-get($offset-map, g);
  $new-b: blue($input-color) + map-get($offset-map, b);
  
  // 确保颜色值在0-255之间，避免溢出导致无效颜色
  $new-r: clamp($new-r, 0, 255);
  $new-g: clamp($new-g, 0, 255);
  $new-b: clamp($new-b, 0, 255);
  
  // 转回十六进制颜色返回
  return rgb($new-r, $new-g, $new-b);
}

步骤3：使用函数生成主题色

当用户选择新颜色时，直接调用函数就行：

// 用户输入的新主题色
$user-color: #2d5299;

// 生成对应的标题栏颜色
$user-header-color: apply-rgb-offset($user-color, $header-rgb-offset);

// 应用到样式里
.header {
  background-color: $user-header-color;
}

方法二：基于HSL的相对偏移量

如果希望主题色之间保持色调、饱和度、亮度的相对关系（比如标题栏总是比主题色亮一些、饱和度高一点），用HSL偏移会更自然，不会出现RGB偏移可能导致的颜色跳脱问题。

步骤1：计算HSL偏移量

同样先算基准色和目标色的HSL差值：

$base-hsl: hsl($base-theme-color);
$target-header-hsl: hsl($target-header-color);

$header-hsl-offset: (
  h: hue($target-header-hsl) - hue($base-hsl),
  s: saturation($target-header-hsl) - saturation($base-hsl),
  l: lightness($target-header-hsl) - lightness($base-hsl)
);

步骤2：写HSL偏移函数

这个函数会处理色相的循环（0-360度），以及饱和度、亮度的范围限制：

@function apply-hsl-offset($input-color, $offset-map) {
  $input-h: hue($input-color);
  $input-s: saturation($input-color);
  $input-l: lightness($input-color);
  
  // 应用偏移量
  $new-h: $input-h + map-get($offset-map, h);
  $new-s: $input-s + map-get($offset-map, s);
  $new-l: $input-l + map-get($offset-map, l);
  
  // 处理色相循环（超过360度就减360，低于0就加360）
  $new-h: if($new-h > 360, $new-h - 360, if($new-h < 0, $new-h + 360, $new-h));
  // 限制饱和度和亮度在0%-100%之间
  $new-s: clamp($new-s, 0%, 100%);
  $new-l: clamp($new-l, 0%, 100%);
  
  return hsl($new-h, $new-s, $new-l);
}

步骤3：使用HSL函数

用法和RGB版本一样，换个函数名就行：

$user-header-color: apply-hsl-offset($user-color, $header-hsl-offset);

小提示

如果你的主题有多个需要生成的颜色（比如侧边栏、按钮、文本色），只需要给每个颜色定义对应的偏移量，重复调用函数就行。
用clamp()函数非常重要，它能防止颜色值超出有效范围，避免出现浏览器无法识别的无效颜色。

内容的提问来源于stack exchange，提问作者jay padaliya