Which harmony should I pick?

Quick guide: complementary = highest contrast and focus (good for CTA buttons), analogous = calm and natural (good for brand identity), triadic = lively and balanced (good for kids sites, apps), tetradic = varied and demanding (good for designers who know what they’re doing), monochromatic = elegant and consistent (good for minimalist design).

Are the colors accessibility-approved (WCAG)?

Not automatically. The tool generates aesthetically coherent colors, but text-vs-background contrast must be tested separately against WCAG (4.5:1 for regular text, 3:1 for large text). Use a contrast tool like WebAIM Contrast Checker after picking any two colors you want to combine.

Can I lock one color and let the rest update?

In the current version the base color drives the whole palette; the others are computed from it. For "lock and shuffle" patterns you have to change the base manually to the color you like and see how the rest shift. Full color locking is planned.

Do the harmonies work in every color space?

The math is in HSL, which is intuitive but not perceptually uniform, meaning the same degree rotation doesn’t always give the same perceived difference. Newer models like OKLCH give better results for pro designers, but HSL is fine for most web-theming needs.

Palette helper | Verktøy

How it works

Pick a base color and a harmonious palette is built from the color wheel. Analogous gives neighbouring colors that sit calmly together, complementary gives strong contrast, and monochromatic gives shades of one hue. Perfect for quickly theming a website.

About this tool

The palette tool generates a full color palette from a single base color, with five classic color harmonies: complementary (180° on the color wheel), analogous (five hues spread ±30°/±15°), triadic (three colors 120° apart), tetradic (four colors 90° apart) and monochromatic (five lightness variants of the same hue). Perfect starting point for logo design, website theme, moodboard, poster or brand manual. All colors are shown as clickable swatches with the HEX value; one click copies the code to the clipboard. You can also export the whole palette as CSS variables ready to paste into your stylesheet.

How to use it

Pick a base color with the color picker, or paste a HEX code directly.
See the five harmonies calculated automatically below.
Click any swatch to copy the HEX value to the clipboard.
Press "Copy all as CSS variables" to export the whole palette.

Examples

Brand palette from a logo color

InputBase: #2563EB (blue). Using triadic harmony.

Output

Gives #2563EB (primary), #EB2563 (magenta, accent), #63EB25 (green, secondary). The combination suits data visualisation and call-to-action buttons.

Triadic gives high contrast and a lively feel. For a calm, professional look try analogous or monochromatic instead.

Dark-mode theme from a single color

InputBase: #14B8A6 (teal). Using monochromatic harmony.

Output5 shades from light to dark: #ECFEFA, #99F6E4, #14B8A6, #0F766E, #042F2C. Suits layered UI in dark mode.

Monochromatic gives a "pretty" consistent feel. Use the lightest as background in light mode, darkest as text color in dark mode.

Common use cases

Brand development: build secondary and accent colors from the logo.
Website theming: define primary, secondary, accent and background.
Data visualization: pick a series of category colors that look good together.
Graphic design: posters, decks and infographics with thoughtful coloring.
Interior and fashion: find complementary colors for a given hue.

Frequently asked questions

Which harmony should I pick?: Quick guide: complementary = highest contrast and focus (good for CTA buttons), analogous = calm and natural (good for brand identity), triadic = lively and balanced (good for kids sites, apps), tetradic = varied and demanding (good for designers who know what they’re doing), monochromatic = elegant and consistent (good for minimalist design).
Are the colors accessibility-approved (WCAG)?: Not automatically. The tool generates aesthetically coherent colors, but text-vs-background contrast must be tested separately against WCAG (4.5:1 for regular text, 3:1 for large text). Use a contrast tool like WebAIM Contrast Checker after picking any two colors you want to combine.
Can I lock one color and let the rest update?: In the current version the base color drives the whole palette; the others are computed from it. For "lock and shuffle" patterns you have to change the base manually to the color you like and see how the rest shift. Full color locking is planned.
Do the harmonies work in every color space?: The math is in HSL, which is intuitive but not perceptually uniform, meaning the same degree rotation doesn’t always give the same perceived difference. Newer models like OKLCH give better results for pro designers, but HSL is fine for most web-theming needs.

Technical background

Math: HEX is converted to HSL. Harmonies are pure H rotation (S and L are preserved): complementary = H + 180°, triadic = H, H+120, H+240, tetradic = H, H+90, H+180, H+270, analogous = H-30, H-15, H, H+15, H+30. Monochromatic keeps H and S constant and generates L values {95%, 75%, original, 25%, 10%} for a light-to-dark series. All values are converted back to HEX for display. Copy-to-clipboard uses `navigator.clipboard.writeText`. CSS export generates `--color-primary: #...; --color-primary-light: #...;` etc. No external dependency beyond standard browser APIs.