[color engine] Assign hue = NaN for grayscale when generating HSL

src/color/__tests__/hsl.spec.ts

@@ -56,13 +56,24 @@ describe('hsl', () => {
     expect(hsl('hsla(240, 50%, 50%, 10)')).toHaveProperty('a', 1)
   })
 
-  values = ['#FF33CC99', 'rgba(255, 51, 204, 0.6)', 'rgb(100% 20% 80% / 60%)']
+  values = [
+    '#FF33CC',
+    '#FF33CCFF',
+    'rgb(255, 51, 204)',
+    'rgba(255, 51, 204, 1.0)',
+    'rgb(100% 20% 80% / 100%)',
+  ]
   values.forEach(color => {
     it(`converts values from RGB string: ${color}`, () => {
-      expect(hsl(color)).toEqual({ h: 315, s: 100, l: 60, a: 0.6 })
+      expect(hsl(color)).toEqual({ h: 315, s: 100, l: 60, a: 1 })
     })
   })
 
+  it('converts CSS color names/keywords into HSL', () => {
+    expect(hsl('blue')).toEqual({ h: 240, s: 100, l: 50, a: 1 })
+    expect(hsl('transparent')).toEqual({ h: NaN, s: 0, l: 0, a: 0 })
+  })
+
   it('returns null if not a valid color string', () => {
     expect(hsl('foo')).toBeNull()
   })

src/color/__tests__/rgb.spec.ts

@@ -59,9 +59,12 @@ describe('rgb', () => {
     expect(rgb('rgb(255, 255, 0, 10)')).toHaveProperty('a', 1)
   })
 
-  it('returns RGB values from CSS color names/keywords', () => {
+  it('returns RGB values from CSS color names', () => {
     expect(rgb('blue')).toEqual({ r: 0, g: 0, b: 255, a: 1 })
     expect(rgb('yellow')).toEqual({ r: 255, g: 255, b: 0, a: 1 })
+  })
+
+  it('treats the `transparent` keyword as black with zero opacity', () => {
     expect(rgb('transparent')).toEqual({ r: 0, g: 0, b: 0, a: 0 })
   })
 

src/color/transforms/__tests__/rgbToHsl.spec.ts

@@ -7,15 +7,23 @@ describe('rgbToHsl', () => {
     blue: { r: 0, g: 0, b: 255, a: 1 },
     white: { r: 255, g: 255, b: 255, a: 1 },
     black: { r: 0, g: 0, b: 0, a: 1 },
+    gray: { r: 128, g: 128, b: 128, a: 1 },
     palegreen: { r: 152, g: 251, b: 152, a: 1 },
   }
 
   it('converts {r,g,b} object to {h,s,l}', () => {
     expect(rgbToHsl(rgb.red)).toEqual({ h: 0, s: 100, l: 50, a: 1 })
     expect(rgbToHsl(rgb.green)).toEqual({ h: 120, s: 100, l: 50, a: 1 })
     expect(rgbToHsl(rgb.blue)).toEqual({ h: 240, s: 100, l: 50, a: 1 })
-    expect(rgbToHsl(rgb.white)).toEqual({ h: 0, s: 0, l: 100, a: 1 })
-    expect(rgbToHsl(rgb.black)).toEqual({ h: 0, s: 0, l: 0, a: 1 })
+  })
+
+  it('assigns a hue value of NaN (to mean "powerless") in grayscale', () => {
+    expect(rgbToHsl(rgb.white).h).toBeNaN()
+    expect(rgbToHsl(rgb.black).h).toBeNaN()
+    expect(rgbToHsl(rgb.gray).h).toBeNaN()
+  })
+
+  it('does NOT round off saturation and lightness into integer', () => {
     const paleGreen = rgbToHsl(rgb.palegreen)
     expect(paleGreen.h).toBe(120)
     expect(paleGreen.s).toBeCloseTo(92.52)

src/color/transforms/rgbToHsl.ts

@@ -20,7 +20,7 @@ export default function rgbToHsl(rgb: RGB): HSL {
   const d = max - min
   const light = (min + max) / 2
 
-  let hue = 0 // in official algo, default ("powerless") hue is NaN
+  let hue = NaN // "powerless" h-value is represented here as NaN
   let sat = 0
 
   if (d !== 0) {