Color Palette Generator

How to Choose a Color Palette

Start from the medium, not the mood. A print or editorial site reads well on warm neutrals with a single dark accent. A SaaS dashboard reads well on a low-saturation background with one saturated primary. Pick a palette whose background suits the medium first, and let the accent communicate the brand personality second.

Keep contrast above WCAG AA for every text-and-background pair the palette will see in production. A safe rule is one near-black text color, one near-white background color, one saturated primary, and one accent reserved for hover or emphasis. The palettes on this page all pass AA for normal text against the background role, verified on each detail page.

Limit the number of distinct hues. Three to five is enough for most products. Additional hues fragment the visual system and slow down decisions about which color means what. When in doubt, the W3C Design Tokens Format Module recommends naming colors by role (background, text, primary) rather than by hue (blue, red), because role-based tokens stay stable when the brand changes.

What the Color Roles Mean

Every palette here is a semantic system, not a row of pretty swatches. The roles stay the same across all fourteen palettes: background, text, primary, secondary, accent, surface, border, and muted. Background is the canvas the page sits on. Text is the color the body copy uses. Primary is the action color for buttons and links. Accent is the sparing emphasis color for highlights and hovers. Surface is the raised card color, and border plus muted fill the spaces between.

Naming by role rather than by hue is the part that survives a rebrand. Call a color blue and the brand shifts to green, and every component that referenced blue is now wrong. Call it primary and nothing moves. The palette pages and the export formats both use role names, so a token exported today still means the same thing after a redesign.

Pick a Palette by Context

If you are choosing for a specific project, these clusters are the fastest way in.

• Print-like editorial. Editorial Cream, Paper & Ink, and Linen Press start from warm paper-like backgrounds with ink-dark text. Reach for them on blogs, magazines, and brand sites that want a calm, typographic feel.
• Dark and premium SaaS. Midnight Brand, Ocean Deep, and Terminal Green pair near-black canvases with one saturated primary. Terminal Green is the developer-tool corner, with phosphor green and an amber warning accent.
• Calm and organic. Sage Studio, Forest Ink, and Warm Sand lean on greens, sand, and terracotta. They fit wellness, nature, food, and artisanal brands.
• Soft and friendly. Rose Quartz and Grapefruit use light blush and citrus backgrounds with deep text colors. Good for lifestyle, beauty, and personal-brand sites.
• Bold and creative. Cyber Violet puts electric purple and cyan on a near-black canvas for creative and Web3 brands that want the interface to feel electric.
• Cool and professional. Steel Blue is a gray-blue system built for dashboards, fintech, and enterprise tools, with a navy text color that holds up in dense tables.
• Pure monochrome. Mono Ink is black, gray, and white with a single blue accent. Type and whitespace do all the work, which makes it a strong pairing with the site's font-focused tools.

Contrast Is Part of the Palette

Every palette in the library clears AA for normal text against its own background, and in fact every one clears AAA: the ratios run from 11.02:1 in Grapefruit to 18.97:1 in Mono Ink, with Editorial Cream's ink on cream at 15.49:1. That is by design. The detail page for each palette shows the ratio for the text and background pair, and for the primary color against the background, computed with the W3C formula.

The primary color clears AA for normal text in every palette here, but some stop short of AAA: Rose Quartz's primary measures 5.52:1 and Steel Blue's 6.74:1. That is plenty for a button label. It is not a license to use the accent color for long body copy. When in doubt, run any pair through the WCAG contrast checker before you ship.

Using the Filters

Two filter rows cover the practical axes. Style describes the visual character, with options like dark, warm, monochrome, soft, and developer. Mood describes the feeling, with options like calm, bold, luxury, and playful. A dark developer palette and a soft beauty palette rarely share a mood, so the two rows together narrow the library fast. The count updates live, and your filters persist in the browser between visits. To share a filtered view, the page honors style and mood parameters in the URL on load.

From Palette to Production

Open any palette to get the production view. The detail page shows every role with its hex value and the contrast numbers, then offers exports in six formats: CSS custom properties, SCSS variables, Tailwind config, JSON tokens, SVG, and Markdown. From there the toolkit takes over. The gradient generator builds OKLCH-interpolated gradients from the same color language. The typography playground puts the palette on a real layout with real text. The brand kit folds the palette, a type scale, and a font pairing into one export. And the contrast checker is always there when you want to verify a pair the palette does not define.

Frequently Asked Questions

Related Tools

Pick a palette here, then verify its contrast, preview it on a real layout, or export it as part of a complete brand kit.