Color Palette Generator
Generate complementary, analogous, triadic and monochrome palettes. View HEX, RGB and HSL values and copy HEX codes for your designs.
Inputs are not collected. Usage measurement requires your consent.
Generated palette
Done
Color Palette Generator
Next time, open this tool from My Tools. Only the tool list is saved in this browser, not your inputs or results.
⌥DPress Option+D anytime to toggle My Tools instantly
How to use
- 1
Pick a base color
Choose the base color with the picker or by HEX code.
- 2
Choose a scheme
Select complementary, analogous, triadic or monochrome.
- 3
Copy the codes
Press a generated color’s button to copy its HEX code.
Features
- Four schemes: complementary, analogous, triadic and monochrome
- Displays HEX, RGB and HSL values; copies HEX
- Palettes update instantly as the base color changes
- Your colors are never sent to a server
Use cases
Website color design
Build the whole color balance from a single primary color.
Banner and asset design
Prepare color combinations for banners and thumbnails quickly.
Brand color systems
Align button, background and accent hues around your brand color.
Details
A color palette is a set of colors used in a design. Picking additional colors based on hue relationships around the color wheel keeps the palette cohesive. Common schemes include complementary (opposite hue), analogous (neighboring hues), triadic (evenly spaced) and monochrome (lightness variations).
This tool computes colors in the HSL color space (hue, saturation, lightness), so palettes are derived mathematically from your base color. Each generated color shows HEX (#RRGGBB), RGB and HSL values. Each card’s button copies its HEX code.
Everything runs in your browser - the colors you choose are never sent to a server. Palettes regenerate instantly, so you can compare schemes while adjusting the base color.
FAQ
What is a complementary color?
It is a candidate with hue rotated 180 degrees from the base. Measure the actual text/background contrast before assigning a role.
Can I save the generated palette?
Copy the codes and paste them into your design tool or CSS. The tool does not store palettes.
How do I choose a base color?
Pick your brand color or a color matching the mood of your site. When unsure, start with a color you like and expand with analogous or monochrome schemes.
Are my colors sent anywhere?
No. All computation happens locally in your browser and nothing is transmitted.
Related guide
GuideHEX, RGB and HSL Conversion: Formats, Alpha and Rounding
Convert HEX, RGB and HSL with worked values. Check shorthand HEX, integer HSL rounding, alpha compositing and the tool’s supported input formats.
GuideChoose a Color Palette: Complementary, Analogous and Triadic Workflows
Compare four palette schemes, actual generated color counts and HEX copying. Assign background, text and action roles, then check contrast on the finished screen.
GuideWCAG 2.2 Contrast Ratios: Thresholds, Transparent Backgrounds and Checks
Choose the WCAG 2.2 threshold for text or UI, measure actual foreground and background colors, and avoid rounded-ratio and translucent-background mistakes.
Related Tools
Color Converter
Convert between HEX, RGB and HSL. Pick colors directly with the color picker.
Contrast Checker
Calculate the contrast ratio between text and background colors and check WCAG conformance (AA, AAA) instantly — for readable, accessible color combinations.
Image Palette Extractor
Upload an image and extract its dominant colors as a palette. Choose 4, 6 or 8 colors and copy HEX or RGB codes with one click. Everything runs locally in your browser.
Image Compressor
Compress image files and compare the result as you adjust quality and dimensions for websites or social media.
All processing happens in your browser. Your files are never uploaded.
Verified: Browser checks cover counts for four schemes, HEX copying and invalid inputs