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>