Colour palette for a new app

Im working on a new app, codename thistle, and before I can really get going the app needs a colour palette. This a blocking issue for me in that I find it difficult to focus on the rest of the app before the colours are set. I know I might review them later but colours need to be consistent enough for my working environment and for test builds. I used some interesting tools on the way so thought I would share.

Colours are completely subjective but it is possible to follow some rules on devices and on screens to make them look nice. Colours also need to respect accessibility guidelines. Even if you are not a designer, you can make sensible choices and not let the best be the enemy of the good.  If you build a good app you'll get to invest in colours and themes once you've proved the point and got some adoption.

TL:DR – Tools help you partially automate the colour schemes for your app. Here are my favourites.

Using AI in FlutterFlow to generate a colour theme

FlutterFlow supports light and dark material design like theming

lt did a pretty good job, but I wanted some more differentiation on the palette based on lighter and darker shades

HTML Color codes

I know they are colours but HTML Color is the way it is named.

This lovely tool lets you generate Lighter and darker shades of any given named colour. https://html-color.codes/color-names/thistle

Coolors

Colour palette generator

Using my base colour - I had Coolors generate me a palette. Coolors generates code for your colour palette too. Helpful stuff.

Colour palette from Coolors exported as an object

{"Black":"000000","Russian violet":"32174d","Tekhelet":"512888","Rebecca purple":"663399","Royal purple":"7851a9","Finn":"702670","African Violet":"b98fc4","Thistle":"d8bfd8"}

Solid Color Image Generator

Generates a single solid color png or jpg image of any width or height for use as a background image or placeholder. 

This tool will generate an image of whatever size you want filled with one single solid color. You can use the as a placeholder or a background, although for backgrounds the images are very plain so you might try the gradient editor also on this site.

Finalised FlutterFlow theme colours

FlutterFlow Theme Settings - Colors

Thats better. I used some of the shades to make more of the colours needed for the Material Design elements in this app.