A free colour theory tool for designers and students. Pick a base colour, choose a harmony on the colour wheel and see how the palette behaves in a real layout. Check contrast and colour-blind safety before you commit.
Start from a DIA colour
Your browser blocked copying. Select the text below and press Ctrl+C (⌘C on Mac).
Colour wheel
Base colour
Harmony
How it works
Use it for
Click any colour or tint to copy its hex code. Each ramp runs from lightest (100) to darkest (900). The badge on each swatch shows the contrast of its label text.
Applied with the 60-30-10 rule: one dominant colour, one secondary, one accent.
Sample poster
Sample web page
WCAG 2.2 targets: 4.5:1 for body text, 3:1 for large text, 7:1 for AAA.
Large heading, 24px and up
Body text at 16 pixels needs a contrast ratio of at least 4.5 to 1 to pass WCAG AA.
Captions and small labels are the first to fail.
What you can do with Colour Theory Lab.
Switch between the painter's RYB wheel and the screen RGB wheel and see why the same harmony looks different.
Complementary, split-complementary, analogous, triadic, tetradic and monochrome palettes from any base colour.
Your palette is applied to a poster and a web page so you judge colours in context, not as swatches.
WCAG contrast ratios for every text and background pair, with AA and AAA pass or fail.
Simulate protanopia, deuteranopia and tritanopia to see which colours still separate.
Copy HEX codes or ready-made CSS variables for your project.
Get started in a few steps.
Practical benefits for students and designers.
Colour rules make sense when you watch them change a layout in real time.
The contrast check catches low-contrast pairs before a client or examiner does.
Colour-blind previews show whether your palette still works for about 1 in 12 men.
Generate and test palettes for projects, portfolios and entrance tests in minutes.
Made for learners and working designers.
The ideas behind the tool, in brief.
Harmonies are fixed angle relationships on the colour wheel. Complementary colours sit opposite each other and give maximum contrast. Analogous colours sit side by side and feel calm.
Painters mix pigment on the red-yellow-blue wheel. Screens mix light in red-green-blue. A complementary pair on one wheel is not the same pair on the other.
Lightness, not hue, decides readability. Two very different hues with the same lightness can still be hard to read.
Warm colours advance and cool colours recede, which designers use to create depth and focus.
Study these topics in depth at IMS Design & Innovation Academy, Noida.
More free labs from DIA Design Labs.
It is an interactive colour wheel that generates harmonious palettes from a base colour using rules such as complementary, analogous and triadic, so you can test colour combinations quickly.
Yes. It is free, works in the browser on phone and desktop, and needs no sign-up.
Yes. Copy the HEX codes or CSS variables and use them in Figma, Adobe tools, websites or presentations.
It calculates the WCAG contrast ratio between text and background. 4.5:1 passes AA for body text and 3:1 for large headings.
Pigments mix subtractively (RYB) and light mixes additively (RGB), so the opposite of a colour differs between the two wheels.
Colour theory is part of the foundation year and continues in Communication, Fashion and Interior Design at IMS DIA.
Study design at IMS Design & Innovation Academy. Explore the course, take the DIA Design Aptitude Test (D-DAT) or apply now.