1

Tenho por exemplo a seguinte cor em hex #FAC328 e gostaria, via código, de aumentar sua tonalidade para mais 10% ficando desta maneira

inserir a descrição da imagem aqui

É possível fazer isso via javascript?

4
  • Meu aumento de 20% foi de #E1AF24 para #FFD22B, como você fez a conta capa esse aumento? Commented 7/05/2019 às 14:19
  • Não seria mais fácil trabalhar com cores RGB e converter depois para hexadecimal, sendo assim mais facil calcular as tonalidades? Commented 7/05/2019 às 14:29
  • Leonardo me desculpa, mais na verdade é 10% vo editar rs Commented 7/05/2019 às 14:29
  • @VictorLaio já tentei mas não obtive sucesso via rgb Commented 7/05/2019 às 14:32

2 Respostas 2

2

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));

1
  • Já consegui entender a logica, obrigado, seu code da um retorno diferente do resultado esperado, mas consegui resolver seguindo o post que o Victor passou, de qualquer forma é a mesma logica, obrigado pela ajuda :D Commented 7/05/2019 às 15:56
0

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.

3
  • boa solução, porém é possível eu conseguir pegar o resultado da cor gerada? pois no meu caso eu preciso descobrir a cor hexadecimal. Commented 7/05/2019 às 14:48
  • 1
    Eu procurei por uma solução e acredito que está é o exatamente o que está procurando: stackoverflow.com/questions/5560248/… Commented 7/05/2019 às 15:11
  • lá tem algumas idéias sim, consegui resolve obrigado! Commented 7/05/2019 às 15:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .