goPalette – Colour Palette Selector
This was about 4 months ago, on a weekend night when I was browsing Reddit, there was this site trending on /r/web_design — palettable.io, it’s a simple colour palette selector made by Alec Ortega while experimenting with React, Redux, Webpack and Sass. It was very intuitive and quite handy, its colour combinations origin from colourlovers.com where many share color palettes, ideas & inspiration; but I didn’t like the idea that it made API calls every time, of course it was what’s suitable, but I wanted to try out something smaller and easier and only client side app which generates the palette itself.
I started out with vanilla CSS and JS but it had already crossed midnight so I added jQuery to reduce my trial and error time (though I wish to reduce it to vanilla JS). Creating clone was not a difficult task, there were few key points which I had to do –
- Initiate an element to windows’s full width & height
- Dynamically add and remove child elements.
- Adjust the width equally of child elements.
- Change color of element from the value provided by users.
- Listen to specific key press events.
- Generate colours to match with the palette.
As you can see this is quite a simple tool, and I am not proud of using Math.Random(), very dirty trick; but it does satisfy the need if the designer want to start from scratch.
I do want to fix the UI and clean up the code one day.
Live Preview link: goPalette
Source Code link: Github
