Tenho por exemplo a seguinte cor em hex #FAC328
e gostaria, via código, de aumentar sua tonalidade para mais 10% ficando desta maneira
É possível fazer isso via javascript?
Montei essa função que pega o HEX converte em DEC calcula o ganho e converte novamente em HEX
hex
-> sem o #
ganho
-> percentual de 0 a 100
o retorno você pode editar de acordo com a necessidade.
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));
Utilizando o filtro brightness
eu obtive o seguinte resultado.
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>
O valor base de 100% representa a cor atual do elemento.
#E1AF24
para#FFD22B
, como você fez a conta capa esse aumento?