Lo que intento Extraigo de una API que obtiene un número entre 1 y 32. Intento convertir ese retorno en un determinado color de fondo, que va del verde al rojo, para bien y para mal, respectivamente. Básicamente, si el número que regresa es 32, el fondo se vuelve rojo brillante, mientras que si es 1, regresa verde brillante.
lo que he probado
Aquí está el Código actualmente.
function colorChange(x) { let y = x.substring(0, x.length - 2); <<<----THIS IS TO TAKE THE NUMBER FROM 32ND TO JUST 32. let z = y / 2 return "#" + z+z+z } <div className="team-stat" style={{backgroundColor: colorChange(teamStats.stats[1].splits[0].stat.pts)}} > <h4>Points:</h4> <h1>{teamStats.stats[0].splits[0].stat.pts}</h1> <h3>Rank: {teamStats.stats[1].splits[0].stat.pts}</h3> </div>Actualmente, en el código, estoy llamando a una API que da como resultado un resultado del 1 al 32. Ya eliminé los dos últimos caracteres, por lo que no se incluyen ni th ni nd. Me las arreglé para que devuelva básicamente un código hexadecimal de # 171717, pero el rango actual va de negro a un poco menos negro. Con los códigos hexadecimales convirtiéndose en letras, estoy un poco perplejo sobre cómo proceder. Cualquier ayuda es apreciada, y con gusto aclararé cualquier malentendido.
Utilice el modelo HSLA para el color de fondo. Luego cambie el primer parámetro (tono) según su valor de 1 a 32 multiplicado por 3,75 (120/32)
Aquí hay un ejemplo: https://codepen.io/akost/pen/ZEJWZVx
<script> let list=''; for(let i = 1; i <= 32; i++) { let h = i*3.75; // we need hue values from 0 to 120 let row = `<div style='background:hsla(${h}, 100%, 50%, 1)'></div>`; list += row; } document.getElementById('foo').innerHTML = list; </script> <style> #foo div { width:100px; height:10px; border-bottom:solid 1px #fff; } </style> <div id="foo"></div>Puede usar rgb() para el color de fondo y luego escalar los valores rojo y verde según el valor x . Suponiendo que 32 es el más verde, algo como:
function colorChange(x) { ... const maxPossibleScore = 32; const individualPointValue = 255 / maxPossibleScore; return { red: 255 - individualPointValue * x, green: individualPointValue * x } } const colors = colorChange(10); style={{backgroundColor: `rgb(${colors.red}, ${colors.green}, 0)`}}Esto no responde a su pregunta directamente usando hexadecimal, pero en teoría podría colocar una traducción de decimal a hexadecimal y obtener el resultado hexadecimal que está buscando.