Build a complete UI colour system from 1–3 seed colours. Every colour shown doing real work — with code ready for web, mobile, and desktop platforms.
Enter one colour and the tool generates a complete harmonious palette around it. Try different harmony rules to explore variations.
Seed colourEach colour owns a distinct region — primary for headers, accent for one focal element per screen, secondary for structure, surface for cards, background for page fill. Every text element uses its on-colour.
What is WCAG contrast? The Web Content Accessibility Guidelines define minimum contrast ratios so people with low vision or colour blindness can read your interface. AA (4.5:1) is the standard for normal-sized body text. AA Large (3:1) applies to large text (18px+ bold, 24px+ regular) and UI components like buttons and icons. AAA (7:1) is the enhanced level — aim for this in body copy wherever possible.
Pairs marked Fail need attention before your interface is considered accessible. Each failing pair includes a specific suggestion below.
Copy your colour tokens for use in code. All formats include both the colour and its on-colour for every role.