Color Codes Reference

Practical Snippet

Key points: (1) HEX is an sRGB coordinate, not an appearance — wide-gamut work needs color(display-p3) as progressive enhancement; (2) HSL lightness is not perceptual brightness, so contrast must go through the WCAG relative-luminance formula — both functions are above, and only the latter is correct here; (3) when d === 0 the colour is grey and has no hue, so return h=0/s=0 rather than computing a meaningless hue.

// HEX ↔ RGB ↔ HSL 互转（不依赖任何库的最小实现）
function hexToRgb(hex: string) {
  const h = hex.replace('#', '')
  const full = h.length === 3 ? h.split('').map(c => c + c).join('') : h
  return {
    r: parseInt(full.slice(0, 2), 16),
    g: parseInt(full.slice(2, 4), 16),
    b: parseInt(full.slice(4, 6), 16),
  }
}

function rgbToHsl({ r, g, b }: { r: number; g: number; b: number }) {
  const [rn, gn, bn] = [r, g, b].map(v => v / 255)
  const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn)
  const l = (max + min) / 2
  const d = max - min
  if (d === 0) return { h: 0, s: 0, l }            // 灰色：色相无意义
  const s = d / (1 - Math.abs(2 * l - 1))
  let h: number
  if (max === rn) h = 60 * (((gn - bn) / d) % 6)
  else if (max === gn) h = 60 * ((bn - rn) / d + 2)
  else h = 60 * ((rn - gn) / d + 4)
  return { h: (h + 360) % 360, s, l }
}

// 相对亮度（WCAG 2.x）—— 对比度必须用它，而不是拿 HSL 的 L 当亮度
function relativeLuminance(hex: string) {
  const { r, g, b } = hexToRgb(hex)
  const lin = (v: number) => {
    const c = v / 255
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  }
  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
}

const contrast = (a: string, b: string) => {
  const [x, y] = [relativeLuminance(a), relativeLuminance(b)].sort((p, q) => q - p)
  return (x + 0.05) / (y + 0.05)
}

console.log(contrast('#0d9488', '#ffffff'))  // 码屋 teal 对白字的实际对比度