The Random Palette Generator API

Table of Contents

• Description
• Usage
• Functionality
• Limitations

Description

This API is an API which generates random color palettes based on the user selection. The parameters are either the mode (Monochromatic, Triad, Square, Complementary or Shades), the number of random palettes to be generated, and the number of colors per palettes.

Usage

There are multiple situations at which this API is useful:

• Generating multiple color palettes to see which one fits any color theme the best.
• Web pages/applications which can dynamically change colors through calling this API at intervals.
• As this API gives responses in HEX color codes, these can be transformed to styles easily.
• Although there are better palette generators out there. This API can generate as much color palettes as needed while having a maximum of 10 colors per palette.

Functionality

Array

This API uses an array of colors having 90,000 elements. This array was generated from a 300x300 px color wheel which looks like the one below

As the image is 300x300, we would have 90,000 pixels, each pixels have RGB equivalent. All pixels where extracted and placed into the array which is used to extract colors based on a certain algorithm.

Calculating the Points to Extract the Colors

As the color wheel is a circle, it is much more preferable to use the polar system (r,θ) rather than rectangular coordinates system (x,y) to generate the random colors. After the color is extracted, A random shade is applied to it which ranges from 0 to 127, this shade would make the color darker as all RGB units would be subtracted by this shade. In order to prevent problems when the resulting value is negative, the value is taken as absolute.

However, the mapping should be in rectangular coordinates at the end. Therefore, basic trigonometry is used to convert the randomly generated polar coordinates to rectangular coordinates to be used to lookup the color details from the Array

Compatible Color Schemes

There are five compatible color schemes: Monochromatic, Complementary, Square, Triad, Shade

More details on color schemes at https://color.adobe.com/create/color-wheel

Monochromatic

This mode generates palettes from the same angle from the center.
In this mode, the angle is generated randomly from 0 to 2π
. The radius is generated from 0 to 150. However, there would be only 10 different values maximum in order to prevent having extremely similar color value in the same palette. There is also another functionality to make all colors in a palette unique in terms of Hexadecimal value of the color. A random shade is also generated which is from 0 to 127 and is deducted from all colors in the same amount. A feature exclusive to Monochromatic is that the palette is sorted in the ascending order fo the sum of HEXes of the colors.

Complementary

This mode works similar to monochromatic but each time a color is chosen, the next color would be the exact opposite of the wheel. If a color was chosen from the right, the subsequent will be chosen from the left. After that, another random color is generated and the same goes on.

Square

This mode generates colors at 90° from each other but at the same radius. If there are more than 4 colors, the 5th color onward is generated with a new radius.

Triad

This mode generates colors at 120° from each other but at the same radius. If there are more than 3 colors, the 4th color onward is generated with a new radius.

Shades

This mode is a little different. Only one radius and angle are generated per palette. However, the shade itself is randomized for every color, rather than randomizing the shade for every palette which was the case for the aboce four modes.

The Outputs Expected

Output on Success

Data is generated as a JSON format, the below is an example

{"type":"complementary","data":[{"id":0,"palette":["#a5b8a8","#b7a9b6","#12b827","#b818b3"]}]}

The data key is what has all the useful values, the type is just used for reference.

Output on Fail

There are two types of failed outputs, one either means that the entered number of elements was greater than the maximum:

{"fail":"Incorrect Number of colors per pallet, choose between 1 and 10!"}

or the mode selected does not exist:

{"fail":"Incorrect mode chosen!"};

Limitations

This API has few limitations:

• There are only 10 different values from 0 to 150 which is the radius of the circle, which means only 10 RGB colors per a specifc angle, so some well known colors might not be generated because of this.
• The API supports 5 schemes, there are more schemes than this.
• Other color wheels might have better colors in some cases as this wheel leans more to whiter colors.
• The shade affects all RGB components to the same degree, which means any color which have components smaller than the generated shade will be not have “0”, it will be a value greater because the absolute value is taken.
• This API functionality do not involve much color theory.
• This API only uses the concept of “Hue”, and it does not use “Saturation”, it somewhat uses “Brightness” in terms of shade, nothing more.