Color Palette Generator
Generate beautiful color palettes with various color harmony algorithms.
Palette Controls
Export Options
Your Palette
Related Tools
Pattern Generator
Create beautiful CSS patterns with stripes, dots, waves, and more. Generate SVG patterns and CSS backgrounds with live preview
Color Format Conversion
Convert any color to HEX, RGB, HSL, CMYK, LAB, OKLCH, video formats, and more with accessibility insights and exports
Lighten Color
Make colors lighter by adjusting their brightness and luminosity
Darken Color
Make colors darker by reducing their brightness and luminosity
CSS Gradient Generator
Create beautiful CSS gradients with advanced controls for linear, radial, and conic gradients. Real-time preview and export options.
Box Shadow Generator
Generate stunning CSS box shadows with live preview, multiple layers, presets, and export options for web design
How to use the palette generator
- Pick a generation mode that matches your goal. Use monochromatic for tints and shades, complementary for contrast, and split complementary for balanced variety.
- Choose a base color. Paste a HEX value if you have a brand color, or open the picker to explore quickly.
- Adjust the number of colors. Five works well for dashboards, while three is plenty for buttons and alerts.
- Lock any swatch you like. Regenerate to fill only the unlocked spots with new colors.
- Copy values or export when you are happy. CSS Variables work well for web apps, JSON fits design tokens, and Tailwind config helps front-end teams.
Example palettes by mode
Monochromatic (Base #3B82F6)
#E0F2FE - #60A5FA - #3B82F6 - #2563EB - #1E3A8A
Good for button states, focus outlines, and chart series that need consistent hue.
Analogous (Base #F97316)
#FACC15 - #F97316 - #EA580C - #C026D3 - #F59E0B
Useful for warm hero banners or gradient backgrounds with smooth transitions.
Complementary (Base #10B981)
#10B981 - #047857 - #F97316 - #EA580C - #FDBA74
Pair the green with its orange complement for success vs. warning messaging.
Triadic (Base #6366F1)
#6366F1 - #F472B6 - #22D3EE - #7C3AED - #EC4899
Triadic sets work for data visualizations that need three distinct clusters.
Tetradic (Base #EF4444)
#EF4444 - #F97316 - #10B981 - #3B82F6 - #F59E0B
Four-color schemes cover dashboards with highlights, alerts, and neutral accents.
Split Complementary (Base #0EA5E9)
#0EA5E9 - #0284C7 - #F97316 - #F59E0B - #FDE68A
Pick this for marketing emails where you need a main color plus two supporting accents.
Practical combinations
- Navigation bars: #111827 background, #3B82F6 active link, #9CA3AF hover link, #E5E7EB divider.
- CTA buttons: Primary #2563EB, hover #1D4ED8, focus ring #BFDBFE, text #FFFFFF.
- Alert set: Success #10B981, Warning #F59E0B, Error #EF4444, Info #3B82F6, Neutral #6B7280.
- Gradient banner: Start #4338CA, mid #6366F1, end #818CF8, overlay text #F9FAFB.
Export ideas
Use exports to keep color tokens in sync:
- CSS variables example:
--brand-primary: #2563EB; - SCSS snippet:
$chart-accent: #F97316; - Tailwind config entry:
'brand-500': '#2563EB' - JSON token:
{ "name": "background-soft", "hex": "#F1F5F9" }
Teams often export one palette for UI and another for data viz. Saving both lets you swap them fast.
Simple checks before you ship
- Confirm 4.5:1 contrast for text. Darken or lighten background colors if the ratio fails.
- Run the palette through a color blindness simulator. Locked swatches help fix problem pairs.
- Keep HEX, RGB, and HSL copies. Developers, designers, and analytics teams prefer different formats.
- Label your saved palettes with date and purpose so you can tell “marketing Q1” from “product UI”.