Skip to content
SliceForge
← All free tools

LOCAL FILES. INSTANT WORKFLOW.

Color Palette & Contrast

Extract colors, assign UI roles, check contrast, and download design tokens.

See what you’ll get ↓
  1. Add a reference image
  2. Assign roles and check contrast
  3. Download your color tokens
● Local processing · Files clear on refresh
Start with a color referenceDrag and drop here, or browse your device

PNG, JPEG, or still WebP · Up to 40 MB / 32 megapixels

Your preview will appear here

Start with a color reference, then follow the settings below.

See an example of the output ↓

How to get your result

Extract up to 16 colors, then adjust the background, surface, accent, and text roles. Choose a foreground/background pair to check contrast.

A useful tip

Start with text against surface. The contrast check covers those two opaque colors, not the accessibility of the whole design.

Choose a file above to unlock the controls.

WHAT YOU’LL GET

From reference to reusable colors.

Illustrative example
01 / INPUT
PLAY

Colors in your artwork

02 / OUTPUT
backgroundsurfaceaccenttext

Role colors + tonal ramps

Included in your download

  • CSS variables
  • Palette, roles + ramps · JSON

Suggested roles are editable. Download the tokens to reuse the same colors across your UI.

Example only. Your actual result appears in the workbench after you prepare it. Download before refreshing; files stay in this tab.