The Color Tools · Guides

Practical guides for choosing and using color.

Learn how to build useful color palettes, check contrast, work with digital color formats, and prepare color choices for print. Each guide starts with a real design task and connects the ideas to a free color tool.

Explore by task

Color design topics

Browse all color tools →

Palette design

Build a color palette with a clear purpose

Start with the role the palette needs to play: a brand identity, a product interface, or an illustration. Choose a main color, add supporting and neutral colors, then check the complete set in the places people will see it.

Create a palette

Color from images

Turn a reference image into usable colors

A photo can provide a starting point for a palette, but lighting and image processing affect the sampled colors. Extract a few dominant colors, adjust them for your design, and verify contrast before using them for interface text.

Extract image colors

Accessible interfaces

Check color contrast before handoff

Test foreground and background pairs in context. WCAG 2.2 AA calls for a 4.5:1 contrast ratio for normal text and 3:1 for large text, with specific exceptions. Check every important text style and state, not just the primary brand colors.

Check contrast

Color spaces and code

Choose the right format for each step

HEX and RGB are common for screen interfaces, while CMYK is used in many print workflows. OKLCH is a CSS color format with lightness, chroma, and hue components. Convert values when handing colors between design, code, and production tools.

Convert a color

Print color workflow

Treat digital Pantone matches as estimates

A color sampled from a screen image cannot confirm the appearance of a physical ink on a specific stock. Use a digital match as a shortlist, compare the reported ΔE, then confirm the final selection with current official references and your print supplier.

Explore image matches

A practical workflow

From the first color choice to a reliable handoff

  1. 1. Explore

    Generate options or sample a reference image, then decide what each color needs to do.

  2. 2. Validate

    Check contrast and test colors in real interface or packaging contexts before sharing them.

  3. 3. Handoff

    Convert values into the format your developer, printer, or design system needs.