Colour Wheel v1.0.0
A palette for every possibility. Explore harmonies, pick from an image, and find colours that look good together.
Your colour, at the centre.
Drag around for hue. Move inward for softer colour.
Harmony markers show how your colours connect.
Pick a colour anywhere on your screen in a supported browser, or use Image picker.
One colour. Every format.
HEX without alpha is an opaque colour. HEX8 and RGBA retain opacity. CMYK is a simple screen conversion; printed colours depend on your printer profile.
Find your harmony.
Tap a swatch to copy its HEX. Choose Use to make it your base.
What about supplementary and contrasting colours?
Complementary hues are opposite on this digital RGB wheel, 180° apart. “Supplementary” is sometimes used for the same pairing. Opposite hues can feel vivid, but do not guarantee readable text: check the actual luminance contrast in Contrast checker.
A little lighter. A little deeper.
Tap a tint, shade or tone to copy its code.
Tints · add white
Shades · add black
Tones · add grey
Find the colours in your image.
Choose a photo, then tap a pixel to sample it. You can also paste an image from your clipboard.
JPEG, PNG, WebP, HEIC, AVIF, GIF or SVG · up to 30 MB
Picked from your image.
The palette below is extracted from a smaller copy. Pixel picking uses the original image resolution.
An instant palette.
Representative colours, extracted locally.
Choose an image to see its palette.
Make every word readable.
Check foreground and background colours using WCAG 2.2 contrast ratios.
How to interpret the result
Normal text needs at least 4.5:1 for AA or 7:1 for AAA. Large text needs 3:1 for AA or 4.5:1 for AAA. Large means at least 18 pt regular or 14 pt bold. Relevant UI boundaries and graphics need 3:1. Passing a colour pair alone does not certify a whole design. Transparent colours are composited over the page colour first; pass/fail uses the unrounded ratio.
Good colour speaks clearly.
The quick brown fox jumps over the lazy dog. A little care makes a big difference.
Sample interfaceLet your colours flow.
Build a gradient with up to eight stops. Change positions, add opacity, or start with your harmony.
Colour stops Colour · code · position %
Live preview
Image and SVG exports keep the size you choose. Radial gradients use a circle centred on the image.
A name for every shade.
Search standard CSS colour names, then tap to use one on the wheel.
Mix something new.
A digital blend, rather than a physical paint prediction.
A little inspiration.
Ready-made starting points, fully yours to change.
My palette
Tap a swatch to copy. Lock colours before shuffling, or use arrows to reorder. Up to 12 colours. GIMP palettes store opaque RGB; use JSON, CSS or SVG to retain opacity.
Saved palettes on this device
Saving is optional. Palettes are stored only in this browser, and clearing browser data can remove them. A downloaded JSON backup travels with you.