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.
All changes (features, bugs, etc.) following the initial launch of this app can be found in this project's issues tab.
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/offPORT(int): The port that you want your local server to run the app onSECRET_KEY(str): A randomly generated string, this can be anything.UPLOAD_FOLDER(str): The path to your uploads folder (often found within 'static')
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
- Windows:
- With your virtual environment running, install the dependencies by running:
pip install -r requirements.txt - Finally, run
python3 app.pyto start the server.
- Before starting, ensure you have the correct version of Node installed, this can be found in the
.nvmrcfile in the root directory (v21.6.2). - Once you have installed the correct version of Node, run
npm install(ornpm i) to installnode_modules - Finally, run
npm run watchto 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!
- 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.
All documentation regarding testing can be found here
- Thanks to the Pqina Blog for their article on compressing images using JavaScript.