Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
harveylee opened this issue Jun 17, 2022 · 1 comment
Open

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

harveylee opened this issue Jun 17, 2022 · 1 comment

Comments

@harveylee
Copy link

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
Copy link
Member

#71

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants