Color Palette Generator
Pick a base color and generate harmonious palettes — copy hex codes, HSL values, or CSS variables.
#063075
hsl(217, 91%, 24%) · Dark
#0A54CD
hsl(217, 91%, 42%) · Shadow
#3C83F6
hsl(217, 91%, 60%) · Base
#94BBFA
hsl(217, 91%, 78%) · Tint
#D8E6FD
hsl(217, 91%, 92%) · Light
Export Palette
CSS Variables pastes a ready-to-use :root { } block.
How to Generate a Color Palette — Color Theory Explained
This color palette generator uses color theory to build harmonious color combinations from any base color. Pick a color with the color picker or type a hex code, choose a harmony rule, and copy the results into your project.
Harmony types
- 🎨Monochromatic — shades, tints, and tones of one hue. Safe, elegant, and versatile.
- ⚡Complementary — colors directly opposite on the wheel. Maximum contrast; great for call-to-action buttons.
- 🌿Analogous — adjacent hues on the wheel. Calm and cohesive; common in nature-inspired design.
- 🔺Triadic — three hues 120° apart. Vibrant and balanced; good for playful or bold brands.
- ✂️Split-complementary — softer alternative to complementary. Contrast without harshness.
- 🟦Tetradic — four hues at 90° intervals. Rich variety; let one color dominate to avoid chaos.
Frequently asked
What is a hex color code? A 6-character string (e.g. #3B82F6) representing red, green, and blue values in hexadecimal. Used universally in CSS, Figma, and design tools.
What is HSL? Hue (0–360°, position on the color wheel), Saturation (0–100%, color intensity), and Lightness (0–100%, brightness). More intuitive than RGB for making design decisions.
How do I use these in CSS? Click "Copy CSS Variables" to paste a :root block directly into your stylesheet.
How do I use these in Figma or Sketch? Copy individual hex codes and paste them into the color fill field of any shape or text layer.