Free · no sign-up

Mix your colors and fonts designmixer

45Google fonts

5export formats

AAWCAG 2.2 contrast

Mix a color palette with a font pair, check WCAG contrast and see the result on live components. Then export ready-made CSS variables, a Tailwind config, JSON tokens or an AI prompt.

Start mixing Export

Runs in your browser · nothing is sent

CSS variablesTailwind configJSON tokensWCAG 2.2 AAAI promptDark modeCSS variablesTailwind configJSON tokensWCAG 2.2 AAAI promptDark modeCSS variablesTailwind configJSON tokensWCAG 2.2 AAAI promptDark modeCSS variablesTailwind configJSON tokensWCAG 2.2 AAAI promptDark mode

TypographyPalette 50–700ContrastComponentsExportTypographyPalette 50–700ContrastComponentsExportTypographyPalette 50–700ContrastComponentsExportTypographyPalette 50–700ContrastComponentsExport

01 · Typography

Fonts and type scale

Heading font (Google Fonts)

Body font (Google Fonts)

Base size (px)

Type scale

02 · Colors

Color palette

Enforce WCAG AA contrast Nudges shades 300/400/500/600 until every pair below passes 4.5:1

Primary color (base — shade 500)

Accent color (base — shade 500)

Primary

Accent

Neutral

WCAG contrast

03 · Components

Live preview — light and dark

Light mode

Dark mode

04 · Export

Configuration and export

Project name

Style

Before you write your first line of CSS

What is Design Mixer and why use it?

Colors and fonts are the two decisions that shape a website's character the most — yet they're usually made separately and "by eye." Design Mixer puts them side by side: you see how your palette behaves with your font pair before you code anything. Without that, after a few weeks the project looks like a patchwork of five different websites.

You pick two Google Fonts and a primary and an accent color, and the tool builds full shade scales (50–700), a neutral gray scale and a mapping for light and dark mode. The contrast of every key color pair is checked instantly against WCAG 2.1 (AA and AAA thresholds), and the component preview shows the result in practice.

You take the finished mix in the format you use daily: CSS variables ready to paste, a Tailwind config, JSON tokens (W3C Design Tokens format) or an AI prompt — e.g. for Claude — that builds an interface in your colors and fonts. Everything runs in your browser; no data is sent anywhere.

Frequently asked questions

How do I choose a color palette for a website?

Choose one of the preset palettes or pick your own primary and accent color. Design Mixer builds full 50–700 shade scales plus a neutral gray scale, mapped to light and dark mode. Every key color pair is checked for WCAG contrast.

How do I pick a font pair?

Choose a heading font and a body font separately from 45 Google Fonts (modern sans, classic sans, serif, monospace and creative) and instantly see them in the type scale and on live components. Contrasting characters work well — e.g. a serif heading with a sans body — or one font in two weights.

Is the color mix accessible (WCAG)?

The tool computes the contrast ratio for text on the primary and accent colors and for body text on light and dark backgrounds, labelling results with AA (4.5:1), AA Large (3:1) and AAA (7:1) badges. If a pair fails, just nudge the base color — results recalculate live.

Which export formats are available?

Five formats: CSS variables (custom properties with light and dark mode support), a Tailwind CSS config, JSON tokens in the W3C Design Tokens format, accessibility guidelines computed for your palette, and an AI prompt that describes the whole mix and asks for matching components.

Is the tool free, and what happens to my data?

Yes — the tool is completely free and requires no sign-up. All logic runs in your browser: your configuration is stored only locally (localStorage), and the share link encodes settings in the URL. Nothing is sent to any server.