UI COLOR CHEATSHEET

from LEARN UI DESIGN · cheatsheet version 1.3

Work in the HSB color system Variations are Everything

Hue-Saturation-Brightness is more intuitive than RGB The core skill of color in UI design is making variations

HUE Measured in degrees

All orders Lighter variations on the
background color for
0° 90° 180° 270° 360° raised controls
Dark mode

Darker variations on the

SATURATION & BRIGHTNESS Measured in percent Bitcoin background color for inset
BRIGHTNESS 100%

Ethereum controls

Ripple

CLICK HERE Disabled = lighter variation

0

0% SATURATION 100%
CLICK HERE Normal button = base color
Saturation refers to richness of the color:
CLICK HERE Hovered = darker variation
• 0% saturation (left edge) is always a flat gray.
• 100% saturation (right edge) is always a rich
color or black, depending on brightness

Brightness is “how on the light bulb is”:

• 0% brightness (bottom edge) is always black
• 100% brightness (top edge) is a bright color or
white, depending on saturation

To Make a Color Variation… How to Shift Hues

Color adjustments are either lighter or darker Different hues have different luminosities, which
complement them being used as darker or lighter
LIGHTER VARIATIONS variations
• Increase brightness
• Decrease saturation
• Hue towards cyan, magenta, or yellow
LUMINOSITY

DARKER VARIATIONS

• Decrease brightness
• Increase saturation
• Hue towards red, green, or blue

0° 60° 120° 180° 240° 300° 360°

HUE
© 2020 Kennedy Design Inc.