Flat Design color picker dropdown

If your app leverages the “image from color” column and uses colourful containers or headers, this might be for you.

So how can the user pick a color? → They can just simply insert a hex code into a field, but who knows hex?? OpenAI can generate a hex code for users, but that would be over engineered in my opinion.

So let’s give the user options (via pick component or custom action).

I guess when you want to have a proper color scheme for your app, you may want to head to this website and find complementary colours: https://coolors.co

You can then create a custom list of hex codes in a table and let users pick one of them.

Since I want to give users ALL available colours - or at least a longer list to choose from - I searched the internet and found many lists of hex codes.

The problem is: How to sort them in an appealing way? We do not want to give users an ‘messy’ list of options with random colors. Sorting by hex code does not work. I found complicated algorithms on the web - but no way to do it quickly. So in the end I got inspired by this website: Color Chart — HTML Color Codes

I think flat design describes Glide quite well (can some designer please comment on this?). So I extracted the list of Flat Design color options and put it into a CSV file. You can use it, too: You can import it as a table. Or you can further reduce the number of options by filtering certain weights.

Here is the CSV: Flat Design Colours 2.csv - Google Drive

Hope this is helpful.

7 Likes