Color

Definition
Color influences mood and communicates function.
Color

Main, secondary and accent color

Also called primary, secondary and tertiary colors, they form the theme of an application.

  • Primary/main is used for 60% of the design. This neutral color gives room for the secondary and accent colors to stand out.
  • The secondary is used for 30% of the design. This is a middle ground that compliments the primary and accent colors. When designing for a brand, this color tends to be the secondary color for the brand.
  • The accent is used for 10% of the design. This helps "accessorize" the site by giving pops of colors that keep the viewer's attention.
Add one or two extra colors to complete the palette. There are many sites on the internet that help you find / create a color palette.

Remarks

  • Don't use pure black either as foreground or background. It strains the eye. Use dark gray (#444444) instead.
  • Page background color: white/lightgray for light theme or black for dark theme.
  • Contrast: for text to be well readable it should contrast with its background
  • Interactive/non-interactive: use different colors for interactive and non-interactive elements

Problems

  • People with a form of color-blindness can't see the difference between certain colors

Links