How do I create a color palette that supports the user expierence of my app and supports the specific requirements of an app compared to a website for a product or company. I don't need the answers to these questions, I just don't where to search for them because google is flooded with guides that don't go further than "pick a primary color that fits your brand and as secondary color pick the one opposite or adjecent from the color wheel"

Long question

When searching online for "How to create a color palette" basically all the results talk about how to create a color palette for a website (in the traditional meaning of "website", as a product website or a companies website)

But I'm creating (web)apps and the points mentioned in these guides don't really apply to apps, namely:

Pick a color that conveys your intentation

The guides talk about the meaning of colors, e.g. blue is calming, red is exciting and that I should pick a color that conveys my intentation, fits the intended use of my product or conveys the motives of the company. But I don't have a product or company, I just build apps that try to solve a task for the user. All I care about is creating a color palette that supports the user expierence and doesn't look like a toddler picked random crayons from their drawing box.

Choose a "pattern" for your color palette

Then when I found my primary color I should use a analogous, complementary, triadic or whatever pattern to pick the other colors for the color wheel. But for reasons explained later there are some colors that I can't use because I need for other porpuses that arise when creating a app, but not for a product website

Also there are several aspects only relevant for an app, but not for a website:

Semantic colors

The app im writing deals with a medium amount of that can have different status, which I want to convey with colors, e.g. warning (yellow), error (red), ok(green), information(blue or some other neutral color). That leaves me basically with only purple and orange if I don't want to reuse these color (or shades of them). Of course there are millions of colors, but basically the yellow, orange, red, purple, blue and green from the 6-spoke color are easily distinguishible and if I use a dark blue as primary / light blue for informational status and dark yellow for secondary / light yellow for warning status it gets hard to distinguish.

Dark Mode

dark mode was once an "extra" feature, but as OSes support them natively and browsers provide the users choose to the app we can assume that the user expects the app to recognize his choice (besides that I will use my apps myself and I just like dark mode). So the problem is I need to create a color palette which works both in dark and light mode, which limits the choice of colors even more

tuning colors so they fit together

Assuming I have found my base colors, how do I tune them so they fit together well and dont look like a 90's webpage where you had basically 20 colors to choose from. This is a problem not only relevant to an app, but still I noticed that the guides if read don't talk about that last 10% of turning your color palette that is only distinguishible in a color palette that is pleasing to the eye.

I don't expect to get answers here for all these questions, I'm only searching for some guides because I didn't find anything, maybe because I was using the wrong search terms. I'd be happy to hear about some resources that maybe helped you creating a color palette for an app. If I need to I would also buy a book if there simply are no good guides on the internet.



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.