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

最新推荐文章于 2024-06-19 09:43:53 发布

前端开心果

最新推荐文章于 2024-06-19 09:43:53 发布

阅读量1k

点赞数 1

分类专栏： vue3 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/qq_38157825/article/details/128956317

版权

vue3 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章介绍了CSS中颜色的不同表示方式，包括HEX、RGB和HSL，并提供了相应的转换函数。这些知识和函数在自定义按钮的背景颜色、hover状态以及根据背景颜色自动切换文字颜色等方面有实际应用，例如在Vue.js组件中动态计算颜色并调整元素样式。

摘要由CSDN通过智能技术生成

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>