d3 / d3-color

Color spaces! RGB, HSL, Cubehelix, CIELAB, and more.
https://d3js.org/d3-color
ISC License
398 stars 91 forks source link

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

Open harveylee opened 2 years ago

harveylee commented 2 years ago

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.

mbostock commented 2 years ago

71