颜色格式与转化

在线转化

常见颜色格式

HEX

每两位十六进制分别表示红、绿、蓝，范围 00–FF。

#154AC6

8 位时末两位为透明度（Alpha），00 全透明，FF 不透明。

#154AC680  /* 约 50% 透明度 */

RGB / RGBA

rgb(21, 74, 198)
rgba(21, 74, 198, 0.5)  /* 第四个参数范围 0–1 */

HSL / HSLA

色相（0–360°）、饱和度（0–100%）、亮度（0–100%）。

hsl(220, 81%, 43%)
hsla(220, 81%, 43%, 0.5)

转化原理

HEX → RGB

const hex = '#154AC6'
const r = parseInt(hex.slice(1, 3), 16) // 21
const g = parseInt(hex.slice(3, 5), 16) // 74
const b = parseInt(hex.slice(5, 7), 16) // 198

HEX Alpha → 透明度

末两位与 0xFF 的比值：

const opacity = 0x80 / 0xFF // ≈ 0.502（约 50%）

RGB → HSL

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255
  const max = Math.max(r, g, b), min = Math.min(r, g, b)
  const l = (max + min) / 2
  if (max === min) return [0, 0, l]
  const d = max - min
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
  let h
  switch (max) {
    case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break
    case g: h = ((b - r) / d + 2) / 6; break
    case b: h = ((r - g) / d + 4) / 6; break
  }
  return [h * 360, s * 100, l * 100]
}

颜色格式与转化

On this page