javascript - HTML5 input type Color read single RGB values

With this code on browser many field are available by the user, it can change R,G,B, HEX VALUE, HUE ecc. I need to read only the Red value.

  <input id="color_pick"type="color" value="#ff0000">

var toread = document.getElementById('color_pick');
toread.value # get the hex 
toread.value.red() # would it be possible to get r?

I've read this document but cannot figure how to get the single R value from the input.

With this code on browser many field are available by the user, it can change R,G,B, HEX VALUE, HUE ecc. I need to read only the Red value.

  <input id="color_pick"type="color" value="#ff0000">

var toread = document.getElementById('color_pick');
toread.value # get the hex 
toread.value.red() # would it be possible to get r?

I've read this document but cannot figure how to get the single R value from the input.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/color

Share Improve this question asked Oct 1, 2019 at 12:10 user2239318 2,7847 gold badges32 silver badges55 bronze badges

I really don't understand what you are trying to do. Furthermore, the code you posted won't run, as the browser can execute either HTML code or javascript, and your code has both. – Adriano Commented Oct 1, 2019 at 12:15
The document you link to says that the value is a string, not a special color type. Also, what do you expect the red value to be? "ff"? 255? – Heretic Monkey Commented Oct 1, 2019 at 12:28
Possible duplicate of RGB to Hex and Hex to RGB – Heretic Monkey Commented Oct 1, 2019 at 12:31

Add a comment |

4 Answers 4

Sorted by: Reset to default 9

There is no direct way to get the individual color values but it can be easily done manually.

function printColor(ev) {
  const color = ev.target.value
  const r = parseInt(color.substr(1,2), 16)
  const g = parseInt(color.substr(3,2), 16)
  const b = parseInt(color.substr(5,2), 16)
  console.log(`red: ${r}, green: ${g}, blue: ${b}`)
}

<input type="color" onchange="printColor(event)" value="#ff0000">

The value of a color input is always a seven character long hex color string, so there are no difficult edge cases.

This method work perfect already have in the top of this questions

<input type="color" onchange="printColor(event)">
  <script>
      function printColor(ev) {
          const color = ev.target.value
          const r = parseInt(color.substr(1, 2), 16)
          const g = parseInt(color.substr(3, 2), 16)
          const b = parseInt(color.substr(5, 2), 16)
          console.log(`red: ${r}, green: ${g}, blue: ${b}`)
          console.log([r, g, b])
          alert(`R: ${r}, G: ${g}, B: ${b}`)
      }
  </script>

Since you already have hexadecimal from node.value property, you just have to convert it to integer.

function pickRedInt(){
  var toread = document.getElementById('color_pick');
  console.log("Red Value - "+parseInt("0x"+toread.value.slice(1,3)));
}

pickRedInt();

Try changing this:
<hr>
<input id="color_pick"type="color" value="#ff0000" onchange="pickRedInt()">

<!DOCTYPE html>
<html>
<head>
    <title>Get RGB color Code From Hex Code</title>
</head>
<body>

<input type="color" id="choose-color" />

<script>
    var choose_color = document.getElementById("choose-color");
    choose_color.onchange = function(){
        var hex_code = this.value.split("");
        var red = parseInt(hex_code[1]+hex_code[2],16);
        var green = parseInt(hex_code[3]+hex_code[4],16);
        var blue = parseInt(hex_code[5]+hex_code[6],16);
        var rgb = red+","+green+","+blue;
        alert(rgb);
    }
</script>
</body>
</html>

Check it here - https://jaischool.com/javascript-lang/convert-hex-code-in-rgb-color-format.html

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - HTML5 input type Color read single RGB values - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)