toString return complete hex color

[HeiShuXianSheng]

how about a feature:
new Color('red').toString({ format: 'hex' }); // #f00
add option to return #ff0000:
eg: new Color('red').toString({ format: 'hex', complete: true }); // #ff0000

[LeaVerou]

We wouldn't be adding a separate option just to customize a format, but we should add something like format: "hex6", I've needed this too (for <input type="color"> in my case, but many places expect 6 digits)

[LeaVerou]

@svgeesus We should brainstorm about the name of this format (hex6? hex_6? hex_full? something else?), but the actual code changes should be very simple. I'll leave this open for a bit in case a new contributor wants to pick it up for their first PR.

[svgeesus]

hex6 seems good because CSS Color 4 defines 3, 4, 6 and 8-digit hexadecimal forms and that naming allows all of them to be conveniently specified, eventually. (The 3 and 4 digit forms are lossy for most colors).

[LeaVerou]

@svgeesus The current "hex" format returns either 3, 4, 6, or 8 digit hex depending on whether alpha exists and whether there is an equivalent 3 or 4 digit hex. I guess this new format would return 4 or 8 characters (authors can always override alpha to get 6), so that would actually be a good argument for hex_full or something along these lines.

[jamesnw]

It looks like this is already possible by passing in collapse: false-

let color = new Color("red").toString({format: 'hex', collapse: false})
// "#ff0000"

I'll defer to you all on whether this should be documented as is, or implemented in another way.

[LeaVerou]

Yes, I think I implemented that after this issue and forgot to close it! Still needs docs tho so maybe it should stay open.

[svgeesus]

On the one hand, 'hex6' seems way easier to remember but on the other hand, a bird in the implementation is worth two in the ToDo. Or something. So, if there is a way to get there, adding documentation is easier.

[LeaVerou]

On the one hand, 'hex6' seems way easier to remember but on the other hand, a bird in the implementation is worth two in the ToDo. Or something. So, if there is a way to get there, adding documentation is easier.

Also, it's not always 6 characters. If you have alpha, it's 8.

[doiali]

It looks like this is already possible by passing in collapse: false-

let color = new Color("red").toString({format: 'hex', collapse: false})
// "#ff0000"
I'll defer to you all on whether this should be documented as is, or implemented in another way.

Thanks for mentioning it! I'm glad that I saw your comment! It should be documented or easier to find. Passing collapse: false covers my use case completely. But I had trouble finding the answer, as this was nowhere in the documents.

[LeaVerou]

It looks like this is already possible by passing in collapse: false-
let color = new Color("red").toString({format: 'hex', collapse: false})
// "#ff0000"
I'll defer to you all on whether this should be documented as is, or implemented in another way.

Thanks for mentioning it! I'm glad that I saw your comment! It should be documented or easier to find. Passing collapse: false covers my use case completely. But I had trouble finding the answer, as this was nowhere in the documents.

Agreed, we should definitely document this better! Where would you add it in the docs? Where did you look for it?

[svgeesus]

Agreed, we should definitely document this better! Where would you add it in the docs?

At minimum it should be added in Choose a specific output format as an example. But a complete, preferably autogenerated, list of all format options would be best, in addition to some more examples.

[doiali]

Agreed, we should definitely document this better! Where would you add it in the docs? Where did you look for it?

I looked in the Output section in the docs, by searching for hex. I expected to see something like this:

let lv_magenta = new Color("#ff0066");
lv_magenta.toString({
  format: "hex",
  precision: 6, // valid options: 3, 4, 6, 8 or undefiend (auto)
  collapse: true,
});
// use collapse or precision, not both

I agree with svgeesus. Adding more examples would help.

[LeaVerou]

@doiali Output makes sense. Any chance you may consider sending a PR? 🙏🏼 The Output section in the docs is here: https://github.com/color-js/color.js/blob/main/docs/output.md