ts中颜色值的hex转rgb，rgb转hsl，hex转rgb

css中颜色表示

HEX示例：

color: #FF0000; // 红色
color: #00FF00; // 绿色

RGB示例：

color: rgb(255, 0, 0, 1);  // 红色
color: rgb(0, 255, 0, 1);  // 绿色

HSL示例：

color: hsl(0, 1000%, 50%);   // 红色
color: hsl(120, 100%, 50%); // 绿色

// 色相（Hue）：取值 0～360，指色彩的基本属性，0（或360）表示红色，120表示绿色，240表示蓝色。
// 饱和度（Saturation）：取值 0～100%，指色彩的纯度，越高色彩越纯，低则逐渐变灰。
// 明度（Lightness）：取值 0～100%。

hex转rgb

const hexToRgb = (val: string): number[] => {
  let sColor = val.toLowerCase()
  //十六进制颜色值的正则表达式
  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
  // 如果是16进制颜色
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      let sColorNew = "#"
      for (let i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1))
      }
      sColor = sColorNew
    }
    //处理六位的颜色值
    let sColorChange: number[] = []
    for (let i = 1; i <7 ; i += 2) {
      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
    }
    return sColorChange
    // return "rgb(" + sColorChange.join(",") + ")"
  }
  return []
  // return sColor
}

rgb转hsl

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

  return [h, s, l]
}

有何用处？

示例：自定义按钮的背景颜色、hover状态下的背景颜色、css根据背景颜色自动切换文字颜色为黑白色等。
解析：按钮的背景颜色变化可以通过hsl的饱和度改变来变化；css根据背景颜色自动切换黑白文字的话可以通过css滤镜实现
效果严肃：

示例代码：

<script setup lang="ts">
import './style/index.less'
import { computed, ref } from 'vue'
import { buttonProps } from './type'

const props = defineProps(buttonProps)
const styleClass = computed(() => {
  return {
    'is-custom': props.color,
  }
})

// hex转rgb
const hexToRgb = (val: string): number[] => {
  // 上面示例代码有，此处不重复
 }
// rgb转hsl
const rgbToHsl = (r: number, g: number, b: number): number[] => {
  // 上面示例代码有，此处不重复
}

const hsl = ref<string>()
const getHsl = () => {
  if (props.color) {
    let rgbArr: number[] = hexToRgb(props.color)
    let hslArr = rgbToHsl(rgbArr[0], rgbArr[1], rgbArr[2])
    hsl.value = `hsl(${hslArr[0]}, ${hslArr[1]}%, ${hslArr[2] + 8}%)` // 第三个位置将hover状态下都颜色饱和度加了8
  }
}
getHsl()
</script>
<style lang="less" scoped>
is-custom {
  color: v-bind('props.color');
  background-color: currentColor; // css根据背景颜色自动切换黑白文字：容器和文字用同一种颜色表示，目的是让文字颜色和背景相关联，可以通过currentColor实现
  border: 1px solid v-bind('props.color');
  span {
    filter: grayscale(1) contrast(999) invert(1); // 让彩色文字变成黑白
  }
  &:hover {
    border-color: v-bind(hsl);
    background-color: v-bind(hsl);
    span {
      filter: grayscale(1) contrast(999) invert(1); // 让彩色文字变成黑白
    }
  }
}
</style>