Colour Explorer
Find colours that work together
Start from one colour on the wheel and get balanced palettes with HEX, RGB, HSL and CMYK. Check text contrast, build gradients, browse palette collections, export swatches, and use any palette in the editor or Pattern Studio.
Use it inside the design editor (Colours panel) →Palette generator
Press Space for a new palette. Lock the colours you like — they stay. Drag to reorder.
Dark navy
AAA · 15.4:1
Ink blue
AAA · 13.0:1
Steel blue
AA · 5.2:1
Bronze
AAA · 10.2:1
Snow
AAA · 19.6:1
Export
Contrast checker
Will the text be readable? Ratios follow the WCAG 2 accessibility guidelines.
Large heading text
Normal body text for paragraphs, captions and buttons. The quick brown fox jumps over the lazy dog.
Good for all text sizes.
Gradient builder
background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);Mesh gradients →Palette collections
- Trust blue
- Slate & teal
- Clean finance
Questions
How do I find colours that go together?
Pick a colour on the wheel or type its HEX code, then choose a harmony — complementary, analogous, triadic, split-complementary, tetradic or monochrome. Every swatch shows HEX, RGB, HSL and CMYK.
How do I check if text is readable on a colour?
Use the contrast checker: choose the text and background colours and it shows the contrast ratio with WCAG AA and AAA results for normal and large text.
Can I use the palette in Illustrator or Photoshop?
Yes. Export a palette as an Adobe swatch file (.ase), as CSS variables, as JSON with HEX, RGB, CMYK and HSL, or as a GIMP / Inkscape palette (.gpl).
Are the CMYK values exact?
They are calculated conversions from RGB, good for picking colours. For print-critical brand colours, check with your printer’s colour profile.
Can I use a palette in my design?
Press “Use in the editor”: the palette is saved and appears in the editor’s Colours panel, where you can recolour the whole design or a selected shape.