Adrian-Albanese/ColourSwatch

How to add a new colour space

To add a new colour space to the colour swatch app, please follow these steps

Step 1, Add colour space name to array

• Navigate to server/colourswatch/api/views.py
• Edit line 8 and add your new colour space name to the array as text

For example, add 'BRGB' to the end of the array

Before:

colourspaces = ['RGB', 'HSL']

After:

colourspaces = ['RGB', 'HSL', 'BRGB']

Step 2, Add colour space name to match/case statement block

For example, add 'BRGB' case to the end of the match/case block

match colourspaces[index]:
        case 'RGB': colour = {'type': 'RGB', 'r': random.randint(0,255), 'g': random.randint(0,255), 'b': random.randint(0,255)}
        case 'HSL': colour = {'type': 'HSL', 'hue': random.randint(0,360), 'sat': random.randint(0,100), 'light': random.randint(0,100)}   
        case 'BRGB': colour = {'type': 'BRGB', 'r': random.randint(0,10000), 'g': random.randint(0,10000), 'b': random.randint(0,10000)} 
    return Response(colour)

Step 3, Add your colour space name to the swatch component

• Navigate to client/app/src/components/swatch.jsx
• Add the colour space name to the switch statement inside the fetchColour() function

For example, if you would like to add the 'BRGB' colour space add it to the end of the switch statement, like shown below

switch (data.type) {
        case 'RGB': setColour(`rgb(${data.r},${data.g},${data.b})`); break;
        case 'HSL': setColour(`hsl(${data.hue},${data.sat}%,${data.light}%)`); break;
        case 'BRGB': setColour(`BRGB(${data.r},${data.g}%,${data.b}%)`); break;
        default: setColour('pink'); // Fallback if no type matches
      }

Please Note: The format of data passed into setColour must be a vaild css background-color value

Colors in CSS can be specified by the following methods:

• Hexadecimal colors
• Hexadecimal colors with transparency
• RGB colors
• RGBA colors
• HSL colors
• HSLA colors
• Predefined/Cross-browser color names
• With the currentcolor keyword