Your color palette is another must have in every Design projects.
In this page, you'll discover both some practical recommendations and best practices in order for you to get most of this fundamental elements of your designs.
Define your color palette
If you don't have any color palette for your project of branding, no worries. Even though I'm not gonna dive into the key elements of a great branding here. I'm gonna give you quick insights into generating one from scratch.
1. First, start defining with your environment.
- Light background šØāāļø
- Dark background š„·
2. Define your ambiance
3. From there, use the following coolors palette generator
Creating your color variations in Figma
Understand your colors accessibility
Dark mode VS Light mode
Some apps have both light and dark themes. To maintain visibility of elements and legibility of text, you can adapt the different color schemes for dark and light themes.
Those colors needs to be adjusted to your environment. To fine tune them, here are some quick tips to remember:
Light mode
Dark text on light backgrounds
Dark text on light backgrounds (shown here as #000000 on #FFFFFF) applies the following opacity levels:
Dark text on light backgrounds (shown here as #000000 on #FFFFFF) applies the following opacity levels: ā¢ High-emphasis text has an opacity of 87% ā¢ Medium-emphasis text and hint text have opacities of 60% ā¢ Disabled text has an opacity of 40%
Dark mode
Light text on dark backgrounds
When light text appears on dark backgrounds (shown here as white on black) it should use the following opacity levels: ā¢ High-emphasis text has an opacity of 87% ā¢ Medium-emphasis text and hint text have opacities of 60% ā¢ Disabled text has an opacity of 38%
1. The Material Design baseline default theme 2. The Material Design baseline dark theme
Best practices
- Avoid using opacity for your main color variations
- Avoid using saturated colors that visually vibrate against a dark background.
- Make sure to understand your colors legibility on BG
Next up