# Color Scale Generator

> Turn one color into a full 50–950 scale in OKLCH, with matching neutral and status colors. Export Tailwind v4, shadcn/ui, CSS, SCSS or JSON, and convert colors or check WCAG and APCA contrast.

- URL: https://www.vartula.net/tools/color-scale-generator
- Category: Color
- Price: free, no sign-up
- Privacy: runs entirely in the browser; files are never uploaded
- Last updated: 2026-10-14

## Tailwind color scales and themes from one color

The Color Scale Generator turns a brand color into a full 50–950 scale in OKLCH, the color space Tailwind CSS v4 and shadcn/ui use. Your color lands unchanged on its nearest shade, and the other shades follow Tailwind's own lightness and colorfulness curves, kept inside what ordinary screens can show.

Add matching neutral, success, warning, danger and info colors in one click, preview them as a light and dark app theme, and export Tailwind v4 `@theme`, a shadcn/ui theme, CSS variables, a Tailwind v3 config, SCSS or JSON design tokens. The Convert & check tab converts between HEX, RGB, HSL, OKLCH, OKLab and Display P3 and checks contrast with WCAG 2 and APCA.

## How to build a color palette

1. Type or pick your brand color in the first row. Any CSS color works: hex, rgb(), hsl() or oklch().
2. Click Match to first for a matching neutral, success, warning, danger and info, or add your own colors with + Color.
3. Adjust hue shift and saturation, and click any swatch to copy its hex value.
4. Pick an export format, then copy or download it. For shadcn/ui, choose which colors act as primary, neutral and destructive.
5. Open Convert & check to convert a color or test text against a background for WCAG and APCA contrast.

## Exports

- **Tailwind v4**: An `@theme` block with `--color-name-50` … `--color-name-950`, in OKLCH or hex.
- **shadcn/ui**: `:root` and `.dark` theme variables, including charts and sidebar, ready for globals.css.
- **CSS variables**: Plain custom properties for any framework.
- **Tailwind v3**: `theme.extend.colors` for tailwind.config.js, in hex.
- **SCSS**: Sass variables such as `$primary-500`.
- **JSON tokens**: W3C design tokens for Figma plugins, Style Dictionary and other tools.

## Frequently asked questions

### How are the shades generated?

Vartula works in OKLCH, where lightness matches how bright a color looks. Your color keeps its exact value on the shade whose lightness is closest; the other shades follow the lightness and chroma curves of Tailwind CSS v4's default palette, bent so the curve passes through your color, and chroma is reduced where needed so every shade fits in sRGB.

### Why OKLCH instead of HSL?

In HSL, yellow and blue at the same lightness look very different in brightness, so scales built in HSL come out uneven. OKLCH lightness is perceptual, so a 500 shade looks equally strong across hues. Tailwind CSS v4 and shadcn/ui both define their colors in OKLCH.

### What is the difference between WCAG 2 and APCA contrast?

WCAG 2 gives a ratio from 1 to 21; 4.5 is the minimum for normal text (AA) and 7 for AAA. APCA, the method proposed for WCAG 3, gives a lightness contrast (Lc) that accounts for text polarity and is more accurate for dark themes; Lc 75 suits body text and Lc 60 content text. Vartula shows both, and suggests the nearest text color that passes.

### What does “wider than sRGB” mean?

Some OKLCH and Display P3 colors are more vivid than standard sRGB screens can show. Wide-gamut screens (most current phones and laptops) display them exactly; others show the nearest sRGB color, which is what the HEX, RGB and HSL values give you.

### Is anything uploaded?

No. Everything is calculated in your browser. The palette is stored in the page address after “#” so you can bookmark or share it; browsers never send that part to a server.