Js搞16进制的颜色

6位16进制的rgb颜色

貌似这个写法最有趣:

"#"+('00000'+color.toString(16)).substr(-6)

这里面color是一个整数, 这样就可以把任意的整数转化为对应的颜色了.

亮的还是暗的

• 考虑到醒目性, 黑色背景上面要加浅/亮颜色? 然后我们就进入了hsl/hsv的领域.
• 传统上hsv更常用, 但是css3用了hsl!!!!!! 那么我可以尝试hsl直接在高德地图使用.

hsl 和hsla

• h 色环: red=0=360 一圈是360度
• s 饱和度 100% 满饱和 0%一种灰度
• l 明度 100% 白色 0% 黑色
• a 表示透明度：0=透明；1=不透明；

所以整件事是这样的.

• 再50%明度的时候, 色环是有360度的. 也就是每度都能用,
• 但是, 再100%明度的时候, 色环就没用了. 因为他是白色.
• 饱和度的意思是颜色距离中心有多远.
• 发挥下想象力, 这是一个球.
  • 上顶点是白色. 下顶点是黑色
  • 色环再赤道相当于经度.
  • 纬度就是明度, 北极是100白色. 南极是0黑色.
  • 饱和度相当于地幔, 地核, 也就是一个点距离地球内核点的距离. 地球正中心是50%的灰色, 一点彩色都没有.
  • 确切的说, 从南极到北极的这一根直线是一根灰色线.

那么代码就显而易见了

• 只要亮的, 那么明度必须>50%.
• 赤道有360个色相点.(经度), (亮度)北纬一共50个度, 北纬75度(相当于地球的45度)时, 2个色相点才能对应一个颜色. 也就是色相步进会变成2.
  • 北纬60度 180色 2度一色
  • 北纬70度 90色 4度一色
  • 北纬80度 45色 8度一色
  • 北纬90度 22色 16度一色
  • 北纬100度(100%), 就一种颜色: 白色
• 赤道上饱和度可以10%一个变化.
  • 北纬60度 10%一个变化 9个变化
  • 北纬70度
  • 北纬80度
  • 北纬90度
• 由此发现饱和度和亮度应该是互相补充的, 降低饱和度 = 提升亮度, 都会让颜色不明显. 因为20%的饱和度减少近似=10%的亮度增加来处理.

function colorinit(){
            let h =[10, 20, 30, 40, 50, 360]
            let s = [100, 80, 60, 40, 20, 0]
            let l = [50, 60, 70, 80, 90, 100]
            for(let i=0; i<s.length; i++){
                for(let j=0; j<l.length; j++){
                    let t=0;
                    let step=h[ i>j ? i: j];
                    while(t<360){
                        colorstep.push('hsl('+t+', '+s[i]+'%, '+l[j]+'%)')
                        t+=step
                    }
                }
            }
        }