7 harmony rulesWCAG contrast12 export formatsruns in your browser
See the colour before you commit to it.
Palettes, converters and a contrast checker that show their working. Below, one colour goes through all of it: its harmonies, how text reads on it, how it looks with colour blindness, and the CSS it exports to.
#3563E9The studio’s contrast check picks the text colour; the strip is the nine-step shade scale.
- HEX
- #3563E9
- RGB
- 53 99 233
- HSL
- 225 80% 56%
- OKLCH
- 55.0% 0.209 265
- CMYK
- 77 58 0 9
Seven rules for a palette
Each one applied to the colour above.
- #3563E9#E9BB35
Complementary
The opposite hue on the wheel: maximum contrast, good for an accent.
- #3563E9#E96135#BDE935
Split complementary
The two hues either side of the opposite: contrast with less tension.
- #67E03E#3E67E0#E03E67
Analogous
Neighbours on the wheel: calm, cohesive schemes.
- #3563E9#E93563#63E935
Triadic
Three hues evenly spaced: lively but balanced.
- #3563E9#BB35E9#E9BB35#63E935
Tetradic
Two complementary pairs: rich, and the hardest to balance.
- #3563E9#E935BD#E9BB35#35E961
Square
Four hues evenly spaced: bold, and best with one clearly in charge.
- #0B1228#162F76#1746CF#5E7FE1#AFBEE9
Monochromatic
One hue at several lightnesses: safe and quiet.
Before it ships
Two things a swatch can’t show.
Can the text be read?
Four text colours on the colour above, scored with the WCAG 2.1 formula.
- Aa#FFFFFF5.11:1AA
- Aa#0B0E143.78:1AA large text
- Aa#A6B9EE2.62:1Fails
- Aa#436CE61.10:1Fails
How does it look to everyone?
A four-colour palette as most people see it, and as four kinds of colour blindness do.
- Typical vision
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
What you take away
The studio’s actual output for this colour.
:root {
--brand-100: #d5ddf6;
--brand-300: #7693e9;
--brand-500: #184ada;
--brand-700: #132b73;
--brand-900: #050915;
}// Tailwind CSS v4 config
colors: {
'brand': {
'100': '#d5ddf6',
'300': '#7693e9',
'500': '#184ada',
'700': '#132b73',
'900': '#050915',
},
},- HEX List
- RGB List
- HSL List
- CSS Variables
- JSON
- SVG Palette
- Adobe ASE
- GIMP Palette
- CSV
- Tailwind Config
- SCSS Variables
- Style Dictionary
The tools
9 pages, each for one job.
Palette Generator
Generate color harmonies, shades, tints, and tones. Free online palette generator with export.
Color Converter
Convert colors between HEX, RGB, HSL, OKLCH, LAB, and more. Free online color converter with live preview.
Color Contrast Checker
Check color contrast ratios for WCAG AA and AAA compliance. Free online accessibility checker.
Theme Builder
Build a complete design system from one color. Generate semantic tokens, surfaces, and WCAG-compliant scales.
Gradient Generator
Create beautiful CSS gradients — linear, radial, conic. Free online gradient generator with live preview and CSS export.
Design Tokens
Export your colors as design tokens — CSS custom properties, Tailwind config, JSON, SCSS variables.
Brand Colors
Explore color palettes from top brands. Use brand colors in your designs with HEX codes.
Color Names
Browse named colors with HEX, RGB, HSL values. Find the perfect named color for your design.
Random Color Generator
Generate random colors with hex, RGB, HSL values. Free online random color picker with lock and copy.
Frequently Asked Questions
How does the Theme Builder work?
Enter a primary color and we generate a complete design system: 11-step color scales (50-950) for primary, secondary, accent, and neutral, plus semantic colors, light and dark themes, and developer tokens. Choose from 30+ palette styles, 20+ project types, and 15+ brand personalities.
Can I export design tokens?
Yes. Export the full design system as CSS custom properties, Tailwind CSS v4 config, SCSS variables, LESS variables, or Style Dictionary JSON — ready to copy and paste into your project.
Do you store any color data?
No. Everything runs in your browser. Favorites are stored in localStorage and never leave your machine.
How does the accessibility check work?
The theme builder automatically checks every text-background pair for WCAG 2.1 AA compliance and adjusts colors when needed. The contrast checker tab provides detailed AA/AAA analysis with suggestions.
Pick a colour
Start from one colour and take away the palette, the contrast report and the tokens.
Open the studio