RGB: 三通道颜色

  • 他是目前运用最广泛的颜色系统之一
  • 可以通过红绿蓝三色通道, 外加alpha透明度, 来展示几乎所有的颜色
  • RGB是从颜色的发光原理来设定的, 相当于红绿蓝三个颜色通过不同亮度, 来组合成为需要的颜色
  • 0为最暗, 255为最亮

RGB转换为HEX(16进制)

RGB与HEX中每个颜色都是一一对应的关系
RGB的数值 = 16 * HEX的第一位 + HEX的第二位
示例如下:

  • RGB: 92, 184, 232
  • 92 / 16 = 5余12 -> 5C
  • 184 / 16 = 11余8 -> B8
  • 232 / 16 = 14余8 -> E8
  • HEX = 5CB8E8

HEX转换RGB

此转换就是将上述的转换逆转即可
示例如下

  • HEX: F26BC1
  • F2 = 15和2 -> 15 * 16 + 2 = 242
  • 6B = 6和11 -> 6 * 16 + 11 = 107
  • C1 = 12和1 -> 12 * 16 + 1 = 193

常见算法题

描述

设计一个函数，给出一个rgba数值，返回16进制的表达式及透明度。

输入

rgba(255,255,255,0.4)

输出

颜色：#FFFFFF，透明度：0.4

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function convert (str) {
    var r = str.slice(5,-1).split(',') // 截取字符串
    var color = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']
    var res = '颜色：#'
    for (var i = 0;i<3;i++) {
        let c = Math.floor((r[i]) / 16)
        let y = Number(r[i]) % 16
        res += color[c]
        if(y === 0) res += color[c]
        else res += color[y]
    }
    return `${res}，透明度：${r[3]}`
}