Swatch Gen

Django React Heroku app for generating and serving swatches of random colours

Demo

Check it out on https://swatch-gen.herokuapp.com/

NPM package

The front end is bundled as an NPM package for easy distribution and reuse

You can find it here https://www.npmjs.com/package/swatchgen

Local dev

From root, run py manage.py runserver and npm run start to run the backend and front-end respectively

Custom colour rules

If the user wants to add more colour type handling to the front-end, they can do so by passing a valid colour rule object to the customColourRules prop on either the SwatchGen or Swatch components

For example, if you wanted to implement a made-up colour space called BRGB that has values ranging from 0-10000 instead of 0-255, then you could do so like this:

import SwatchGen from './swatchGen'

// solve for ratio of BRGB component : 10,000 vs RGB component : 255, then round to an integer to normalise the values
const brgbToRgb = (brgbComponent) => parseInt(255 * (brgbComponent / 10000), 10);

<SwatchGen customColourRules={{ brgb: {
    getDescription: (colour) => `brgb (${colour.red}, ${colour.green}, ${colour.blue})`,
    getColour: (colour) => `rgb(${brgbToRgb(colour.red)},${brgbToRgb(colour.green)},${brgbToRgb(colour.blue)})`,
}}}/>