Format toString as hex if original string was hex?

[maybebansky]

I need to do these steps:

• Create a color object from a string.
• Do some manipulations on the color object.
• Return a CSS valid string of the color object in the same format as the original string.

Here is a simplified example: https://codesandbox.io/p/sandbox/wandering-browser-forked-z5yg57?file=%2Fsrc%2FApp.js%3A2%2C1-29%2C1

import ColorJs from "colorjs.io";

function Foo({ color }) {
  const colorObj = new ColorJs(color);
  const sRgb = colorObj.to("srgb").toString();
  const space = colorObj.space.id;
  const res = colorObj.to(space).toString();

  return (
    <div style={{ marginBottom: 20 }}>
      <div>Original: {color}</div>
      <div>sRgb: {sRgb}</div>
      <div>Space: {space}</div>
      <div>Result: {res}</div>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Foo color={"rgba(209, 213, 218, 0.5)"} />
      <Foo color={"hsl(210, 100%, 38%)"} />
      <Foo color={"oklch(59.69% 0.156 49.77)"} />
    </div>
  );
}

This works unless you pass a hex value eg #ef9700. If you do the returned string is rgb not hex.

I've got a workaround by checking if the string starts with "#" and specifying the hex format if it does.

https://codesandbox.io/p/sandbox/wandering-browser-5nfp73?file=%2Fsrc%2FApp.js%3A2%2C1-33%2C2

import ColorJs from "colorjs.io";

function Foo({ color }) {
  const colorObj = new ColorJs(color);
  const sRgb = colorObj.to("srgb").toString();
  const space = colorObj.space.id;
  const isHex = space === "srgb" && color.startsWith("#");
  const res = colorObj
    .to(space)
    .toString({ format: isHex ? "hex" : undefined });

  return (
    <div style={{ marginBottom: 20 }}>
      <div>Original: {color}</div>
      <div>sRgb: {sRgb}</div>
      <div>ID: {space}</div>
      <div>Result: {res}</div>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Foo color={"#ef9700"} />
      <Foo color={"rgba(209, 213, 218, 0.5)"} />

      <Foo color={"hsl(210, 100%, 38%)"} />
      <Foo color={"oklch(59.69% 0.156 49.77)"} />
    </div>
  );
}

Is this the correct approach? I was wondering if the library can handle this without the need for a workaround.

[facelessuser]

I think your approach is fine. And to answer your question, Color.js does not currently track or care about how a color was serialized before parsing, so there is currently no way to extract that information from the color object (that I am aware of).

It may be possible to gain insight on how a color was serialized by digging into the parsing function of the library, or simply by doing what you are already doing. CSS only has a couple of serialization approaches: hex, color(), and namedfunctions(), so it is fairly easy to check manually.

[LeaVerou]

parse() already accepts a meta option, which is an object that will receive metadata about the parsing. One of them is formatId, which would be "hex" for a hex color.

[LeaVerou]

I opened this as I ran into a similar issue myself: #515