Generate a Color Scheme Online

Build complementary, analogous, triadic, split-complementary, tetradic, and monochromatic schemes from a base color, with a real contrast ratio on every swatch and color blindness previews underneath.

PAL

Color Palette Generator

LOCAL · Browser-Only

Generate beautiful color palettes from any base color

·Share recipe

Quick Start

1Set a base color with the swatch picker and lock it
2Choose a harmony such as complementary, triadic, or tetradic
3Click any swatch to copy its HEX, HSL, or RGB value
4Copy the whole scheme as CSS variables, SCSS, JSON, or a shareable link

What This Tool Does

Seven schemes are generated from a base hue: complementary at 180 degrees, analogous in fifteen degree steps either side, triadic at 120, split-complementary at 150 and 210, tetradic at ninety degree intervals, monochromatic across lightness alone, and a fully random set. Lock a color and the rest of the scheme is rebuilt around it.

Every swatch carries its contrast ratio against white and against black, graded to the standard AA and AAA thresholds for normal and large text. A full matrix compares every pair in the palette, which is what tells you that two of your colors can never sit on top of each other.

A palette can also be pulled out of an image you drop in, and previewed through protanopia, deuteranopia, tritanopia and achromatopsia simulations, so you can see whether two of your colors collapse into one for part of your audience.

Limits Worth Knowing

Every export copies to the clipboard. Nothing downloads as a file, including the SVG strip and the shareable link.
A palette holds between two and ten colors and is not saved anywhere; the shareable link export is the only way to keep one.
The color name under each swatch is the nearest standard name, so it is approximate rather than exact.
When several colors are locked, only the first sets the base hue for the next generation.
Image extraction works from a small sample of the picture, so the palette approximates the image rather than reproducing exact pixel values.

Common Questions

What can I export?

CSS custom properties, SCSS variables, config snippets for utility CSS frameworks in two shapes, JSON, a plain array of hex values, an SVG strip and a shareable link. All of them copy to your clipboard.

How do I keep one color fixed?

Lock it. Generating again rebuilds the other swatches around the locked hue instead of starting from scratch.

Does it check accessibility?

It reports real contrast ratios against white, black and every other color in the palette, and grades each one against the AA and AAA thresholds for both normal and large text.

More Generate Tools

All generators →

Generate Open Graph Tags Online

Generate Open Graph meta tags for Facebook, LinkedIn, and social shares. Free OG tag generator with a live social card preview, no signup.

Generate Meta Tags HTML Online

Generate SEO meta tags HTML for the head of your page. Free meta tag generator covering title, description, Open Graph, and Twitter Cards.

Generate a Cron Expression for Weekdays Online

Build a cron expression that runs on weekdays using a visual editor. Free crontab generator with next-run preview for Linux and GitHub Actions, no signup.

Generate a Neumorphism Box Shadow Online

Build soft neumorphism and layered box shadows visually with a live preview. Free CSS box shadow generator with multiple layers and inset, no signup.

Generate a Linear Gradient in CSS Online

Create a CSS linear gradient with a visual angle control and color stops. Free linear gradient generator with live preview and copy, no signup.

Generate a Blog Post URL Slug Online

Turn a post title into a clean, SEO-friendly slug. Free slug generator for WordPress permalinks and blog URLs, no signup.

Looking for FAQs and advanced options? Visit the full Color Palette Generator page →