Base Color
Conversions
Contrast Checker
Color Palettes
Complementary
Analogous
Triadic
Split-Complementary
Shades & Tints
Color harmony rules — complementary, analogous, triadic, tetradic
The color wheel has mathematical relationships that look pleasant together. Our generator produces four:
- Complementary — 180° apart on the wheel. Maximum contrast. Great for call-to-action buttons against backgrounds. High-energy but hard to scale beyond 2 colors.
- Analogous — 3 adjacent hues (30° apart). Calm, cohesive. Good for nature or subdued brand palettes.
- Triadic — 3 colors 120° apart. Vibrant but balanced. Every primary color wheel triangle: red + yellow + blue; green + orange + purple.
- Tetradic (square) — 4 colors 90° apart. Rich but hard to balance — one dominant + three accents usually works better than equal weighting.
- Split-complementary — base + the two colors adjacent to its complement. Softer version of complementary.
- Monochromatic — single hue, varying in saturation + lightness. Sophisticated, easy to use, limits visual hierarchy options.
WCAG contrast — accessibility-first color selection
Color contrast between text and background is a legal accessibility requirement (WCAG 2.1) in many jurisdictions. Ratios:
| Level | Normal text (14-18pt) | Large text (18pt+ or 14pt bold) | UI elements (icons, borders) |
|---|---|---|---|
| WCAG AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| WCAG AAA (enhanced) | 7:1 | 4.5:1 | — |
Black on white = 21:1. Pure primary red on white = 4:1 — fails AA for body text. Dark gray on light gray needs care. Our generator flags combinations that fail AA automatically.
Modern color formats — OKLCH, P3, and why they matter
Beyond RGB and HSL, 2023+ browsers support perceptually uniform color spaces:
- OKLCH —
oklch(L C H)— Lightness, Chroma, Hue. Unlike HSL, changing lightness by 10% looks like the same perceived change across all hues. Best modern choice for design systems. - Display P3 — wider gamut than sRGB. About 25% more visible colors. Most 2020+ phones and laptops display P3. CSS:
color(display-p3 1 0 0)for a redder red than sRGB can show. - CSS
color-mix()— blend two colors in any color space.color-mix(in oklch, blue 40%, white)produces a perceptually-accurate lighter blue without the muddiness sRGB blends cause.
For new projects, consider defining palettes in OKLCH. For legacy compatibility, convert to HEX/RGB at build time. Our converter outputs all formats — pick based on where the color is consumed.
Frequently Asked Questions
How do I generate a color palette from a hex code?
Enter any hex colour (e.g. `#33c375`). The generator produces harmonious palettes: complementary, analogous, triadic, tetradic, monochromatic. Each includes HEX, RGB, HSL and CSS variable-ready output. Perfect for building design systems or starting a brand palette.
How do I convert HEX to RGB or HSL?
Enter hex — the tool shows RGB (`rgb(51, 195, 117)`), HSL (`hsl(146, 59%, 48%)`), and CMYK instantly. Works the other way too: enter RGB or HSL, get hex. Includes opacity support (`rgba`, 8-digit hex like `#33c37580`).
What's the difference between complementary, analogous and triadic palettes?
Complementary = opposite on the colour wheel (high contrast). Analogous = 3 neighbours (calm, cohesive). Triadic = 3 colours evenly spaced (vibrant, balanced). Tetradic = 2 complementary pairs (rich, hard to balance). Our generator shows all four for any base colour.
Are my generated colours WCAG AA accessible?
The contrast checker shows each palette pair's contrast ratio and flags combos that fail WCAG AA (4.5:1 for normal text, 3:1 for large text) or AAA (7:1 / 4.5:1). Essential for accessible UI design.
Can I export my palette to CSS variables, Tailwind or Figma?
Yes. Export formats: CSS custom properties (`--primary: #33c375`), SASS variables, Tailwind config, JSON tokens, or a Figma-ready style list. Copy to clipboard and paste into your project.
Smarter quality checks. Faster deployments.
Better apps.
