如何制作光谱颜色按钮/颜色选择按钮

Question

我需要构建一个按钮，显示颜色光谱，点击颜色光谱内的一个点，将选择专色，文本颜色将根据拾取的颜色而变化。

这就是我需要的东西

提前致谢

P.S 光谱颜色区域也需要通过键盘访问。

Answer 1

这是您需要的基本概要。要获得更平滑的颜色，请降低i增加的值以及width的{​​{1}}（您必须做一些数学运算）。希望这有助于:)。

＆＃13;

＆＃13;

divs

＆＃13;

function getColor(){
  style = window.getComputedStyle(this),
  bgColor = style.getPropertyValue('background-color');
  document.querySelector('h1').style.color = bgColor;
}
var cont = document.getElementById('cont');
for(i=0; i<350; i=i+14){
  var div=document.createElement('div');
  cont.appendChild(div);
  div.style.background = 'hsl(' + i + ',100%, 50%)';
  div.addEventListener('click', getColor);
}

＆＃13;

@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
#cont{ border:1px solid black; width:200px; height:30px; }
#cont div{ 
  width:4%; height:100%; float:left;
}

＆＃13;

＆＃13;

＆＃13;