用JavaScript进行16进制和RGB颜色的转换

最编程 2024-01-13 07:27:51

...

作为前端开发而言，不可避免的会遇到颜色取值，字符串和数字直接的转换，博主为此写了一个小工具，实现色值之间的在线转换。

前置知识点： parseInt， toString

parseInt(value ,decidal) value为传值 decidal为进制数

parseInt(110, 2) => 6

parseInt(110, 8) => 72

parseInt(110, 10) => 110

parseInt(110, 16) => 272

toString 转换则需要先将数字通过转换，在通过toString转换到具体的进制

parseInt(110, 16).toString(8) => '420'

parseInt(110, 16).toString(16) => '110'

parseInt(110, 10).toString(16) => '6e'

当数字是10进制时可以写为 110..toString(16) => '6e' 请注意 110 后面有两个点，一个点的时候会认为小数

RGB转16进制

rgb(255,123,20) => #ff7b14

思路：创建一个数组 list list[0] = '#'

list[1] = parseInt(255, 10).toString(16)

list[2] = parseInt(123, 10).toString(16)

list[3] = parseInt(20, 10).toString(16)

结果：list.join('')

16进制转RGB

思路：

ff7b14

分隔成数组 list = ['ff', '7b', '14']

list[0] = parseInt(list[0] , 16)

list[1] = parseInt(list[1] , 16)

list[2] = parseInt(list[2] , 16)

结果： list.join(',')

查看源码

十六进制和 RGB 颜色值相互转换的原理