d3-color icon indicating copy to clipboard operation
d3-color copied to clipboard

d3.rgb doesn't parse HSL hues with `deg` units

Open harveylee opened this issue 2 years ago • 1 comments

d3.rgb('hsl(120deg, 100%, 50%)') => rgb(0, 0, 0) d3.rgb('hsl(120, 100%, 50%)') => rgb(0, 255, 0)

See https://codesandbox.io/s/d3-color-rgb-not-accept-deg-9v8oqm for a repro

CSS Color Module Level 3 is a little unclear but seems to indicate that only plain numbers are allowed for hues because the units are implied.

HSL colors are encoding as a triple (hue, saturation, lightness). Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is so typically measured in degrees that the unit is implicit in CSS; syntactically, only a is given.

The CSS Color Module Level 4 specifies that hues can be plain numbers or angles (with units like deg and rad).

Hue is represented as an angle of the color circle (the rainbow, twisted around into a circle, and with purple added between violet and red). <hue> = <number> | <angle> | none Because this value is so often given in degrees, the argument can also be given as a number, which is interpreted as a number of degrees.

and

Angle values are <dimension>s denoted by <angle>. The angle unit identifiers are:

deg Degrees. There are 360 degrees in a full circle. grad Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle. rad Radians. There are 2π radians in a full circle. turn Turns. There is 1 turn in a full circle.

For example, a right angle is 90deg or 100grad or 0.25turn or approximately 1.57rad.

harveylee avatar Jun 17 '22 05:06 harveylee

#71

mbostock avatar Jun 17 '22 06:06 mbostock