hex和rgb色值转换 |
您所在的位置：网站首页 › 如何将表格颜色变浅一点 › hex和rgb色值转换 |
hex和rgb色值转换
|
我们在做主题订制的时候，一般都会选一种主题色，该颜色以主题色为主导，颜色依次变浅，用于做主题色下的关联色统一，例如文字激活、激活的背景色、菜单背景色等 在项目中主题色的应用： 我们对颜色进行加深减淡就是通过更改rgb的色值来实现的，先将hex转换rgb色值，然后对色值系数进行调整来实现。 1、hex转rgb 2、调整rgb系数实现加深减淡 3、rgb转hex hex转rgb先接收色值，例如：#409EFF 将色值转换为rgb模式，在这里用到了正则匹配和parseInt 在正则中 . 标识匹配除换行外的任意字符，这里两个一组进行匹配，/g标识全部匹配，match会返回匹配成功的数组 parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是2-36 之间的整数，表示被解析字符串的基数。 在这里parseInt指定 16 表示被解析值是十六进制数，返回10进制数 参考：parseInt /** * hex转rgb * @param {string} str 色值，如：#409EFF * @returns rgb数组[64, 158, 255] */ const hexToRgb = (str) => { let hexs = null; let reg = /^\#?[0-9A-Fa-f]{6}$/; if (!reg.test(str)) return alert('色值不正确') str = str.replace('#', '') // 去掉# hexs = str.match(/../g) // 切割成数组 409EFF => ['40','9E','FF'] // 将切割的色值转换为16进制 for (let i = 0; i { let reg = /^\#?[0-9A-Fa-f]{6}$/; if (!reg.test(color)) return alert('色值不正确') let rgb = hexToRgb(color); // 循环对色值进行调整 for(let i = 0 ; i let reg = /^\#?[0-9A-Fa-f]{6}$/; if (!reg.test(color)) return alert('色值不正确') let rgb = hexToRgb(color); for(let i = 0 ; i let reg = /^\d{1,3}$/; // 限定1-3位 -> 0~255 if(!reg.test(r) || !reg.test(g) || !reg.test(b)) return alert('色值不正确') let hex =[r.toString(16), g.toString(16), b.toString(16)] // 转换的值如果只有一位则补0 for(let i = 0 ; i hex[i]}` } return `#${hex.join('')}` // #409eff } rgbToHex(64,158,255) 颜色分档可以通过遍历将颜色由浓变淡，修改颜色是以系数生成的，系数0 ~ 1 这里起始下标为1，结束下标为9，避免了系数的 0和1，如果系数是0则会生成黑色，1会生成白色 // 1~9避免最暗和最亮，0最暗(黑)，10最亮(白) // 1~9避免最暗和最亮，0最暗(黑)，10最亮(白) for (let i = 1; i |
如果你在项目中允许用户自定义主题，那么我们就需要计算出用户自定义的主题，并且为主题分档，最后生成的效果如下： 
【本文地址】
今日新闻 |
推荐新闻 |