Your color playground

One color.Your next palette.

Find colors that work together. See them in action, check contrast and make them yours.

Start with a color

Harmony type

Presets and recent colors

Free to use. Works in your browser. Ready-to-use palettes

This tool runs entirely in your browser, so it needs JavaScript. Turn it on to generate palettes, check WCAG contrast and export tokens. Either way nothing is sent to a server.

Generated palette

Click any color to copy its HEX value. The shade scale is useful for buttons, states, cards and UI surfaces.

Saved palettes stay on this device.

Palette appearance

Canvas backgroundJoin palette swatches

Changes the display only. Your colors and exports stay the same.

Make this palette yours

Lock the colors you want to keep. Edit or reorder the others. Space generates again while the palette is visible; typing and focused buttons keep their normal behavior.

Your colors and order are included when you copy a share link.

shadcn/ui Tailwind v4 · v3

Shade scale

Scale color handling

Chroma reduction preserves the intended lightness and hue before rounding to HEX. Original keeps previous palettes and links.

Ready-to-use palettes

Pick a set to open all its colors in the generator. Edit, compare and save your own version.

Dashboards

Light dashboard7 colorsOpen palette Dark dashboard7 colorsOpen palette Categorical charts7 colorsOpen palette

Pastels

Peach and lavender6 colorsOpen palette Soft garden6 colorsOpen palette Sky and rose6 colorsOpen palette

Blues

Product blue5 colorsOpen palette Navy and sand5 colorsOpen palette Night blue5 colorsOpen palette

These are starting points. Check the actual text and background pairs before using them.

Color inspector

See the current base color in HEX, RGB, HSL and OKLCH formats. Copy any value for implementation and documentation.

#E24B4A

Compose transparency

Paste RGBA, HSLA, OKLCH with alpha, or HEX with alpha. Choose a solid background and apply the resulting opaque color to the tool.

Color with transparencySolid background

Resulting opaque HEX

Color vision preview

Approximate simulations for common color vision deficiencies. These simulations are approximate previews intended for design checks, not medical diagnosis.

WCAG contrast checker

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1. Use these thresholds as a practical baseline for accessible interface text.

Manual check

Text Text HEX Background Background HEX

Ratio

Readable interface text

Adjust contrast

ChangeTarget

A lightness adjustment, with chroma reduction when needed. The final HEX pair is checked at full precision. Review its appearance and text size.

Best combinations

Automatic checks against white, black and palette colors.

Shade contrast matrix · 13 × 13

Rows are backgrounds; columns are text. Includes eleven shade stops, white and black. Use arrow keys inside the matrix and select a pair to inspect it.

Text size

Select a pair to inspect the ratio and use it in the manual checker.

AA: 4.5:1 normal / 3:1 large. AAA: 7:1 normal / 4.5:1 large. These ratings apply to this pair and text size.

Export tokens

Copy CSS variables, Tailwind config, SCSS, JSON tokens and downloadable SVG/PNG palette cards.

Tailwind version

Tailwind v4: primary, secondary and neutral scales from the first two palette colors. Tailwind v3: primary scale and accent.

JSON format

Generate semantic light/dark tokens from the first two palette colors. Keep your existing framework imports.

Color notation

Download palette card

Export a shareable 1200×630 palette card as PNG or SVG. Useful for docs, social previews, Pinterest pins and brand boards.

Generated locally in the browser. Humanity briefly avoided a server call.

Preview of the current palette card — The same card you download as PNG or SVG · 1200 × 630

Extract colors from image

Drop a PNG, JPG or WebP. The image is processed locally in your browser.

Gradient generator

Create CSS gradients from the current palette.

Angle 135°

UI preview

A tiny interface mockup so the palette is not just pretty squares, the usual trap where design goes to look productive.

Production checklist

A small checklist for using the palette in a real website instead of a Dribbble fantasy nobody can read.

Use the shade marked Original as your brand color. Its stop depends on the input color; choose hover and active colors by contrast, rather than assuming 500/600/700.
Use 50/100 shades for surfaces, not saturated colors behind paragraphs.
Check body text at 4.5:1 minimum before shipping.
Test important UI states: hover, disabled, success, warning and error.
Keep one strong accent. Five accents are not a brand system, they are confetti with taxes.

Color tools and guides

Focused pages for contrast, Tailwind palettes, CSS variables, image extraction and gradients.

WCAG contrast checkerCheck accessible text/background combinations. Tailwind color generatorCreate a 50–950 shade scale for Tailwind. CSS color variablesExport design tokens as CSS variables. Image color extractorExtract colors from images locally. CSS gradient generatorBuild gradients from your current palette. Website color scheme generatorPlan primary, neutral and accent colors for real website sections. Brand color palette generatorTurn a brand color into UI-ready palette roles. Color converterConvert HEX, RGB, HSL and OKLCH values. Color shades generatorCreate a 50-950 shade scale from one base color. Color harmony generatorGenerate complementary, analogous and triadic palettes. Dark mode color paletteBuild readable dark surfaces, borders and accents. shadcn theme generatorMap palette values to semantic CSS variables. Design tokens generatorExport color tokens for design systems and frontend teams. Color blindness simulatorPreview palette risk for common color vision deficiencies. Chart color palette generatorCreate distinct colors for dashboards and data visualization. Accessible Color Palette GeneratorGenerate palettes where contrast is checked automatically. Every color combination is tested against WCAG AA and AAA thresholds before you export. Color Palette GeneratorPick one base color and generate a harmonious palette using complementary, analogous, triadic or monochromatic rules. Export to CSS, Tailwind, SCSS or JSON.

How to create an accessible color palette

Start from one brand color, pick a harmony, verify text contrast, then export tokens. For real products, use bright colors for accents and neutral shades for surfaces.

Complementary vs analogous?

Complementary palettes use opposite colors for strong contrast. Analogous palettes use nearby hues for softer, calmer interfaces.

Why does contrast matter?

Low contrast text looks elegant in mockups and terrible for actual humans. Aim for WCAG AA at minimum for body text.

Can I use this for Tailwind?

Yes. The Tailwind export gives a primary shade scale from 50 to 950 plus an accent color when available.

Are images uploaded?

No. Color extraction uses canvas in your browser. Nothing is sent anywhere.