一些颜色转换函数

沈孟平

最后更新于 2026-04-23 19:53:53

color 模块主要提供颜色格式转换、透明度处理和混色能力。适合做主题派生色、hover 色、按压色和透明色还原。

导出总览

名称	说明
hexToRgb	#rrggbb 转 RGB 数组
rgbToHex	RGB 数组转 Hex
getLightColor	生成某个颜色的浅色版本
getDarkColor	生成某个颜色的深色版本
createHoverColor	生成 hover 态颜色
createPressedColor	生成按压态颜色
createSupplColor	生成补充色
rgba2Hex	将 rgba 按明暗背景混合后转成 hex
opacityColor	给颜色追加透明度
convertToHex	按指定背景混合 RGBA，返回 RGB 元组
rgbaToHex	将透明颜色在指定背景上还原为 hex

颜色转换

/** Hex转GRB */
export function hexToRgb(str: string) {
  str = str.replace('#', '') // 替换查找的到的字符串
  const hxs: any = str.match(/../g) || [] // 得到查询数组
  for (let i = 0; i < 3; i++) hxs[i] = Number.parseInt(hxs[i], 16)
  return hxs
}

GRB转Hex

/** GRB转Hex */
export function rgbToHex(a: number, b: number, c: number) {
  const hex = [a.toString(16), b.toString(16), c.toString(16)]
  for (let i = 0; i < 3; i++) {
    if (hex[i].length === 1)
      hex[i] = `0${hex[i]}`
  }
  return `#${hex.join('')}`
}

获取浅色

/** 获取浅色 */
export function getLightColor(color: string, level: number) {
  const rgbColor = hexToRgb(color)
  for (let i = 0; i < 3; i++) rgbColor[i] = Math.floor((255 - rgbColor[i]) * level + rgbColor[i])
  return rgbToHex(rgbColor[0], rgbColor[1], rgbColor[2])
}

获取深色

/** 获取深色 */
export function getDarkColor(color: string, level: number) {
  const rgbColor = hexToRgb(color)
  for (let i = 0; i < 3; i++) rgbColor[i] = Math.floor(rgbColor[i] * (1 - level))
  return rgbToHex(rgbColor[0], rgbColor[1], rgbColor[2])
}

按状态生成颜色

/** 创建悬浮颜色 */
export function createHoverColor(rgb: string): string {
  return composite(rgb, [255, 255, 255, 0.16])
}

/** 创建按下颜色 */
export function createPressedColor(rgb: string): string {
  return composite(rgb, [0, 0, 0, 0.12])
}

/** 创建补充颜色 */
export function createSupplColor(rgb: string): string {
  return composite(rgb, [0, 0, 0, 0.24])
}

创建悬浮颜色

/** 创建悬浮颜色 */
export function createHoverColor(rgb: string): string {
  return composite(rgb, [255, 255, 255, 0.16])
}

创建按下颜色

/** 创建按下颜色 */
export function createPressedColor(rgb: string): string {
  return composite(rgb, [0, 0, 0, 0.12])
}

创建补充颜色

/** 创建补充颜色 */
export function createSupplColor(rgb: string): string {
  return composite(rgb, [0, 0, 0, 0.24])
}

透明度与混色

/** rgba转hex */
export function rgba2Hex(rgb: string, dark = true) {
  if (!dark) {
    return composite(rgb, [255, 255, 255, 0.9])
  }
  return composite(rgb, [24, 24, 28, 0.9])
}

/** 创建透明度颜色 */
export function opacityColor(baseBackgroundRgb: string, alpha: number = 0.1) {
  return changeColor(baseBackgroundRgb, { alpha })
}

/** 混合颜色 */
export function convertToHex(input: RGBA, mix: RGBA): RGB {
  // ...
}

/**
 * rgba转hex 想获取透明颜色所代表的实际颜色可以用这个
 * @param rgba 需转换的颜色
 * @param mix 混合的背景颜色 默认:#FFFFFF
 */
export function rgbaToHex(rgba: string, mix: string = '#FFFFFF'): string {
  const rgbaColor = toRgba(rgba)
  const mixColor = toRgba(mix)
  if (rgbaColor[3] < 1) {
    // 透明颜色需要使用背景色去混合
    const rgbColor = convertToHex(rgbaColor, mixColor)
    return rgbToHex(rgbColor[0], rgbColor[1], rgbColor[2])
  }
  return rgbToHex(rgbaColor[0], rgbaColor[1], rgbaColor[2])
}

使用建议

• opacityColor 和 rgbaToHex 适合做主题色派生。
• createHoverColor / createPressedColor 适合用在按钮、标签、列表项状态色。
• convertToHex / rgbaToHex 适合处理设计稿里带透明度、但落地时需要拿到“实际视觉颜色”的场景。