Add support for Color names

src/is/is.ts

@@ -1,7 +1,8 @@
-
 /**
  * A utility function that generally tests the state of things.
  */
+import {ColorNameToHex} from '../string/color-name-to-hex';
+
 export class is {
 
     /**
@@ -344,6 +345,20 @@ export class is {
         return is.string(value) && value.startsWith('#');
     }
 
+    /**
+     * A string value that appears to be a css color.
+     *
+     * ```
+     * is.cssHex('red') // true
+     * is.cssHex('blue') // true
+     * is.cssHex('lemonchiffon') // true
+     * is.cssHex('samwise gamgee') // false
+     *
+     * ```
+     */
+    static cssColorName(value: any): boolean {
+        return ColorNameToHex.has(value);
+    }
 
     /**
      * A string value that appears to be a css rgba like.
@@ -444,4 +459,4 @@ export class is {
         var re = new RegExp(botPattern, 'i');
         return re.test(navigator.userAgent);
     }
-}
+}

src/mathf/color.ts

@@ -1,5 +1,6 @@
 import { mathf } from './mathf';
 import { is } from '..';
+import {ColorNameToHex} from '../string/color-name-to-hex';
 
 export interface ColorRGBA {
     r: number,
@@ -207,12 +208,17 @@ export class color {
      * color.cssToRgba('#FFFFFF') // { r: 255, b: 255, g: 255, a: 1}
      * color.cssToRgba('rgba(255, 255, 255, 0.3)') // { r: 255, b: 255, g: 255, a: 0.3}
      * color.cssToRgb('rgb(255, 255, 255)') // { r: 255, b: 255, g: 255, a: 1}
+     * color.cssToRgb('red') // { r: 255, b: 0, g: 0, a: 1}
      *
      * color.cssToRgba(20) // null
      * color.cssToRgba('hello') // null
      * ```
      */
     static cssToRgba(css: string): ColorRGBA | null {
+        if (is.cssColorName(css)) {
+            return this.hexToRgba(ColorNameToHex.get(css));
+        }
+
         if (is.cssHex(css)) {
             return color.hexToRgba(css);
         }
@@ -258,4 +264,4 @@ export class color {
     static rgbaToCss(rgba: ColorRGBA): string {
         return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
     }
-}
+}

src/string/color-name-to-hex.ts

@@ -0,0 +1,160 @@
+const mapping: Map<string, string> = new Map<string, string>([
+  ['black', '#000000'],
+  ['silver', '#c0c0c0'],
+  ['gray', '#808080'],
+  ['white', '#ffffff'],
+  ['maroon', '#800000'],
+  ['red', '#ff0000'],
+  ['purple', '#800080'],
+  ['fuchsia', '#ff00ff'],
+  ['green', '#008000'],
+  ['lime', '#00ff00'],
+  ['olive', '#808000'],
+  ['yellow', '#ffff00'],
+  ['navy', '#000080'],
+  ['blue', '#0000ff'],
+  ['teal', '#008080'],
+  ['aqua', '#00ffff'],
+  ['orange', '#ffa500'],
+  ['aliceblue', '#f0f8ff'],
+  ['antiquewhite', '#faebd7'],
+  ['aquamarine', '#7fffd4'],
+  ['azure', '#f0ffff'],
+  ['beige', '#f5f5dc'],
+  ['bisque', '#ffe4c4'],
+  ['blanchedalmond', '#ffebcd'],
+  ['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'],
+  ['gainsboro', '#dcdcdc'],
+  ['ghostwhite', '#f8f8ff'],
+  ['gold', '#ffd700'],
+  ['goldenrod', '#daa520'],
+  ['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'],
+  ['limegreen', '#32cd32'],
+  ['linen', '#faf0e6'],
+  ['magenta', '#ff00ff'],
+  ['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'],
+  ['oldlace', '#fdf5e6'],
+  ['olivedrab', '#6b8e23'],
+  ['orangered', '#ff4500'],
+  ['orchid', '#da70d6'],
+  ['palegoldenrod', '#eee8aa'],
+  ['palegreen', '#98fb98'],
+  ['paleturquoise', '#afeeee'],
+  ['palevioletred', '#db7093'],
+  ['papayawhip', '#ffefd5'],
+  ['peachpuff', '#ffdab9'],
+  ['peru', '#cd853f'],
+  ['pink', '#ffc0cb'],
+  ['plum', '#dda0dd'],
+  ['powderblue', '#b0e0e6'],
+  ['rosybrown', '#bc8f8f'],
+  ['royalblue', '#4169e1'],
+  ['saddlebrown', '#8b4513'],
+  ['salmon', '#fa8072'],
+  ['sandybrown', '#f4a460'],
+  ['seagreen', '#2e8b57'],
+  ['seashell', '#fff5ee'],
+  ['sienna', '#a0522d'],
+  ['skyblue', '#87ceeb'],
+  ['slateblue', '#6a5acd'],
+  ['slategray', '#708090'],
+  ['slategrey', '#708090'],
+  ['snow', '#fffafa'],
+  ['springgreen', '#00ff7f'],
+  ['steelblue', '#4682b4'],
+  ['tan', '#d2b48c'],
+  ['thistle', '#d8bfd8'],
+  ['tomato', '#ff6347'],
+  ['turquoise', '#40e0d0'],
+  ['violet', '#ee82ee'],
+  ['wheat', '#f5deb3'],
+  ['whitesmoke', '#f5f5f5'],
+  ['yellowgreen', '#9acd32'],
+  ['rebeccapurple', '#663399'],
+]);
+
+export class ColorNameToHex {
+  static has(name: string): boolean {
+    return mapping.has(name);
+  }
+
+  static get(name: string): string {
+    return mapping.get(name);
+  }
+}

src/string/css-unit.ts

@@ -2,6 +2,7 @@
 
 import { is } from '../is/is';
 import { ColorRGBA, color } from '../mathf/color';
+import {ColorNameToHex} from './color-name-to-hex';
 
 /**
  * The different types of structures that can be passed.
@@ -23,6 +24,11 @@ export enum CssUnitObjectTypes {
      */
     cssHex = 'cssHex',
 
+    /**
+     * A css color such as 'red'
+     */
+    cssColor = 'cssColor',
+
     /**
      * A css rgba unit such as 'rgba(255, 255, 255, 0.3)'
      */
@@ -116,6 +122,10 @@ export class cssUnit {
             result.value = color.cssToRgba(css);
             result.type = CssUnitObjectTypes.cssHex;
             result.valueType = CssUnitObjectTypes.rgba;
+        } else if (is.cssColorName(css)) {
+            result.value = color.cssToRgba(css);
+            result.type = CssUnitObjectTypes.cssColor;
+            result.valueType = CssUnitObjectTypes.rgba;
         } else {
             result.value = value ? +value : null;
             result.unit = unit ? unit[0] : null;
@@ -127,8 +137,4 @@ export class cssUnit {
 
         return result;
     }
-
-
-
-
-}
+}