how do i use HSL colors in react inline-styles?

Question

How do I use a hsl color range in react for inline styles? I'm passing the below as a property to style

{backgroundColor: "hsl(100, 80%, 100%)", color: "black"}

but instead I just get an rgb like this when I inspect the element:

style="background-color: rgb(255, 255, 255); color: black;"

the code snippet is like:

const colorPill = (sim) => {
    const sat = Math.round(sim.use * 100) // map
    const pillStyle = {
        backgroundColor: `hsl(100, ${sat}%, 100%)`,
        color: 'black'
    }
    console.log('pillStyle', pillStyle)
    return (<span className='pill' style={pillStyle}>use [{sat}]</span>)
}

btw I'm trying to do something like a heatmap where an item will get redder based on a percentage value passed in. perhaps there's an easier way to do this... but without bringing in lots of packages...

references:

• https://reactjs.org/docs/faq-styling.html
• https://reactjs.org/docs/dom-elements.html#style

Answer 1

It's becoming white because the luminosity is set to 100%. For a 'pure' color, set the last number to 50%

{backgroundColor: "hsl(100, 80%, 50%)", color: "black"}

I was stuck on the same thing for far longer than I should have been. I am leaving this awnser since none of the comments really helped me realize what i was doing wrong

Answer 2

<div 
style={{ 
  backgroundColor: `hsla(
                     ${hue}, 
                     ${saturation (*100 if btw 0 and 1)}% , 
                     ${light (*100 if btw 0 and 1)}%, 
                     ${alpha})` 
}}
...
</div>

you can use hsla values in inline style as show above