How do I make a color palette?

Choose a base color, pick a palette mode such as analogous, triadic or pastel, and set the number of colors. Omni Color generates a harmonious palette instantly. Lock swatches you like, regenerate the rest, then export to CSS, JSON or SVG.

What is the best palette mode for a website?

For most websites, an analogous or monochromatic palette with one accent works best. It keeps the interface calm and consistent while allowing a single high-contrast color for calls to action.

Can I export a palette to CSS?

Yes. Click Copy CSS to get a full :root block with numbered --color tokens. You can also export JSON, SVG or a plain-text list, or share the palette as a URL.

Are the palettes accessible?

Palettes are generated using standard color harmony principles. Accessibility depends on how you pair foreground and background colors — check any pair with the Omni Color contrast checker.

Palette Generator — Create Color Palettes Online

Base color

HEX, RGB, HSL or CSS named color

Palette mode

Palette size

Save as

Preview

How to make a color palette

Pick a base color

Start with your brand color or any color you like. Everything else will be derived from it using standard harmony rules.
Choose a palette mode

Analogous and monochromatic palettes feel calm and coherent. Triadic and tetradic palettes are more vibrant. Mood presets like pastel, neon or vintage set the tone instantly.
Lock what you like

Click the lock icon on any swatch to keep it in place. Regenerate the rest until the palette clicks — locked colors are never touched.
Export

Copy as CSS variables, JSON, SVG or plain text. Or click Share URL to send a permanent link that reproduces the exact palette.

Palette modes explained

Mode	Relationship	Best for
Monochromatic	One hue, varying lightness and saturation	Editorial, minimal interfaces
Analogous	Adjacent hues (±30°)	Nature-inspired, calming UI
Complementary	Base + opposite hue	Strong CTAs, sports brands
Split-complementary	Base + two hues beside the complement	Marketing, packaging
Triadic	Three hues 120° apart	Playful brands, illustrations
Tetradic	Two complementary pairs	Editorial systems, dashboards
Square	Four hues 90° apart	Data visualization categories
Pastel	High lightness, low saturation	Wellness, kids, lifestyle
Neon	High saturation, medium lightness	Gaming, events, energy
Corporate	Blue-led with balanced neutrals	SaaS, finance, B2B
Luxury	Deep tones with gold/burgundy	Fashion, hospitality
Material	Single hue with strong tonal steps	Design systems inspired by Material

Frequently asked questions

How many colors should a palette have?

Most UI palettes work well with 4–6 core colors: one brand/primary hue, one or two neutrals, one accent and one semantic color (success, warning or error). Larger palettes make it harder to keep visual consistency.

What is the difference between a palette and a color scheme?

The terms are often used interchangeably. A palette is any set of colors you choose to work with; a color scheme is usually a palette that has been assigned specific roles — background, text, primary action, accent and so on.

Can I save palettes between visits?

Yes. Click Save palette to store it in your browser’s local storage under a name. Saved palettes persist until you clear your browser data. Nothing is ever uploaded.

How do I share a palette?

Click Share URL. The palette’s hex codes are encoded in the page URL, so anyone with the link will see exactly the same palette.