Color Palette Generator

How to Use the Color Palette Generator

1. Choose your base color — use the native color picker, type a hex value (e.g., #4ECDC4), or hit the Random button for inspiration.
2. Select a harmony mode — click the pill buttons to switch between Complementary, Analogous, Triadic, Split-Complementary, Tetradic, or Monochromatic. Each mode produces a different number and arrangement of colors.
3. Explore the palette — each color swatch shows its HEX, RGB, and HSL values. Click any swatch to set it as the new base color and regenerate the palette around it.
4. Lock colors— click the lock icon (🔒) on any swatch to preserve that color when you regenerate or change modes. Locked colors won’t change.
5. Copy individual values — click the hex code on any swatch to copy it to your clipboard.
6. Copy all hex values— use the “Copy All Hex” button to copy every color in the palette at once.
7. Export the palette— choose from CSS Variables, Tailwind Config, JSON, or SCSS and click “Copy Export” to get production-ready code.
8. Try preset palettes — start from one of the curated presets like Ocean Breeze or Neon Night and customize from there.

Understanding Color Harmony

Complementary

Complementary colors sit directly opposite each other on the color wheel (180° apart). This creates the strongest possible contrast — think blue and orange, red and green, or purple and yellow. Complementary palettes are energetic and eye-catching, making them ideal for call-to-action buttons, accent elements, and designs where you want something to pop. The key is to use one color dominantly and the other as an accent to avoid visual vibration.

Analogous

Analogous colors sit next to each other on the color wheel (typically within 30° to 60°). These palettes are naturally harmonious because the colors share similar undertones. Think of a sunset gradient from red to orange to yellow, or a forest palette from dark green to teal. Analogous schemes are soothing and cohesive — perfect for backgrounds, gradients, and designs that should feel unified rather than dramatic. Add one complementary accent for visual interest.

Triadic

Triadic colors are three hues evenly spaced around the color wheel (120° apart). This creates a vibrant, balanced palette with strong visual contrast while maintaining harmony. The primary colors (red, yellow, blue) form a classic triadic scheme. Triadic palettes work well when you need variety and energy — children’s products, festive themes, and bold branding. To keep things balanced, let one color dominate and use the other two as accents.

Split-Complementary

A split-complementary palette starts with a base color and adds the two colors adjacent to its complement (150° and 210° offsets). This gives you the contrast of a complementary scheme but with more nuance and less visual tension. It’s one of the most versatile and beginner-friendly harmony modes — you get visual interest without the harshness of direct complements. Use the base color as the dominant hue and the two split complements for variety.

Tetradic (Rectangle)

Tetradic (or rectangle) palettes use four colors arranged in two complementary pairs, offset by 90° on the color wheel. This creates a rich, diverse palette with warm and cool tones. The challenge is balancing four competing hues — the safest approach is to choose one dominant color, one supporting color, and two accents. Tetradic schemes work well for complex UIs with multiple interactive states, dashboards, and designs that need clear visual separation between sections.

Monochromatic

Monochromatic palettes use a single hue with varying lightness levels, producing five shades from light to dark. This is the safest and most cohesive harmony mode — everything automatically matches because all colors share the same hue and saturation. Monochromatic schemes are perfect for clean, professional designs, creating depth through contrast in lightness rather than hue. They’re a staple in UI design systems for primary buttons, hover states, disabled states, and background layers.

Tips for Creating Effective Color Palettes

• Start with your brand color — enter your primary brand hex value as the base and use complementary or split-complementary for accent colors.
• Use the 60-30-10 rule — allocate 60% of your design to the dominant color, 30% to the secondary, and 10% to the accent. This creates visual hierarchy without chaos.
• Check contrast — always verify that text is readable on your background colors. A contrast ratio of at least 4.5:1 meets WCAG AA standards for body text.
• Lock colors you like — when experimenting, lock swatches you want to keep before regenerating. This lets you refine one color at a time without losing progress.
• Export early and often— use the CSS Variables export for quick integration into your project. Tailwind Config is ideal if you’re using Tailwind CSS.
• Test on real content — a palette that looks great in isolation might not work on a real page. Apply it to a wireframe or prototype before committing.
• Consider accessibility — monochromatic palettes may lack sufficient contrast between adjacent shades. Test your palette with a contrast checker to ensure readability.
• Start from presets— if you’re stuck, click a preset palette and customize from there. The presets are designed to demonstrate each harmony mode at its best.