Color Palette Generator

Create the perfect 4-color scheme

Generate professional color schemes with just one slider. Get 2 colors for text and background, 1 accent color for highlights, and 1 tertiary color for personality - all perfectly balanced using HSL color theory.

Choose Your Color

Hue: 0°

Choose Your Style

Dark Mode

Toggle between light and dark themes

Your Color Palette

Primary

Main Background

#f2d9d9

Pre-Primary

Light Background

#f9ecec

Secondary

Text

#260d0d

Tertiary

Highlights

#5c0a5c

Accent

Actions

#5c5c0a

Generated CSS

:root {
    --primary: hsl(0, 50%, 90%);
    --pre-primary: hsl(0, 50%, 95%);
    --secondary: hsl(0, 50%, 10%);
    --tertiary: hsl(300, 80%, 20%);
    --accent: hsl(60, 80%, 20%);
}

.dark {
    --primary: hsl(0, 50%, 15%);
    --pre-primary: hsl(0, 50%, 20%);
    --secondary: hsl(0, 50%, 88%);
    --tertiary: hsl(300, 80%, 65%);
    --accent: hsl(60, 80%, 60%);
}

About Color Palette Generator

Create perfect color palettes using HSL color theory. Simply adjust the hue slider to generate coordinated primary, secondary, accent, and tertiary colors. Features intelligent defaults, dark mode support, and CSS variable output for immediate use in your projects. Choose from different style presets like Professional, Vibrant, Soft, or Bold to match your design needs.

Explore Design Tools

Discover all tools in the design tools category

Browse Category