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>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值