šŸŽØ

Color palette

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

From Coolor to Figma. Use SHIFT + UP to lighten your color without affecting the opacity

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:

image
image

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%

image

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%

image
Less saturated colors from your color palette improve legibility and reduce visual vibration.
Less saturated colors from your color palette improve legibility and reduce visual vibration.
Avoid using saturated colors that visually vibrate against a dark background.
Avoid using saturated colors that visually vibrate against a dark background.

image

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

šŸ”Œ
Figma plugins

Dive Deeper