ColourGrab

ColourGrab is an app, built in Flask, that takes user uploaded images, extracts the colours from these images, and uses them to generate exportable colour palettes.

Currently, the app supports the following palette types:

• RGB values
• CSS variables
• SASS variables
• Tailwind themes

I find myself constantly inspired by colourful imagery; whether it be photographs, illustrations, or anything else. Colourgrab was born out of the idea to make these colours easily convertible into digital colour palettes.

Table of Contents

• Change Log
• Setup
  • Set Environment Variables
  • Virtual Environment, Dependencies, and Server
  • Build Frontend
• Technologies
  • Languages
  • Frameworks/Pre-processors
  • Libraries
  • Design
  • Misc
• Testing
• Credits

Change Log

All changes (features, bugs, etc.) following the initial launch of this app can be found in this project's issues tab.

Setup

Set Environment Variables

This project using the following environment variables, which would be included in a .env file at the root directory of the project:

• DEVELOPMENT (bool): Toggles debug mode on/off
• PORT (int): The port that you want your local server to run the app on
• SECRET_KEY (str): A randomly generated string, this can be anything.
• UPLOAD_FOLDER (str): The path to your uploads folder (often found within 'static')

Virtual Environment, Dependencies, and Server

NOTE: The following instructions assume that you are in the root directory of the project.

• Create a virtual environment through a method of your choice. If you are unsure how to do this, run the following command: python -m venv .venv. This will create a virtual environment called .venv
• Activate your virtual environment. If you created a virtual environment by running the command in the previous step, now run one of the following commands:
  • Windows: .venv\Scripts\activate
  • Unix: source .venv\bin\activate
• With your virtual environment running, install the dependencies by running: pip install -r requirements.txt
• Finally, run python3 app.py to start the server.

Build Frontend

• Before starting, ensure you have the correct version of Node installed, this can be found in the .nvmrc file in the root directory (v21.6.2).
• Once you have installed the correct version of Node, run npm install (or npm i) to install node_modules
• Finally, run npm run watch to compile the CSS/JS. This command will recompile these assets every time a .scss or .js file (within the relevant directories) is saved.

Congratulations, you are now set up!

Technologies

Languages

• HTML
• CSS
• JavaScript
• Python

Frameworks/Pre-processors

• SASS/SCSS
• Bootstrap
• Flask

Libraries

• Jest: for frontend testing.
• a11y Dialog: for accessible modal dialogs.
• copy-to-clipboard: for copying colour palettes to user's clipboard.
• Pytest: for backend testing.
• colorgram: this package is used to extract the colours from user uploaded images.

Design

• Figma

Misc

• NVM
• Webpack

Testing

All documentation regarding testing can be found here

Credits

• Thanks to the Pqina Blog for their article on compressing images using JavaScript.