Color Palette Generator

Generate harmonious color palettes from any base color. Click a swatch to copy its HEX code, or export the full palette as CSS custom properties.

rgb(91, 141, 238) hsl(220°, 80%, 65%)

Two colors opposite each other on the color wheel — maximum contrast and visual tension.

How to Use

Click the color swatch on the left or type a 6-digit HEX code (e.g. #FF6B6B) to set your base color.
Choose a color harmony type — Complementary for high contrast, Analogous for subtle harmony, Triadic for vibrant variety, Monochromatic for elegant depth.
Click any palette swatch to copy its HEX code to the clipboard instantly.
Click Export CSS Variables to get all colors formatted as :root { --color-base: #...; } CSS custom properties, ready to paste into your stylesheet.
Use Copy All HEX to copy every palette color as a comma-separated list, or Random Color for creative inspiration.

About This Tool

Color harmony is the art of combining colors that are pleasing together, based on their positions on the color wheel. The Hue-Saturation-Lightness (HSL) color model makes it straightforward to calculate color relationships: the hue is the color angle (0–360°), saturation controls vividness (0–100%), and lightness controls brightness (0–100%). Complementary colors are directly opposite on the wheel (180°), creating strong contrast ideal for call-to-action buttons or warning states. Analogous palettes use colors 30–60° apart, creating calming, cohesive designs suited to backgrounds and gradients. Triadic schemes pick three equally spaced colors (120° apart), balancing variety with visual unity — popular in illustration and logo design. Split-Complementary softens the high contrast of a pure complement by offsetting ±30°. Tetradic (rectangle) schemes use four colors in two complementary pairs for rich, complex palettes. Monochromatic palettes vary only the lightness of a single hue, ideal for minimal UI design. All calculations run entirely in your browser; no data is ever sent to any server.

Frequently Asked Questions

Which color palette is best for a website or app?

It depends on the goal. For professional tools and dashboards, monochromatic or analogous palettes create a calm, trustworthy feel. For marketing pages and e-commerce CTAs, complementary colors create visual tension that draws attention to key actions. For creative or consumer apps, triadic schemes deliver energy and visual richness without appearing chaotic. A common approach: use an analogous palette for background surfaces, then add a complementary accent for interactive elements.

What is the difference between HEX, RGB, and HSL color formats?

All three describe the same color in different notations. HEX (e.g. #5B8DEE) is a base-16 encoding widely used in HTML and CSS. RGB (e.g. rgb(91, 141, 238)) specifies red, green, and blue channel intensities from 0 to 255. HSL (e.g. hsl(220, 80%, 65%)) separates the perceptual properties: hue (color angle 0–360°), saturation (vividness), and lightness. HSL is much more intuitive for generating color variations because you can adjust just the lightness to create tints and shades, or just the hue to generate harmonics.

How do I use the exported CSS variables in my project?

Copy the exported :root { ... } block and paste it at the top of your CSS file, or inside a <style> tag in your HTML. Then reference any color anywhere in your CSS using var(--color-base), var(--color-complement), etc. This approach is recommended because updating a single variable value instantly updates all its usages throughout your stylesheet — making theme changes trivial.

Why does my generated palette look washed out or too dark?

The output palette quality depends on the base color's saturation and lightness. Very light colors (lightness above 80%) or very desaturated grays tend to produce less visually distinct palettes. For best results, use a base color with saturation between 40–80% and lightness between 35–65%. The Random Color button generates colors in this ideal range if you need inspiration.