Website Color Palette Generator

Harmony
Theme

Preview

Acme
Sign up
New · Version 2.0

Build your next project faster

Acme brings your team, your tasks and your files together, so you can focus on the work that matters.

Get startedLearn more
Fast setupStart in minutes, no configuration needed.
All in oneEvery tool your team needs, in one place.
SmartSuggestions that save you hours every week.
ProMost popular

$19 / month

  • Unlimited projects
  • Priority support
  • Advanced analytics
Choose Pro
Stay in touchEmail addressyou@example.comSend me the newsletterYour account is ready.Your trial ends in 3 days.This email is already used.
© AcmeContact us

Your palette

Background

Page background

#F7FAFF · #0B0F17

Surface

Cards, menus, inputs

#FFFFFF · #151A22

Border

Separators and outlines

#D8DEEA · #292E37

Text

Titles and body text

#161B23 · #EBF2FE

Muted text

Secondary text

#5E646E · #9EA5B0

Primary

Buttons and links

#2F6FEB · #518DFF

Primary hover

Hovered buttons

#1959D3 · #71A3FF

On primary

Text on primary buttons

#FFFFFF · #0B0F17

Link

Links and icons

#2C6CE8 · #518DFF

Accent

Badges and highlights

#B95900 · #F27706

On accent

Text on accent

#FFFFFF · #0B0F17

Success

Confirmations

#009342 · #4AC06C

Warning

Warnings

#D38F00 · #F9AD26

Danger

Errors, delete actions

#C0453D · #EA6B60

Click a color to copy it. Left: light theme, right: dark theme.

Contrast check

Light theme

Text on background16.5:1AAA
Muted text on background5.7:1AA
Button text on primary4.6:1AA
Links on background4.5:1AA
Primary buttons on background4.4:1AA large

Dark theme

Text on background17.0:1AAA
Muted text on background7.7:1AAA
Button text on primary6.0:1AA
Links on background6.0:1AA
Primary buttons on background6.0:1AA

WCAG accessibility levels: text and links need 4.5:1 (AA), buttons 3:1 to stand out. Text and link colors are adjusted automatically. Your color is kept as it is for the buttons of the light theme: a very light color may not stand out on the background.

Shades

primary
50
100
200
300
400
500
600
700
800
900
950
accent
50
100
200
300
400
500
600
700
800
900
950
neutral
50
100
200
300
400
500
600
700
800
900
950

From 50 (lightest) to 950 (darkest), like the Tailwind scales. Click a shade to copy it.

Export

:root {
  --background: #F7FAFF;
  --surface: #FFFFFF;
  --border: #D8DEEA;
  --text: #161B23;
  --muted: #5E646E;
  --primary: #2F6FEB;
  --primary-hover: #1959D3;
  --on-primary: #FFFFFF;
  --link: #2C6CE8;
  --accent: #B95900;
  --on-accent: #FFFFFF;
  --success: #009342;
  --warning: #D38F00;
  --danger: #C0453D;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0B0F17;
    --surface: #151A22;
    --border: #292E37;
    --text: #EBF2FE;
    --muted: #9EA5B0;
    --primary: #518DFF;
    --primary-hover: #71A3FF;
    --on-primary: #0B0F17;
    --link: #518DFF;
    --accent: #F27706;
    --on-accent: #0B0F17;
    --success: #4AC06C;
    --warning: #F9AD26;
    --danger: #EA6B60;
  }
}
A link that opens this exact palette, to send to a client or a teammate.

A complete color palette for your website

Most palette generators give you five colors and leave you to guess where each one goes. This one starts from a single color you like and builds a palette ready for a website: each color has a role (background, cards, text, buttons, accent, success and error states), in a light and a dark theme. The contrast is checked for accessibility, a preview shows the palette on a real page layout, and the code is ready to paste in CSS or Tailwind.

How to generate a color scheme

  1. Choose your main color with the color picker, paste its HEX, RGB or HSL code, or try a random one.
  2. Pick a harmony for the accent color and the themes you need: light, dark or both.
  3. Check the preview and the contrast, then copy the CSS, Tailwind or JSON code.

What is in the palette

  • Background, surface and border: the page, the cards and the separators, in grays tinted with your color.
  • Text and muted text: titles, body text and secondary information, with enough contrast.
  • Primary and accent: buttons, links, badges and highlights, with a hover color and the right text color on top.
  • Success, warning and danger: confirmation, warning and error messages that match the palette.
  • Shades from 50 to 950: the full scale of your color, the accent and the grays, for every other need.

Frequently asked questions

How do I create a color palette for my website?

Choose the main color of your brand, or click the random button for ideas. The generator builds every color a website needs from it: buttons, links, backgrounds, cards, borders, text and state colors, for a light and a dark theme. Check the result on the preview, then export the code.

What do the harmony options change?

They choose the accent color, used for badges and highlights. Monochrome keeps your hue, Analogous takes a neighboring hue for a soft look, Complementary takes the opposite hue for strong contrast, and Triadic a hue a third of the color wheel away. Auto gives a balanced accent close to the complementary color.

Is the palette accessible?

The contrast of every important pair is checked with the WCAG 2 formula and shown with its level. Text and secondary text are adjusted automatically to reach 4.5:1 on the background (level AA). Your own color is kept as it is for the buttons of the light theme, and the button text is set to white or dark, whichever reads better.

How is the dark theme created?

A dark theme is not an inverted light theme. The backgrounds become dark grays tinted with your hue, the text becomes light, and your color and the accent are made lighter so they stay readable and do not look dull on a dark background.

How do I use the palette in my code?

Export it as CSS variables: the dark theme is applied automatically with prefers-color-scheme. For Tailwind CSS v4, the export also maps the variables to utilities such as bg-primary or text-muted, and adds the full shades from 50 to 950. JSON is available for design tools and other frameworks.

Can I share a palette?

Yes. The address of the page follows your settings: copy the link and anyone who opens it gets exactly the same palette.

Related tools

  • Image color picker: get the HEX code of a color from a logo or a photo, then build a palette from it.
  • PNG to ICO: create the favicon of your website.