This is a series of using inspiring color palettes in design prototypes.
Inspiration for this edition:
Forming a palette
A palette that has the following colors is sufficient to paint a mobile or web application:
- Accent color — usually the color of the logo
- Darkest color
- Next darkest
- Lightest color
- Next lightest
- Semantic colors
In this color palette, I’ve used:
Then, add semantic colors that match the tint and tone of the overall color palette. To get a better idea of how the semantic colors would look on the app, I’ve used the background colors from our palette itself.
Great! Now, let's start adding these to a perfect Travel App mobile design I got from the Figma community.
Splash Screen
Light Theme Color Usage
- Accent- Primary button
- Lightest- background color in the light theme, text color on dark background, text on images
- Second lightest- borders and lines
- Darkest- H2 text, Primary button text
- Second darkest- Body text, H1 text, Icons, Secondary button text
- Third darkest- Hyperlink color
- Semantic- Green and red badges
Dark Theme Color Usage
The darkest color was used in the background, and the second lightest became the color most used. Hardly used the lightest white as it stood out on the dark background.
Complete Set
I think that came out quite well. Stay tuned for more implementations.
