Color Palette
Color Palette — runs in your browser. Inputs are not stored.
Harmonious color palette
Enter values, then press Calculate.
How to use
- Enter a six-digit color starting with # in Base HEX. The default is #3b82f6.
- In Harmony, choose analogous, complementary, triadic, or monochrome tones.
- Press Generate to show a 5-color swatch grid.
- Copy HEX list to paste the codes into a design tool.
- This screen does not guarantee text contrast; check separately with a WCAG contrast checker. Reset restores the default color.
Key concepts
Color palette generation pulls 5 colors from one brand HEX for UI accents and slide themes. On the HSL wheel, analogous uses nearby hues, complementary the opposite, triadic 120° steps, and monochrome the same hue with changed lightness. CMYK and alpha (transparency) are not covered. Experiment with analogous, complementary, triadic, and monochrome 5-color palettes from one main HEX.
Accessibility (luminance contrast) is not fitted. Check background and body combinations with a WCAG contrast tool for AA/AAA. Results are a design reference; color values are not sent to a server. Only HSL hue angles are rotated, so contrast ratios are not computed. Confirm body colors with a WCAG contrast check. A safe flow is to verify AA with WCAG contrast before using colors on body text or buttons.
Example
Base #3b82f6 and analogous harmony produce five adjacent blue cells you can copy as a HEX list. Complementary mixes in an orange-side contrast color. Monochrome is five light–dark steps of the same blue. Always five colors. Complementary #ef4444 mixes teal-side colors; monochrome is lightness steps of the same red. Copy the HEX list into a design tool. Triadic #22c55e places three 120° directions across five cells. Copy the HEX list into a design tool.
Related: WCAG contrast · color converter
Frequently asked questions
Does the color palette guarantee WCAG contrast?
No. Check contrast separately with a WCAG contrast tool. Button and body combinations often fail—do not trust the palette alone. Light text on a light background often fails.
Is there a CMYK print palette?
It is HEX/RGB based. Print conversion is a separate process. Print CMYK needs a separate conversion.
Does it use transparent (alpha) HEX?
No. Only #RRGGBB. 8-digit HEX alpha may be truncated or error. Do not use HEX with alpha.
How many colors are in the palette?
Always 5 colors. Always five cells. There is no option to change the count.
Is the base color sent to a server?
No. Calculation runs only in the browser. The base HEX is not stored.
What is the difference between analogous, complementary, and triadic?
Analogous is nearby hues, complementary the opposite, triadic three equal wheel slices. Monochrome changes lightness only. Analogous is adjacent hue; triadic is 120°. Monochrome tones keep hue fixed and change lightness.
Last reviewed: 2026-09-04