Add formatHex8() to include opacity

[rben01]

To reproduce:

console.log(d3.color("#fff1").formatRgb());  // rgba(255, 255, 255, 0.06666666666666667)
console.log(d3.color("#fff1").formatHex());  // #ffffff <-- shouldn't this be #ffffff11?

I'd expect that formatHex would preserve opacity just as formatRgb does; however, opacity is clearly ignored in the function definition

d3-color/src/color.js

Line 266 in e87dc62

function rgb_formatHex() {

[curran]

Nice catch!

[danburzo]

I believe formatHex() is supposed to be a widely-compatible string representation of the color. 8-char hex notation does not benefit from the same support (e.g. Edge only gained it after switching to Chromium), so maybe a formatHex8() is more suitable?

[Fil]

Agree with @danburzo that we should add formatHex8 and not change formatHex which is documented as "in RGB space".

[jasonwilliams]

shameless bump

[danburzo]

Another usecase for formatHex() to maintain its current implementation is that the HTML <input type='color'> only accepts 6-digit hex as a color format.

[jasonwilliams]

Another usecase for formatHex() to maintain its current implementation is that the HTML <input type='color'> only accepts 6-digit hex as a color format.

That’s fine, but an API that can do alpha would be useful, formatHex8 or something. I’m not too bothered if it can’t be this API as long as it’s supported somewhere.

maybe this issue should be changed to a feature request for that instead?

[mootari]

• What happens if opacity is outside [0..1]? Should the hex value be clamped to [0..255]?
• How should the float value be coerced? Via round() or floor()?

Edit: The answers are "yes" and "round".

d3-color/src/color.js

Lines 279 to 282 in 7d61bbe

	function hex(value) {
	value = Math.max(0, Math.min(255, Math.round(value) || 0));
	return (value < 16 ? "0" : "") + value.toString(16);
	}