Advertise on WebGradients — reach designers & frontend developers.Learn more

Colors · HEX · CSS variables

Color Palette Generator

Generate a custom color scheme from the WebGradients palette library. Choose a popular color direction, check WCAG contrast, and export a ready-to-use CSS palette for your next interface.

Palette Lab

Start with a palette that already works

Generate from the WebGradients library, then tune the result for contrast and your visual direction.

Current paletteFive-color system
Accessibility checkWe compare text and background colors against WCAG contrast targets. Higher ratios are easier to read.3/3 checks pass
Ready to use

A ratio such as 4.79:1 compares foreground text with its background. For normal body text, 4.5:1 is the usual WCAG AA minimum; higher is easier to read.

Dark text on SurfaceDark text on Surface: 17.59:1. This passes the selected check. A higher number means stronger separation and easier reading.17.59:1
White text on PrimaryWhite text on Primary: 5.70:1. This passes the selected check. A higher number means stronger separation and easier reading.5.70:1
Accent on SurfaceAccent on Surface: 4.79:1. This passes the selected check. A higher number means stronger separation and easier reading.4.79:1
Color-blind heuristicThis is a quick check for enough hue and luminance separation. It is not a full color-vision simulation or a certification.ReviewCheck with a simulator

Contrast follows WCAG 2.2 thresholds. The color-blind result is a helpful first pass, not a certification.

CSS variablesReady to copy
:root {
  --color-1: #7c3aed;
  --color-2: #101014;
  --color-3: #f7f5ff;
  --color-4: #2563eb;
  --color-5: #ffffff;
}
Export paletteTake it into your workflow
Generate or share a palette to create a link for the exact result.Explore website palettes →

Make a color palette for a website or app

A useful color palette starts with a strong visual system, not six unrelated random hex values. This generator mixes curated WebGradients palettes, keeps a visual relationship between color roles, and lets you steer the result by color direction.

Generate accessible color combinations

Choose WCAG AA or AAA before generating to check common text, button, and accent combinations. The color-blind-friendly option uses luminance and hue separation as a practical heuristic, then reminds you to validate critical work with a dedicated accessibility tool.

Export color tokens for your workflow

Copy CSS variables or download JSON, Tailwind, Figma Tokens, Adobe ASE, Canva TXT, and DesignMD formats. You can also save the palette locally or share its URL with a teammate.

Frequently asked questions

Color palette generator FAQ

Proof of life

A small design resource with a long trail behind it.

WebGradients has stayed useful across tools, communities, and design workflows for a decade. Here are the milestones, mentions, and independent signals behind the project.

1M+Downloads
10M+Visitors since launch
10Years online
2.4k+GitHub stars
150k+Figma plugin users
#2Product Hunt Design Tool, 2017

Mentioned, launched, and used across