Tailwind Color Palette Generator

Why 50-950 exists

A single brand color is not enough for a component library. A button needs a resting color, a hover color, an active color and a disabled color. A card needs a surface that is lighter than the page but darker than white. An alert needs a background, a border and text.

The 50-950 scale gives the design system a shared vocabulary for those steps. Low numbers are light, high numbers are dark, and the middle is usually close to the base color. The exact values are less important than the relationships between them.

Tailwind's default palettes use this convention, which is why a generated ramp is easy to drop into a Tailwind project. It also makes the system portable to CSS variables and other token formats.

What makes a usable Tailwind scale

A usable scale has visible steps. If 400 and 500 are nearly identical, the scale is not giving the designer a real choice. It also has a believable light and dark end: 50 should work as a tinted background, and 950 should work as a deep text or border color.

The base color should sit near the middle, but not necessarily at exactly 500. A very light brand yellow may sit closer to 300, while a deep navy may sit closer to 800. The ramp should preserve the brand's hue while adjusting lightness and, at the extremes, saturation.

Most importantly, the scale should be tested in the roles it will actually play. A 100 that looks beautiful as a background may be unreadable as text. A 600 that works as a button may be too dark for a border.

Generate a scale from one color

Enter a HEX value. The generator converts it to HSL, keeps the hue, and builds a lightness ramp around the base color. Saturation is reduced slightly at the light and dark extremes so the ends do not become neon or muddy.

The result is a starting point, not a law. A designer may want a warmer 50 or a cooler 950. The important thing is that the steps are evenly spaced enough to be useful and that the base color remains recognizable.

If the source is an image, extract the palette first and choose the color that should become the ramp. You can generate a ramp for the primary, the accent and the neutral family.

Use the scale in Tailwind v4

In Tailwind v4, theme values can be defined in CSS with `@theme`. A generated ramp can be exposed as `--color-brand-50` through `--color-brand-950`, which then produces utilities such as `bg-brand-500` and `text-brand-700`.

If you are still on a JavaScript config, the same values can be placed in `theme.extend.colors`. The naming is the same; only the configuration format changes.

Keep the semantic layer separate. Instead of using `bg-brand-500` everywhere, define `--color-primary: var(--color-brand-600)` and use `bg-primary`. That way a future brand adjustment only changes the mapping, not every component.

• Raw ramp: brand-50 through brand-950.
• Semantic mapping: primary, surface, border, muted.
• Components use semantic tokens, not raw steps.
• Check contrast at the semantic layer.

Contrast is still your job

A ramp does not guarantee accessibility. The fact that 600 is darker than 500 does not mean that white text on 600 passes 4.5:1. You still need to measure the pairs you use.

The most common failure is a mid-tone brand color used as a button background with white text. The color may look strong, but the ratio may be below 4.5:1. A darker step, or dark text, may be the accessible choice.

PhotoColors checks the generated primary pair and the text pairs in the brand kit. Use those measurements as a guardrail, then test the actual components.