search

d3 / d3-color

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

Unexpected conversion to HSL #83

Closed denis-sokolov closed 2 years ago

denis-sokolov commented 3 years ago

Convertion to HSL gives unexpected results. Consider:

import { hcl } from "d3-color";
const c = hcl(200, 100, 150);
console.log(c.formatHex());
console.log(c.formatRgb());
console.log(c.formatHsl());

Actual output in Chrome 86 on Mac:

#00ffff
rgb(0, 255, 255)
hsl(180.380573958081, -163.7644455443205%, -293.13231330226415%)

The hex and rgb notations are the same color: bright cyan. The HSL notation is different. The documentation also says the saturation and lightness values are clamped to the interval of 0-100, but they are not. Do I misunderstand how non-displayable colors are converted or is there a bug in the hsl converstion here?

Here’s another way to look at this:

const a = rgb(0, 255, 255);
const b = rgb(hcl(200, 100, 150));
a.formatRgb(); // rgb(0, 255, 255)
b.formatRgb(); // rgb(0, 255, 255)
a.formatHsl(); // hsl(180, 100%, 50%)
b.formatHsl(); // hsl(180.380573958081, -163.7644455443205%, -293.13231330226415%)