Built for designers, founders, and developers

Color Palette Generator for Websites and Brands

Generate accessible color palettes, preview them on real UI layouts, check WCAG contrast, and export to CSS, Tailwind, or design tokens.

Website PalettesBrand ColorsTailwind ExportWCAG ContrastFrom Image
Dark
Primary
#6366F1
Light Navy
Dark
Secondary
#8B5CF6
Light Violet
Dark
Accent
#22C55E
Sage
Dark
Background
#0F172A
Deep Cobalt
Dark
Surface
#1E293B
Deep Navy
Light
Text
#F8FAFC
Soft Cyan
Advanced roles (muted text, border)
Dark
Muted Text
#94A3B8
Light Cobalt
Dark
Border
#334155
Dark Cobalt

Live preview

Nova
✨ Now in beta

Ship faster with a beautiful design system

Build, preview, and launch your product with palettes that actually look like a brand.

Fast
Built with the active palette.
Accessible
Built with the active palette.
Themeable
Built with the active palette.

Contrast matrix

WCAG ratios: 7+ AAA, 4.5+ AA (body text), 3+ AA Large (18px+ bold or 24px+). Aim for AA on body text.

Aa
Text on Background
17.06:1
AAA
Aa
Text on Surface
13.98:1
AAA
Aa
Muted text on Background
6.96:1
AA
Aa
Muted text on Surface
5.71:1
AA
Aa
White on Primary
4.47:1
AA Large
OK for large text. Increase contrast for body text.
Aa
Black on Primary
4.19:1
AA Large
OK for large text. Increase contrast for body text.
Aa
White on Accent
2.28:1
Fail
Try near-black text or lighten the background.
Aa
Black on Accent
8.22:1
AAA
Aa
Primary on Background
4.00:1
AA Large
OK for large text. Increase contrast for body text.
Aa
Accent on Background
7.83:1
AAA
Aa
Text on Primary
4.27:1
AA Large
OK for large text. Increase contrast for body text.
Aa
Text on Accent
2.18:1
Fail
Try near-black text or lighten the background.

Export

Copy as text
For developers
Download

Saved palettes

0 stored
Nothing saved yet. Generate a palette and tap Save palette.

Extract palette from image

Drop an image or click to upload
JPG, PNG, or WebP · processed in your browser
All changes update every preview instantly.
Website palettes

Website Color Palette Generator

Most color tools give you swatches and leave the hard work to you. PalettePreview assigns each color to a clear role — primary, secondary, accent, background, surface, text — and previews the result on real SaaS landing page, pricing, dashboard, mobile, ecommerce, blog, and portfolio templates. You can see exactly how your palette behaves on a CTA button, a sidebar, or a hero before committing.

Brand colors

Brand Color Palette Generator

Build a complete brand color palette for logos, websites, social media, and brand kits. Pick a mood — modern, luxury, pastel, bold, earthy, retro, minimal, wellness, playful, dark, clean, or elegant — and PalettePreview crafts a coordinated set of colors that hold together across every surface your brand shows up on. Export a brand sheet PNG to share with your team.

Accessibility

Accessible Color Palette Generator

An accessible palette is the difference between a product everyone can use and one that quietly turns people away. PalettePreview scores every important color pair against WCAG: text on background, muted text on surface, white and black on primary and accent, and more. The Improve Palette button automatically lifts failing pairs to AA or AAA without breaking your brand.

From image

Color Palette Generator From Image

Drop in a photo, illustration, or screenshot and PalettePreview extracts five to eight strong colors entirely in your browser — no upload, no API. Apply the extracted colors as a balanced website palette in one click, or copy individual HEX values. Perfect for translating a photograph, moodboard, or product shot into a usable brand system.

Developer exports

Tailwind and CSS Color Export

Copy CSS variables, SCSS variables, a Tailwind colors config, a shadcn/ui theme snippet, raw JSON, or a full design tokens JSON with HEX, RGB, HSL, and usage notes per role. Download a PNG palette card, a PNG brand sheet, or an SVG palette strip for presentations and handoff.

Use cases

Color Palettes for SaaS, Ecommerce, Blogs, and Portfolios

PalettePreview tunes generation based on what you're building. Each use case biases the mood and contrast in the right direction:

  • SaaS website palettes that feel modern and clean
  • Ecommerce palettes built around bold CTAs and clear product cards
  • Blog palettes optimized for long-form readability
  • Portfolio palettes with confident dark or elegant moods
  • Mobile app palettes with strong contrast on small screens
  • Brand palettes for creators, agencies, and luxury products

Frequently asked questions

Everything about generating, previewing, and exporting color palettes.

How do I make sure my palette has enough contrast?

Aim for a contrast ratio of at least 4.5:1 between body text and its background (WCAG AA). PalettePreview's contrast matrix scores every important pair — text on background, text on surface, button labels on primary, and more — so you can spot weak combinations at a glance. The Improve Palette button automatically nudges colors that fail.

What is the best color palette for a SaaS website?

SaaS websites tend to use one confident brand color for CTAs, a calmer secondary, a single highlight accent for badges and status, and clean neutral surfaces for content. Pick the SaaS Website use case in PalettePreview and it biases toward modern, clean, and minimal moods that match this pattern.

Can I use an image to create a brand palette?

Yes. Drop in a photo, screenshot, or moodboard and PalettePreview extracts five to eight strong colors directly in your browser — no upload, no API. Click Apply as Website Palette to turn the extracted swatches into a balanced role-based palette ready for design or development.

What is the difference between primary, accent, background, and surface colors?

Background is the main page color. Surface sits on top — cards, panels, modals. Primary drives CTAs and links. Accent is used sparingly for highlights, badges, and icons. Separating these roles is what turns a list of swatches into a real design system.

Can I export my palette for Tailwind CSS?

Yes — copy a ready-to-paste Tailwind colors block, a shadcn/ui theme snippet, CSS variables, SCSS variables, JSON, or a full design tokens JSON with HEX, RGB, HSL, and usage notes per role.

Can I use this for client branding work?

Absolutely. PalettePreview is free and runs entirely in your browser. Save palettes locally, download a brand sheet PNG or SVG strip for presentations, and ship the developer exports straight into the build.

What is a color palette generator?

A color palette generator helps you pick a coordinated set of colors for a website, brand, app, or UI design. PalettePreview generates role-based palettes (primary, secondary, accent, background, surface, text) so the colors fit a real design system instead of being a random list of swatches.

Can I save my palettes?

Yes. Saved palettes and a 30-step history live in your browser via localStorage. Undo, redo, restore from history, or load a saved palette with one click.