Increase color hue

Question

Increase color hue

I have for example the following color in hex #FAC328 and would like, via code, to increase its hue to another 10% getting this way

Is it possible to do this via javascript?

1

javascript hexadecimal

Author: viana, 2019-05-07

Source

2 answers

score 2 · Answer 1

I set up this function that takes the HEX converts to DEC calculates the gain and converts again to HEX

hex -> without #

ganho -> percentage from 0 to 100

The return you can edit according to the need.

function ganho(hex, ganho) {
	var r = Number.parseInt(Number.parseInt(hex.substring(0,2), 16) * ((ganho / 100) + 1)).toString(16).padStart(2, '0');
	var g = Number.parseInt(Number.parseInt(hex.substring(2,4), 16) * ((ganho / 100) + 1)).toString(16).padStart(2, '0');
	var b = Number.parseInt(Number.parseInt(hex.substring(4,6), 16) * ((ganho / 100) + 1)).toString(16).padStart(2, '0');

	return r + g + b;
}

console.log(ganho('101010', 10));

score 0 · Answer 2

Using the filter brightness I got the following result.

const dark = document.getElementById("dark");

dark.addEventListener("click", function() {
  let div = document.createElement("div");

  div.style.filter = "brightness(95%)";
  document.body.append(div);
});

div {
  background-color: #FAC328;
  width: 100px;
  height: 50px;
  margin-bottom: 2px;
}

div:nth-child(2) {
  background-color: #E1AF24;
}

button {
  margin: 10px 0;
}

<div>#FAC328</div>
<div>#E1AF24</div>
<button id="dark">GENERATE</button>

The base value of 100% represents the current color of the element.