如何从颜色选择器中获取 RGB 值并显示它们？答案

【问题标题】：How can i get the RGB values from color picker and display them?如何从颜色选择器中获取 RGB 值并显示它们？
【发布时间】：2020-12-05 07:34:18
【问题描述】：

我对 html 和 javascript 完全陌生。我做了一个颜色选择器，它显示十六进制值。但我希望它也能显示和保存 rgb 值。怎么做，谁能帮帮我。谢谢！

这是我的html

<td>Background Colour:</td>
  <td id="colorControls">
    <input type="color" id="colorChangeBG">
    <p>RGB:<span id="HexValue">"0, 0, 0"</span></p>
    </td>
  <td>-</td>

这是我的javascript

var colorChange;
var initialColor = "#ffffff";

window.addEventListener("load", changemycolor);       
   
function changemycolor() {
    colorChange = document.querySelector("#colorChangeBG");
    colorChange.value = initialColor;
    colorChange.addEventListener("input", update);
}          

function update(event) {
  box.style.background = event.target.value;
  document.getElementById('HexValue').innerHTML = event.target.value;
}

【问题讨论】：

您要将 RGB 值保存到哪里？
我实际上想用它来将 rgb 转换为 rgb0.0-1.0 float (3 s.f.) 以后。

标签： javascript html colors picker

【解决方案1】：

试试这个，随心所欲地改变事件

let colorChangeBG = document.getElementById("colorChangeBG").value;
let HexValue =  document.getElementById("HexValue");

function hexTorgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}


function getRGBColor(that){
 let thatv = that.value; 
 let rgbV = hexTorgb(thatv);
 
 console.log(thatv)
 console.log(rgbV);
 
 HexValue.innerHTML = rgbV;
}

<td>Background Colour:</td>
  <td id="colorControls">
    <input type="color" id="colorChangeBG" onchange="getRGBColor(this)">
    <p>RGB:<span id="HexValue">"0, 0, 0"</span></p>
    </td>
  <td>-</td>

【讨论】：