PALETTE BUILDER

Build a palette around the colors that matter.

Compose and lock colors on the left. Review the same palette in light and dark interfaces on the right.

STEP 1 · COMPOSE

Choose the palette direction

Select a relationship and visual character, then generate until the unlocked colors fit your goal.

Only unlocked colors change. Lock any swatch that must stay fixed.

EDIT COLORS

Lock, reorder, or enter exact values

Use the arrows to change color order. Lock a color before generating another variation.

ACCESSIBILITY · PRO

Check every color pair

Each cell shows the WCAG contrast ratio between two palette colors.

EXPORT · PRO

Choose the format for your next step

Upgrade to Pro to unlock production-ready exports.

WORKSPACE · PRO

Saved palettes

No saved palettes yet.

COLOR PALETTE GUIDE

Build a palette as a system of roles, not just a row of attractive swatches.

A useful palette needs enough visual relationship to feel coherent and enough separation to support real interface roles. HexCheck lets you generate variations, lock colors that must remain fixed, preview hierarchy on light and dark surfaces, inspect pairwise contrast, and prepare the result for implementation.

Use harmony as a starting point, not a rule

Analogous, complementary, triadic, monochromatic, and other relationships can quickly create a direction, but the final palette still has to serve the product. Lock brand or required colors first, then adjust the remaining swatches around those constraints.

A palette for an interface usually needs functional separation: text, muted text, surfaces, borders, actions, and status colors may need different lightness or chroma even when they share a harmonious hue relationship.

Preview roles and contrast before export

A row of swatches cannot show whether hierarchy survives in context. Previewing the same palette on light and dark interfaces makes it easier to spot colors that collapse together or become too dominant when the surrounding surface changes.

Contrast matrices are useful for identifying candidate foreground/background combinations, but export should happen after roles are named. Semantic tokens such as color-text-primary or color-action-primary communicate intent better than palette-1 or blue-500 alone.

Common questions

How many colors should a UI palette have?

There is no universal number. Use enough values to cover the roles your interface actually needs, while avoiding near-duplicates that add complexity without creating meaningful distinction.

What does locking a palette color do?

A locked swatch stays fixed while you generate or refine the remaining colors, which is useful for brand colors or values that have already been approved.

Should every pair of palette colors pass WCAG text contrast?

No. Not every pair will be used as text and background. Test the combinations that correspond to actual interface roles and apply the relevant contrast requirement to those uses.