Scribd
Upload
97 views1 page

Color Cheatsheet v1-3

The document provides a cheat sheet for working with colors in UI design. It discusses the HSB color system and how hue, saturation, and brightness are measured. It emphasizes that variations are important for design and provides examples of how to make colors lighter or darker by adjusting those three properties. The cheat sheet also discusses how luminosity varies across the color wheel and how that impacts shifting hues for variations.

Uploaded by

Taka Tomo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
97 views1 page

Color Cheatsheet v1-3

The document provides a cheat sheet for working with colors in UI design. It discusses the HSB color system and how hue, saturation, and brightness are measured. It emphasizes that variations are important for design and provides examples of how to make colors lighter or darker by adjusting those three properties. The cheat sheet also discusses how luminosity varies across the color wheel and how that impacts shifting hues for variations.

Uploaded by

Taka Tomo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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.

You might also like