Shared 函数库

Appearance

mixColors ​

混合两种颜色，支持透明度计算，返回 8 位十六进制格式的混合颜色值。

颜色混合配置

#0077FF
#000000
20%

混合结果

基础色
叠加层
混合结果
Hex:#005FCC
RGB: rgb(0, 0, 0)
Alpha:1.000
RGBA: rgba(0, 0, 0, 1.000)

功能说明

该工具演示 mixColors 函数的工作原理。通过调整基础颜色、叠加颜色和透明度滑块，您可以实时查看混合效果。混合公式为：
结果色 = (叠加色 × 透明度) + (基础色 × (1 - 透明度))

输出格式：8 位十六进制（#RRGGBBAA），alpha 通道默认为 FF（不透明）。支持在设计系统中生成 hover、active、disabled 等动态状态颜色。

函数签名 ​

typescript
/**
 * 混合两种颜色
 * 
 * 根据叠加颜色的不透明度，将两种颜色进行混合计算，返回混合后的十六进制颜色值。
 * 
 * @param baseColor - 基础颜色 (hex格式，如 #0077FF)
 * @param overlayColor - 叠加颜色 (hex格式，如 #000000)
 * @param overlayOpacity - 叠加颜色的不透明度 (0-1之间的数值，0表示完全透明，1表示完全不透明)
 * @returns 混合后的颜色 (8位十六进制格式，如 #FF0000FF)
 * 
 * @throws {Error} 当输入颜色不是有效的hex格式时
 * @throws {Error} 当不透明度不在0-1范围内时
 */
export function mixColors(
  baseColor: string,
  overlayColor: string,
  overlayOpacity: number
): string

参数 ​

参数名类型必填说明
baseColorstring是基础颜色，6 位十六进制格式（如 #0077FF）
overlayColorstring是叠加颜色，6 位十六进制格式（如 #000000）
overlayOpacitynumber是叠加颜色的不透明度，范围 0-1（0=完全透明，1=完全不透明）

返回值 ​

类型说明
string混合后的颜色值，8 位十六进制格式（如 #005CB3FF）

工作原理 ​

  1. 输入验证：检查颜色格式是否为有效的 6 位 hex，透明度是否在 0-1 范围内
  2. 颜色解析：将 hex 颜色转换为 RGB 值
  3. 混合计算：使用 alpha 混合公式计算最终颜色：
    混合颜色 = (叠加颜色 × 透明度) + (基础颜色 × (1 - 透明度))
  4. 格式转换：将混合后的 RGB 值转换为 8 位十六进制格式（包含 alpha 通道）
  5. 边界处理：确保 RGB 值在 0-255 范围内，alpha 通道默认为 FF（不透明）

使用示例 ​

基础混合 ​

typescript
import { mixColors } from 'zcw-shared/functions/design-tokens/mixColors'

// 蓝色基础色 + 20% 黑色叠加
const result = mixColors('#0077FF', '#000000', 0.2)
console.log(result) // "#005CB3FF"

// 红色基础色 + 50% 透明绿色叠加
const result2 = mixColors('#FF0000', '#00FF00', 0.5)
console.log(result2) // "#7F7F00FF"

设计令牌中的应用 ​

typescript
import { mixColors } from 'zcw-shared/functions/design-tokens/mixColors'

// 从设计令牌中动态生成悬停状态颜色
const baseColor = designTokens.primaryColor    // "#0077FF"
const hoverColor = mixColors(baseColor, '#000000', 0.1)  // "#0066E6FF"

// 生成禁用状态颜色
const disabledColor = mixColors(baseColor, '#FFFFFF', 0.3) // "#66B3FFFF"

响应式颜色生成 ​

typescript
import { mixColors } from 'zcw-shared/functions/design-tokens/mixColors'
import { ref, computed } from 'vue'  // 或 React hooks

const baseColor = ref('#0077FF')
const overlayColor = ref('#000000')
const opacity = ref(0.2)

const mixedColor = computed(() => 
  mixColors(baseColor.value, overlayColor.value, opacity.value)
)

// 在模板中使用
// <div :style="{ backgroundColor: mixedColor }">动态颜色</div>

错误处理 ​

typescript
import { mixColors } from 'zcw-shared/functions/design-tokens/mixColors'

try {
  // 无效的颜色格式
  const result = mixColors('#invalid', '#000000', 0.2)
} catch (error) {
  console.error(error.message) // "颜色格式必须是有效的hex格式 (如 #FFFFFF)"
}

try {
  // 无效的透明度范围
  const result = mixColors('#0077FF', '#000000', 1.5)
} catch (error) {
  console.error(error.message) // "不透明度必须在0-1之间"
}

颜色格式说明 ​

输入格式 ​

  • 基础颜色和叠加颜色：6 位十六进制格式 #RRGGBB
  • 不透明度：0.0 - 1.0 的浮点数

输出格式 ​

  • 8 位十六进制：#RRGGBBAA（包含 alpha 通道）
  • 不透明输出：alpha 通道默认为 FF（完全不透明）
  • 精确计算：RGB 值四舍五入到最近的整数

支持的混合效果 ​

透明度视觉效果示例（蓝色 + 黑色）
0.0完全透明叠加，显示基础色#0077FFFF
0.2轻微变暗#005CB3FF
0.550% 混合#003D80FF
0.8明显变暗#001966FF
1.0完全显示叠加色#000000FF

性能考虑 ​

  • 纯函数：无副作用，相同输入始终产生相同输出
  • 轻量计算：只进行基本的数学运算，无复杂算法
  • 内存友好：不创建中间对象，直接返回字符串结果

mixColors 函数是设计系统中生成动态颜色（如 hover、active、disabled 状态）的重要工具，支持精确的透明度混合计算。

Copyright © 2023-present