Flat Design color picker dropdown

christian_k
Sun, 10 Mar 2024 20:38:16 +0000
Community Resources

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.

1 post - 1 participant