Блог

Главная - Вопросы по программированию - Как я могу получить значения RGB из средства выбора цвета и отобразить их?

Как я могу получить значения RGB из средства выбора цвета и отобразить их?

#javascript #html #colors #picker

#javascript #HTML #Цвет #средство выбора

Вопрос:

Я совершенно новичок в 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;
}

Комментарии:

1. куда вы хотите сохранить значения RGB?

2. на самом деле я хочу использовать его для преобразования rgb в rgb0.0-1.0 с плавающей точкой (3 с.ф.) позже.

Ответ №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>