Color Palette Generator
Color
Pick a base color and instantly generate a coordinated palette using classical color theory: complementary, analogous, triadic, tetradic, split-complementary, or monochromatic. Each swatch shows its HEX value, can be copied with one click, and stays readable thanks to automatic foreground contrast.
How to use
- Pick a base color with the swatch or type a HEX.
- Choose a color scheme.
- Copy any single color, or all of them at once.
- Use the colors in your design or CSS.
Frequently asked questions
- What do the schemes mean?
- Complementary pairs opposites on the color wheel; analogous picks neighbors; triadic and tetradic space them evenly; split-complementary softens a complement; monochromatic varies lightness.
- What color space is used?
- Colors are rotated in HSL hue and re-encoded to HEX, which keeps the saturation and lightness of your base color.
- Can I copy all at once?
- Yes — use the Copy All button at the bottom to copy the palette as a comma-separated list.
- Are these accessible?
- The harmony rules don't guarantee accessibility. For UI text, also check contrast with the Color Contrast Checker tool.
Related tools
Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.