feat: add support for conversion between CSS named colors (#10)

- Create the cssNamedColors.js module to handle and store the CSS named colors and some helpers functions - Add computeColorDistance inside conversion.js module to calculate the Euclidean between two RGB colors - Add rgbToNamedColor inside conversion.js module to handle conversion of RGB color to its nearest CSS named color - Update the serialize.js module to handle CSS named colors - Add unit tests for rgbToNamedColor inside convertion.spec.js - Add unit tests for parsing CSS named color inside serializer.spec.js - Add method Colorus.toNamed() to convert into CSS named color in Colorus class - Add type definitions for Colorus.toNamed() method in main.d.ts
supitsdu · Jun 10, 2024 · 3e5b6a2 · 3e5b6a2
1 parent 5b01531
commit 3e5b6a2
Show file tree

Hide file tree

Showing 7 changed files with 255 additions and 3 deletions.
diff --git a/@types/main.d.ts b/@types/main.d.ts
@@ -160,6 +160,16 @@ declare module 'colorus-js' {
      */
     toCmyk(options?: FormatOptions): string
 
+    /**
+     * Convert the current color to the nearest CSS named color.
+     * @see https://www.w3.org/TR/css-color-4/#named-colors
+     * @returns The nearest CSS named color.
+     * @example
+     * const color = new Colorus('#f00')
+     * color.toNamed() // Returns: 'red'
+     */
+    toNamed(): string
+
     /**
      * Mixes the current color with another color.
      * @param input The color to mix with.

diff --git a/src/conversion.js b/src/conversion.js
@@ -1,6 +1,37 @@
+import CSSNamedColors from './cssNamedColors'
 import { Clamp, Round, eightBit } from './colorNormalizer'
 import { hexString } from './helpers'
 
+/**
+ * Calculates the Euclidean distance between two RGB colors.
+ * @param {object} primary - The first RGB color string.
+ * @param {object} secondary - The second RGB color string.
+ * @return {number} The distance between the two colors.
+ */
+export const computeColorDistance = ({ r: r1, g: g1, b: b1 }, { r: r2, g: g2, b: b2 }) =>
+  Math.sqrt(Math.pow(r1 - r2, 2) + Math.pow(g1 - g2, 2) + Math.pow(b1 - b2, 2))
+
+/**
+ * Converts RGB values to the nearest CSS named color.
+ * @param {object} color - The RGB color object.
+ * @return {string} The name of the color.
+ */
+export function rgbToNamedColor({ r, g, b }) {
+  let closestColor = undefined
+  let shortestDistance = Infinity
+
+  for (const [name, color] of Object.entries(CSSNamedColors.colors)) {
+    const distance = computeColorDistance({ r, g, b }, hexToRgb(color))
+
+    if (distance < shortestDistance) {
+      shortestDistance = distance
+      closestColor = name
+    }
+  }
+
+  return closestColor
+}
+
 /**
  * Calculates the hue component of an HSV color object.
  * @param {object} rgb - An RGB color object.

diff --git a/src/cssNamedColors.js b/src/cssNamedColors.js
@@ -0,0 +1,161 @@
+const CSSNamedColors = {
+  colors: {
+    aliceblue: 'f0f8ff',
+    antiquewhite: 'faebd7',
+    aqua: '00ffff',
+    aquamarine: '7fffd4',
+    azure: 'f0ffff',
+    beige: 'f5f5dc',
+    bisque: 'ffe4c4',
+    black: '000000',
+    blanchedalmond: 'ffebcd',
+    blue: '0000ff',
+    blueviolet: '8a2be2',
+    brown: 'a52a2a',
+    burlywood: 'deb887',
+    cadetblue: '5f9ea0',
+    chartreuse: '7fff00',
+    chocolate: 'd2691e',
+    coral: 'ff7f50',
+    cornflowerblue: '6495ed',
+    cornsilk: 'fff8dc',
+    crimson: 'dc143c',
+    cyan: '00ffff',
+    darkblue: '00008b',
+    darkcyan: '008b8b',
+    darkgoldenrod: 'b8860b',
+    darkgray: 'a9a9a9',
+    darkgreen: '006400',
+    darkgrey: 'a9a9a9',
+    darkkhaki: 'bdb76b',
+    darkmagenta: '8b008b',
+    darkolivegreen: '556b2f',
+    darkorange: 'ff8c00',
+    darkorchid: '9932cc',
+    darkred: '8b0000',
+    darksalmon: 'e9967a',
+    darkseagreen: '8fbc8f',
+    darkslateblue: '483d8b',
+    darkslategray: '2f4f4f',
+    darkslategrey: '2f4f4f',
+    darkturquoise: '00ced1',
+    darkviolet: '9400d3',
+    deeppink: 'ff1493',
+    deepskyblue: '00bfff',
+    dimgray: '696969',
+    dimgrey: '696969',
+    dodgerblue: '1e90ff',
+    firebrick: 'b22222',
+    floralwhite: 'fffaf0',
+    forestgreen: '228b22',
+    fuchsia: 'ff00ff',
+    gainsboro: 'dcdcdc',
+    ghostwhite: 'f8f8ff',
+    gold: 'ffd700',
+    goldenrod: 'daa520',
+    gray: '808080',
+    green: '008000',
+    greenyellow: 'adff2f',
+    grey: '808080',
+    honeydew: 'f0fff0',
+    hotpink: 'ff69b4',
+    indianred: 'cd5c5c',
+    indigo: '4b0082',
+    ivory: 'fffff0',
+    khaki: 'f0e68c',
+    lavender: 'e6e6fa',
+    lavenderblush: 'fff0f5',
+    lawngreen: '7cfc00',
+    lemonchiffon: 'fffacd',
+    lightblue: 'add8e6',
+    lightcoral: 'f08080',
+    lightcyan: 'e0ffff',
+    lightgoldenrodyellow: 'fafad2',
+    lightgray: 'd3d3d3',
+    lightgreen: '90ee90',
+    lightgrey: 'd3d3d3',
+    lightpink: 'ffb6c1',
+    lightsalmon: 'ffa07a',
+    lightseagreen: '20b2aa',
+    lightskyblue: '87cefa',
+    lightslategray: '778899',
+    lightslategrey: '778899',
+    lightsteelblue: 'b0c4de',
+    lightyellow: 'ffffe0',
+    lime: '00ff00',
+    limegreen: '32cd32',
+    linen: 'faf0e6',
+    magenta: 'ff00ff',
+    maroon: '800000',
+    mediumaquamarine: '66cdaa',
+    mediumblue: '0000cd',
+    mediumorchid: 'ba55d3',
+    mediumpurple: '9370db',
+    mediumseagreen: '3cb371',
+    mediumslateblue: '7b68ee',
+    mediumspringgreen: '00fa9a',
+    mediumturquoise: '48d1cc',
+    mediumvioletred: 'c71585',
+    midnightblue: '191970',
+    mintcream: 'f5fffa',
+    mistyrose: 'ffe4e1',
+    moccasin: 'ffe4b5',
+    navajowhite: 'ffdead',
+    navy: '000080',
+    oldlace: 'fdf5e6',
+    olive: '808000',
+    olivedrab: '6b8e23',
+    orange: 'ffa500',
+    orangered: 'ff4500',
+    orchid: 'da70d6',
+    palegoldenrod: 'eee8aa',
+    palegreen: '98fb98',
+    paleturquoise: 'afeeee',
+    palevioletred: 'db7093',
+    papayawhip: 'ffefd5',
+    peachpuff: 'ffdab9',
+    peru: 'cd853f',
+    pink: 'ffc0cb',
+    plum: 'dda0dd',
+    powderblue: 'b0e0e6',
+    purple: '800080',
+    rebeccapurple: '663399',
+    red: 'ff0000',
+    rosybrown: 'bc8f8f',
+    royalblue: '4169e1',
+    saddlebrown: '8b4513',
+    salmon: 'fa8072',
+    sandybrown: 'f4a460',
+    seagreen: '2e8b57',
+    seashell: 'fff5ee',
+    sienna: 'a0522d',
+    silver: 'c0c0c0',
+    skyblue: '87ceeb',
+    slateblue: '6a5acd',
+    slategray: '708090',
+    slategrey: '708090',
+    snow: 'fffafa',
+    springgreen: '00ff7f',
+    steelblue: '4682b4',
+    tan: 'd2b48c',
+    teal: '008080',
+    thistle: 'd8bfd8',
+    tomato: 'ff6347',
+    turquoise: '40e0d0',
+    violet: 'ee82ee',
+    wheat: 'f5deb3',
+    white: 'ffffff',
+    whitesmoke: 'f5f5f5',
+    yellow: 'ffff00',
+    yellowgreen: '9acd32'
+  },
+  pattern: {}
+}
+
+CSSNamedColors.pattern.lastIndex = 0
+CSSNamedColors.pattern.exec = input => {
+  const match = CSSNamedColors.colors[input]
+  return match != undefined ? [match] : null
+}
+
+export default CSSNamedColors
diff --git a/src/main.js b/src/main.js
@@ -110,6 +110,12 @@ export class Colorus {
    */
   toCmyk = options => new ColorFormatter(options).cmyk(this.cmyk)
 
+  /**
+   * Converts the current color to its nearest CSS named color representation.
+   * @return {string} The CSS named color.
+   */
+  toNamed = () => conversion.rgbToNamedColor(this.rgb)
+
   /**
    * Mixes the current color with another color.
    * @param {string|Object} input - The color to mix with.
@@ -200,3 +206,5 @@ export class Colorus {
     return new Colorus(compose.rgbToGray(this.rgb, useNTSCFormula))
   }
 }
+
+// console.log(new Colorus('aliceblue').rgb)
diff --git a/src/serialize.js b/src/serialize.js
@@ -1,5 +1,6 @@
 import { Clamp } from './colorNormalizer'
 import { cmykToRgb, hexToRgb, hslToRgb, hsvToRgb } from './conversion'
+import CSSNamedColors from './cssNamedColors'
 import { isCmykObject, isHslObject, isHsvObject, isRgbObject, nao, padString } from './helpers'
 
 const colorPatterns = [
@@ -10,15 +11,17 @@ const colorPatterns = [
   [
     'cmyk',
     /^cmyka?\(\s*(\d{1,3})%?(?:\s*\,\s*|\s+)(\d{1,3})%?(?:\s*\,\s*|\s+)(\d{1,3})%?(?:\s*\,\s*|\s+)(\d{1,3})%?(?:\s*(?:\,|\/)\s*(0?\.\d+|1|0))?\s*\)$/iy
-  ]
+  ],
+  ['named', CSSNamedColors.pattern]
 ]
 
 const colorParsers = {
   hex: match => hexToRgb(padString(match[1])),
   rgb: match => ({ r: Number(match[1]), g: Number(match[2]), b: Number(match[3]), a: Number(match[4]) || 1 }),
   hsl: match => ({ h: Number(match[1]), s: Number(match[2]), l: Number(match[3]), a: Number(match[4]) || 1 }),
   hsv: match => ({ h: Number(match[1]), s: Number(match[2]), v: Number(match[3]), a: Number(match[4]) || 1 }),
-  cmyk: match => ({ c: Number(match[1]), m: Number(match[2]), y: Number(match[3]), k: Number(match[4]), a: Number(match[5]) || 1 })
+  cmyk: match => ({ c: Number(match[1]), m: Number(match[2]), y: Number(match[3]), k: Number(match[4]), a: Number(match[5]) || 1 }),
+  named: match => hexToRgb(match[0])
 }
 
 const colorSerializers = {

diff --git a/test/conversion.spec.js b/test/conversion.spec.js
@@ -1,4 +1,4 @@
-import { rgbToHex, hexToRgb, hslToHsv, hsvToHsl, rgbToHsv, hsvToRgb, hslToRgb } from '../src/conversion'
+import { rgbToHex, hexToRgb, hslToHsv, hsvToHsl, rgbToHsv, hsvToRgb, hslToRgb, rgbToNamedColor } from '../src/conversion'
 
 describe('rgbToHex()', () => {
   const validRgb = { r: 100, g: 200, b: 30 }
@@ -355,3 +355,26 @@ describe('hslToRgb', () => {
     expect(rgb.a).toBe(1)
   })
 })
+
+describe('rgbToNamedColor', () => {
+  it('converts a red color from RGB to CSS named color correctly', () => {
+    const input = { r: 255, g: 0, b: 0, a: 1 }
+    const named = rgbToNamedColor(input)
+
+    expect(named).toBe('red')
+  })
+
+  it('converts a green color from RGB to CSS named color correctly', () => {
+    const input = { r: 0, g: 128, b: 0, a: 1 }
+    const named = rgbToNamedColor(input)
+
+    expect(named).toBe('green')
+  })
+
+  it('converts a blue color from RGB to CSS named color correctly', () => {
+    const input = { r: 0, g: 0, b: 255, a: 1 }
+    const named = rgbToNamedColor(input)
+
+    expect(named).toBe('blue')
+  })
+})
diff --git a/test/serializer.spec.js b/test/serializer.spec.js
@@ -157,6 +157,14 @@ describe('parse function', () => {
     expect(result.colorObject).toEqual(expectedOutput.colorObject)
   })
 
+  it('should parse CSS named color string', () => {
+    const input = 'red'
+    const expectedOutput = { colorType: 'named', colorObject: { r: 255, g: 0, b: 0, a: 1 } }
+    const result = parse(input)
+    expect(result.colorType).toBe(expectedOutput.colorType)
+    expect(result.colorObject).toEqual(expectedOutput.colorObject)
+  })
+
   it('should return null for invalid color string', () => {
     const input = 'invalid color string'
     const result = parse(input)
@@ -187,6 +195,14 @@ describe('fromUserInput function', () => {
     expect(result.colorObject).toEqual(expectedOutput.colorObject)
   })
 
+  it('should parse and serialize CSS named color string input', () => {
+    const input = 'aliceblue'
+    const expectedOutput = { colorType: 'named', colorObject: { r: 240, g: 248, b: 255, a: 1 } }
+    const result = fromUserInput(input)
+    expect(result.colorType).toBe(expectedOutput.colorType)
+    expect(result.colorObject).toEqual(expectedOutput.colorObject)
+  })
+
   it('should parse and serialize color object input', () => {
     const input = { r: 255, g: 0, b: 128 }
     const expectedOutput = { colorType: 'rgb', colorObject: { r: 255, g: 0, b: 128, a: 1 } }