How to use
- 1Enter a base color with the picker or as HEX/RGB, or press “Random color” for inspiration.
- 2Choose the color model: OKLCH keeps perceived lightness even, HSL uses the classic color wheel.
- 3Browse complementary, analogous, triadic, split-complementary, tetradic, square and monochrome palettes; click any swatch to make it the new base.
- 4Press “Export this palette” and copy it as CSS variables or a HEX list; open the contrast checker for detailed text/background checks.
Color harmony types explained
A complementary scheme uses two colors opposite each other on the wheel (180°) for strong contrast. Analogous schemes combine neighbours (±30°) for a calm, natural look. Triadic schemes split the wheel into three at 120°; split-complementary takes the two neighbours of the complement (150° and 210°) for a softer balance than pure complementary. Tetradic (rectangle) and square schemes give rich four-color palettes, while monochrome palettes use lighter and darker versions of one hue.
HSL or OKLCH?
When you rotate the hue in HSL, perceived brightness jumps around: a yellow looks far lighter than a blue at the same saturation and lightness. OKLCH is a perceptual model that keeps lightness and chroma constant while the hue rotates, so the palette feels more balanced. Colors that cannot be shown in sRGB are pulled back into gamut by reducing chroma. Use HSL for results close to a traditional painter’s wheel and OKLCH for UI and brand palettes.
Contrast and accessibility hints
Under each swatch you see the WCAG contrast ratio against white (◻) and black (◼) text: 4.5:1 or more passes AA for normal text (green), 3:1 to 4.5:1 is enough only for large text (amber) and anything lower is too weak for text (red). If the palette is going on a website, check your actual text and background pairs in the contrast checker. Everything is calculated in your browser.
Frequently asked questions
How do I find the complementary color?
Rotate the hue by 180° on the color wheel. The tool does this in HSL or OKLCH and gives you the HEX value.
Which colors go well together?
Colors at set angles on the wheel: opposite (complementary), adjacent (analogous), 120° apart (triadic) or 90° apart (square). Monochrome palettes always harmonize.
Can I export the palette to CSS?
Yes. Click “Export this palette”, choose CSS variables and copy; you get a :root block with --color-… custom properties. A plain HEX list is also available.
Does this show how paints mix?
No, it works with screen colors (RGB). For how real pigments mix, use the paint color mixer.
Not happy with the results?
Talk to Webin Agency about fast, SEO-friendly websites, e-commerce and Google Ads management.