React - How to display HEX color instead of RGB in inline style?

Question

I have saved HEX color in useState.

The problem is that the RGB color is displayed in the resulting HTML.

For example: I put the same use state in the DIV and also as the font color in the inline style.

import React, { useState } from "react";

const Module = () => {
  const [color, setColor] = useState("#bada55");

  return <div style={{ color: `${color}` }}>{color}</div>;
};

export default Module;

The result is like this. But why? I only need to display the color in HEX format at all times. How to do it?

<div style="color: rgb(186, 218, 85);">#bada55</div>

Thanks for any advice!

Answer 1

I think this is not a react thing, but a browser behavior if you took a look at the spec

it says: the computed value will be in rgba(). If it isn't, it will be computed to rgb().

so, it is standard behavior and, if you use hex it will be computed back to rgba.

maybe you can use color name instead hex-color: developer.mozilla.org/en-US/docs/Web/CSS/color_value