Procedural colors

How often are you going to sites like to generate a colour palette for your design? This article on had algorithms to generate procedural colours. Whilst I was porting the C# code, a commonality was found. All the algorithms relied on altering one of the dimensions of a given colour space. My requirements to generate colour palettes is enough to actually code up my own solution. This demo is the solution I came up with.


Currently the library allows operations to be performed on three colour spaces, them being red, green & blue (RGB) or hue, saturation & luminancy (HSL) or hue, saturation & value (HSV) spaces. There are five operations that can be performed on each of the components of the selected colour space. They are no-, random-, offset-, walk- & interp-operations.

  • No operation: One numeric parameter. Returns the parameter value when queried.
  • Random operation: Two numeric parameters. Returns a random value from 0 to the first parameter, if only the first one is set, otherwise it returns a random value between the first and second parameter.
  • Offset operation: Takes three numeric parameters. The first value is the reference value, the second is the minimum it should offset by, from the reference value, and the second is the maximum it should offset. If the maximum is not set, then a random value between 0 and the minimum is returned. By default it will positively offset from the reference value, however if you set the bi-directional flag, then it will offset both positively and negatively from the reference value.
  • Walk operation: Essentially the same as the offset operation except that it the new value returned becomes the new reference point, which causes the “walk” to occur.
  • Interpolation operation: Takes two numeric values to interpolate between, the interpolation function to use and how many times to sample between the start and end values. The final oscillate flag will trigger whether the values in the sample wrap or reverse when reaching the end of the sample.


There are three operational buttons. Add will put a colour into the palette and Remove will drop the first colour from the palette. Palette will simulate pressing add twenty times to create a palette with twenty colours. The Compile button is interesting.


The code dynamically builds the UI components from the selected algorithm, parameters that the algorithms require, and the functions chosen in some cases. However, because the algorithm is built up from user input, it cannot be built until all the inputs have been assigned. The user needs to compile the algorithm when changes have been made. Any other changes made thereafter require another compile before the changes take effect. This is important, if you have read till here, to COMPILE AFTER ANY CHANGES in order to BUILD THE ALGORITHM BEFORE USE. The code will not crash your computer and nothing will really happen if the parameters are alphanumeric, it just won’t work. There is however, minor error checking in place to guide you through the process.