Color Palette Generator
Pick a base color and a harmony rule and get a matching palette instantly. The generator rotates the hue or steps the lightness to build complementary, analogous, triadic, tetradic, monochromatic, shade and tint sets, ready to copy as hex, RGB or HSL.
How to generate a color palette
- Pick your base color with the color picker or paste a hex value like #3366CC.
- Choose a scheme: complementary, analogous, triadic, tetradic, monochromatic, shades or tints.
- Click any swatch to copy its hex, or use Copy all to grab the whole palette.
Examples
Complementary of red
baseColor: "#FF0000", scheme: "complementary"
#FF0000, #00FFFF
Triadic of red
baseColor: "#FF0000", scheme: "triadic"
#FF0000, #00FF00, #0000FF
Frequently asked questions
How are the palette colors calculated?
Your base color is converted to HSL. For complementary, analogous, triadic and tetradic schemes the hue is rotated around the color wheel (180, 30, 120 or 90 degrees apart). For monochromatic, shades and tints the hue and saturation stay fixed while the lightness is stepped, then every result is converted back to hex, RGB and HSL.
What is the difference between complementary, triadic and analogous?
Complementary uses the base color plus its opposite on the wheel for high contrast. Triadic uses three colors spaced 120 degrees apart for a balanced, vivid look. Analogous uses neighbors 30 degrees on each side of the base for a soft, harmonious blend.
What is the difference between shades, tints and monochromatic?
Shades mix the base color toward black, tints mix it toward white, and monochromatic spreads several lightness levels evenly across the range. All three keep the same hue, so they read as one color family rather than a contrasting scheme.
Which color formats can I copy?
Each swatch shows its hex, RGB and HSL value. Click a swatch to copy its hex code, or use Copy all to copy every hex in the palette at once so you can paste them straight into CSS or a design tool.
What hex formats does the input accept?
You can paste a 6-digit hex such as #3366CC or a 3-digit shorthand such as #36C, with or without the leading hash. Invalid values are flagged so you can fix them before generating.
Is my color sent to a server?
No. The whole palette is calculated in your browser as you change the color or scheme, so nothing about your colors leaves your device.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Color Contrast Checker
Check the WCAG contrast ratio between two colors. See AA and AAA pass or fail for normal and large text, with a live preview. Runs in your browser.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
CSS Clamp Generator
Generate a responsive CSS clamp() value for fluid font sizes and spacing. Set min and max sizes plus viewport bounds and copy the result.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.