color-picker
![Cover Image for color-picker](https://cdn.sanity.io/images/lom4410w/production/149d796f9dd81c5618df8f169697ffe6243c4184-1385x634.png?rect=0,15,1385,603&w=1240&h=540)
This project has been one of the first complete React app that I have written from scratch. The idea behind it was to analyze Pictures and generate a Color Palette from it and what's better than building palettes for football clubs. Live Demo should be available at: https://color-picker.dossis.ch/
As a backend Contentful has been used as CMS:
![](https://cdn.sanity.io/images/lom4410w/production/629d8d7aa1e6832b25de136017063d4c9476811a-1024x395.png)
The idea of using a backend is, that users can add or suggest new clubs - and the an administrator can just check and confirm them
Link to the Repository: https://github.com/pichichi91/color-picker
Features
- Users can add a link to an image and the App will load that image, place it on a canvas a loop over every Pixel to calculate the Colorcode for every pixel
- The percentage per Color will be calculated (ignoring transparent colors)
- Calculation of bright/dark colors for styling
- Copy the hexadecimal color code to clipboard
- Users can request that the searched club will be added to the Backend
- Querying Contentful CMS for a list of saved color palettes
- Toast will be displayed on certain actions, to provide feedback for the user: https://www.npmjs.com/package/react-toastify
Potential Improvements
State of - March 2021 - Version 1.0 there's still a few things that could be improved:
- Drag/Drop for Images: Currently only pasting of URLs is supported and if the website of the desired URL does not support the correct CORS Headers (Access-Control-Allow-Origin), the Image can't be loaded
- Improve Performance: Currently, loading an URL in firefox will make the browser unresponsive (because the looping over every Pixel seems to be needing to many computing resources)
- Add Search for clubs: As soon as more clubs will be added, a search field might be feasible
- Adding quantize of the colors - otherwise on bad quality pictures too many different color codes will be displayed
Screenshots
![](https://cdn.sanity.io/images/lom4410w/production/04b990688e57b9317008c9df2cc5cc4b4aab8453-1024x962.png)
![](https://cdn.sanity.io/images/lom4410w/production/eee560dadccb492f80b61d8e0b0cba3e2acebfbc-1024x919.png)
![](https://cdn.sanity.io/images/lom4410w/production/45de398ef62e8fdf0f09e40f38f4e4daf6b9d850-1024x1006.png)