How do I choose a Color System for my website or app?

Scalable

It needs to be scalable

Accessible

Harmonious

Cultural Color Meanings

60-30-10 Rule

60

30

10

How many Primary Colors do we need?

Best practices between 2-4

Complimentary Color Harmony Rule

Color Variants for Light background or Dark Backgrounds.

Scaling Neutral Colors.

For example, you can start with the color black and gradually change the opacity to dark grey, medium grey, light grey, and off-white.

If you'd like to do something different from black try adding a splash of another color like blue or green to the starting black color.

Now we have dark neutrals, medium neutrals, and light neutrals.

4 Sematic Colors

Red - Danger, Negative, Wrong, Immediate Attention

Orange - Warning, Needs Attention

Green - Positive, Success, Correct

Blue - Neutral information, info, how to.

Your Extended Colors Pallet is based on your primary and secondary colors.

This allows you to stick to the brand but has more options for tints and shades.

Accessibility

Color Contrast:

Try a color contrast checker.    There is a minimum you should try.

Here is a long list of guidelines.

A11y - Figma Color Contrast Checker Plugin

A good rule of thumb is if an interface has too many primary colors they won't know what is important to click on with alerts and call to action not standing out.

Research Color Combinations that are ascetically pleasing.

Extract Photo Colors with Adobe Color.

Pinterest Color Pallets

Coolors - Can generate different color pallets including color blindness colors.

Generate different Colors with

Color System Checklist

What you need:

Primary Colors (60%)

Secondary Colors (30%)

Accent Colors (10%)

Semantic Colors

Positive

Warning

Negative

Informative

Neutral Colors

Extended Color Palette

Color Variants (light and dark mode)

Things to consider:

Color Psychology

Cultural color meaning

Color Contrast (minimum 4.5: 1)

Accessibility under different lighting conditions

Color Blindness