colors

Color Objects

Although any RGB configuration can be used as a color with the Canvas API, 139 web safe colors are treated as objects with color name, hex value, and red, green, and blue values as parameters.
Examples: 

  • // new Color (“black”, “000000”, 0, 0, 0);
  • // new Color (“white”, “FFFFFF”, 255, 255, 255);

Color objects are grouped into arrays. There are 11 groups total. 

  • // blacks, 10 colors
  • // whites, 17 colors
  • // browns, 17 colors
  • // reds, 9 colors
  • // pinks, 6 colors
  • // oranges, 5 colors
  • // yellows, 11 colors
  • // greens, 20 colors
  • // cyans, 11 colors
  • // blues, 15 colors
  • // purples, 18 colors

Color Functions

Most of my functions take parameters (c1, c2) for color selection. 

  • //c1 — fill color
  • //c2 — stroke color

Functions including color parameters can take any color, not just those included as objects in the code. That means colors can be specified by name (where applicable), and hexadecimal, RGB, or HSL value. For example, white could be listed as:

  • “white” 
  • “#FFFFFF”
  • “rgb(255, 255, 255)”
  • “hsl(0, 0%, 100%)”

Functions may also take value strings of “random” and “clear” for either or both fill or stroke.

  • // “random” will evoke the RandomColor() function to return a random color. Random color returned will be one of the aforementioned 139 websafe colors.
  • // “clear” will simply set the fill or stroke to the background color. 

Randomization Functions

As previously mentioned, there is a function to randomize all colors. When “random” is used as a color parameter, it evokes the RandomColor() function, which returns one of the 139 websafe colors specified as objects in the code.

There are also functions to randomize colors within each specific color group.

  • randomBlack();
  • randomWhite();
  • randomBrown();
  • randomRed();
  • randomPink();
  • randomOrange();
  • randomYellow();
  • randomGreen();
  • randomCyan();
  • randomBlue();
  • randomPurple();

Gradient Functions

To make linear and radial gradients, the createLinearGradient, createRadialGradient, and addColorStop methods of the Canvas API were simply wrapped in functions. The LinearGradient function takes three colors (c1, c2, c3) as parameters, and the RadialGradient function takes only two (c1, c2). The height and width of the gradient are determined by the size of the canvas.

  • //HorizontalGradient (c1, c2, c3);
  • //VerticalGradient (c1, c2, c3);
  • //DiagonalGradient (c1, c2, c3);
  • //RadialGradient(c1, c2);

Expansion of color began December 2019. Expansion included color notation and color space conversions and color harmony calculations.

Color Notation Conversions

  • hexa2rgb(hexcolor); //returns r, g, b color value
  • rgb2hexa(r, b, g); //returns hexadecimal  color value

Color Space Conversions

  • rgb2hsl(red, green, blue)
  • hsl2rgb(hue, saturation, luma)
  • rgb2hsv(red, green, blue);
  • hsv2hsl2rgb(hue, sat, value);
  • hsv2rgb(hue, sat, value);

Color Harmony Calculations

There are five color harmonies used — complementary colors, split complementary colors, analogous colors, triadic colors, and tetradic colors. Each takes red, green, and blue as parameters, converts rgb to hsl and returns a set of colors based on simple calculations of hue.

  • complements(red, green, blue); //Returns two colors
    • RGB
    • RGB + 180 hue
  • splitcomplements(red, green, blue); //Returns three colors
    • RGB + 160
    • RGB
    • RGB + 200
  • analogous(red, green, blue); //Returns five colors
    • RGB + 20
    • RGB + 10
    • RGB
    • RGB – 20
    • RGB – 20
  • triadics(red, green, blue); //Returns three colors
    • RGB + 120
    • RGB
    • RGB – 120
  • tetradics(red, green, blue); //Returns four colors
    • RGB
    • RGB + 90
    • RGB + 180
    • RGB + 270