Question 44951 in Html Question posted in
Some basic documentation can be found here.

changing color with hex color value in javascript – Html

I’m a front-end beginner and want to create a project with javascript that makes a relationship between environmental parameters, like temperature, pressure, or everything with color; as those parameters change, the color changes. So I tried a simple project and create two buttons for getting the temperature up and down and a colored div to show the temperature change. As the temperature gets higher the color of the div goes to the red spectrum and as it gets lower, the color of the div goes to the blue spectrum like a color mixer in the w3schools site here and I used hex color values.
The problem is when I use hex values for color, the code doesn’t work but when I tried integer values for example for changing the height of the div when the buttons push and the value of the height gets up and down, it worked. so it has a problem with hex color values.
By the way, I searched for the same javascript projects like color slider, color gauge, or something and also searched the questions that were related to color changing in the stack, but was not helpful.

<html>
    <head>
         <style>
            #cool{
                background-color:lightblue;
                float:left;
            }
            
            #hot{
                background-color:red;
                float:right;
            }
            
            button{
                width:200px;
                height:100px;
                font-size:20pt;
            }
            
            #range{
                width:100%;
                height:50px;
                background-color:#ff0000;
            }
         </style>
    </head>
    
    <body>
        <div id="range">   </div>
        <button id="hot" type="button" onclick="tempUp()"> hot  </button>
        <button id="cool" type="button" onclick="tempDown()"> cool </button>
        
    </body>
    
    <script>
        var colorVal = [ff0000,b2004c,5900a6,0000ff]; //from red to blue
        var i = 0; //default value
        
        function tempUp(){
            if(i < 3){
                i++;
                document.getElementById('range').style.backgroundColor = colorVal[i];
            }
         }
         
         function tempDown(){
            if(i > 0){
                i--;
                document.getElementById('range').style.backgroundColor = colorVal[i];
            }
         }
    </script>
</html>

I tried converting hex color values to decimal but that didn’t work.

Tags:

3

Answers


  1. 0

    You’re really close! Just a couple of things:

    1. You have some errors in your colorVal array:
    • Your colorVal array is in the wrong order: As you increment with tempUp(), the index increases, but the colors are going from red –> blue – which is the opposite of what you want.
    • The hex values need the hex prefix #
    • They need to be enclosed with quotes for a string value

    This is a possible solution:

    var colorVal = ["#0000ff", "#5900a6", "#b2004c", "#ff0000"];

    This goes from blue –> red.

    1. Your starting i value starts at index 0, but should be at index 3 because the array order is now reversed. If you want, you can revert the array order from red –> blue, and keep the starting index at 0.

    Here’s a working snippet:

    var colorVal = ["#0000ff", "#5900a6", "#b2004c", "#ff0000"]; //from red to blue
var i = 3; //default value

function tempUp() {
  if (i < 3) {
    i++;
    document.getElementById('range').style.backgroundColor = colorVal[i];
  }
}

function tempDown() {
  if (i > 0) {
    i--;
    document.getElementById('range').style.backgroundColor = colorVal[i];
  }
}
    #cool {
  background-color: lightblue;
  float: left;
}

#hot {
  background-color: red;
  float: right;
}

button {
  width: 200px;
  height: 100px;
  font-size: 20pt;
}

#range {
  width: 100%;
  height: 50px;
  background-color: #ff0000;
}
    <body>
  <div id="range"> </div>
  <button id="hot" type="button" onclick="tempUp()"> hot  </button>
  <button id="cool" type="button" onclick="tempDown()"> cool </button>

</body>
    Login or Signup to reply.
  2. 0

    For this kind of use, the hexadecimal format is not the most suitable.
    You better use HSL, the color will be defined by the hue between 0 and 360° as below:
    colors hue
    For example, for a gauge from blue to red, you can move the hue from 225 to 0°

    Login or Signup to reply.
  3. 0

    If you want to use hex values, try this (although using directly decimal values doesn’t need base conversion):

    var current = "#ff0000"

/*set here how fast you want color to change*/
const increment = 12;


function increase(color, quantity) {
/*use a positive quantity to get hotter colors, negative for cooler*/

/*blue is too dark, so is mixed with some green, which is also a cool color*/

/*convert red and blue to decimal and increase*/
  let red = parseInt(color.substring(1,3),16) + quantity;
  let green = parseInt(color.substring(3,5),16) - parseInt(quantity/1.5);
  let blue = parseInt(color.substring(5,7),16) - quantity;

/*stop increasing when maximum is reached*/
  if (red > 255) {
    red = 255;
    green = 0;
    blue = 0;
  }
  if (red < 0) {
    red = 0;
    green = 170;
    blue = 255;
  }
  
/*convert result to hex*/
  red = red.toString(16);
  green = green.toString(16);
  blue = blue.toString(16);
  if(red.length==1) red='0'+red;
  if(green.length==1) green='0'+green;
  if(blue.length==1) blue='0'+blue;
  
  return "#" + red + green + blue;
}


function tempUp() {
/*update current color*/
  current
   = increase(current, increment);
/*update background*/
   document.getElementById('range').style.backgroundColor = current;
}


function tempDown() {
  /*update current color*/
  current
   = increase(current, -1*increment);
/*update background*/
   document.getElementById('range').style.backgroundColor = current;
}
    #cool{
                background-color:lightblue;
                float:left;
            }
            
            #hot{
                background-color:red;
                float:right;
            }
            
            button{
                width:200px;
                height:100px;
                font-size:20pt;
            }
            
            #range{
                width:100%;
                height:50px;
                background-color:#ff0000;
            }
    <html>
    <head>
    </head>
    <body>
        <div id="range">   </div>
        <button id="hot" type="button" onclick="tempUp()"> hot  </button>
        <button id="cool" type="button" onclick="tempDown()"> cool </button>
        
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search