CODEWITHSUNDEEP
javascriptjqueryhex
Laere
Laere

Reputation: 132

Turning numbers to hex values, but make them double digits

Problem: I am building a drawing board app that uses a number to hex converter function. Right now they only return single digits for certain conversions.

EXAMPLE: r:0,g:0, b:0 returns #000, and not #000000. I believe this is why I can't get my colors to update properly, and only values will work.

Desired Result: I want my numbers to be converted to double digits. So R:0,G:0,B:) would convert to #000000 and not #000, although they're the same thing, other colors rely on double digits, from my understanding. Basically I want all my number to hex conversions to be 6 digits.

[SOLVED]: Changed the way of getting my values to css's rgb(r,g,b) instead of using hex values.

JSBIN http://jsbin.com/doqiwocufa/edit?html,css,js,console,output

Javascript:

var $red = 0;

function changeRedNumboxValue(value) {
    var $numBox = $('#redNumber');
    $red = value;
    $numBox.val($red);
  
    console.log($red);
}

function changeRedSliderVal(value) {
    var $slider = $('#red');
    $red = value;
    $slider.val($red);
  
    console.log($red);
}

var $green = 0;

function changeGreenNumboxValue(value) {
    var $numBox = $('#greenNumber');
    $green = value;
    $numBox.val($green);
  
    console.log($green);
}

function changeGreenSliderVal(value) {
    var $slider = $('#green');
    $green = value;
    $slider.val($green);
  
    console.log($green);
}

var $blue = 0;

function changeBlueNumboxValue(value) {
    var $numBox = $('#blueNumber');
    $blue = value;
    $numBox.val($blue);
  
    console.log($blue);

}

function changeBlueSliderVal(value) {
    var $slider = $('#blue');
    $blue = value;
    $slider.val($blue);
  
    console.log($blue);
}

//CONVERT RGB TO HEX
function rgbToHex() {
    $hexRed = $red.toString(16);
    $hexGreen = $green.toString(16);
    $hexBlue = $blue.toString(16);
  
    console.log($hexRed);
    console.log($hexGreen);
    console.log($hexBlue);
  
    return '#' + $hexRed + $hexGreen + $hexBlue;
}

//UPDATE COLOR BASED ON HEX VALUES
function updateColor() {
    $colorChosen = $('#color-chosen');
    $color = rgbToHex();
    $colorChosen.css('background-color', $color);
}

updateColor();

HTML:

<!DOCTYPE html>
<html>
   <head>
      <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
   </head>
   <body>
      <span>Blue</span>
      <input id="red" type="range" name="amount2" value="0" min="0" max="255" oninput="changeNumboxValue(this.value)">
      <input id="redNumber" type="number" name="amountInput2" value="0" min="0" max="255" oninput="changeSliderVal(this.value)">
   </body>
</html>

CSS:

#color-chosen {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

Upvotes: 0

Views: 500

Answers (2)

Simply Me
Simply Me

Reputation: 1587

Actually, the #ABC will be interpreted as #AABBCC. If you use only 3 numbers in hexa, the color code for it will be twice the first letter, twice the second and twice the third. This means that #000 is the same with #000000. For other colors, you might need r:AB, etc. In this case, g, b need to be in two letters.

I think that this is your problem. Sometimes you get 1 letter for a color and 2 for other colors resulting into a 5 hexa numbers conversion.

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386570

You need some padding with 0 and cut the string with String.prototype.slice():

The slice() method extracts a section of a string and returns a new string.

 $hexRed = ('0' +  $red.toString(16)).slice(-2);

Upvotes: 2

Related Questions