Color Scale Generator
primary-*neutral-*success-*warning-*danger-*info-*
An @theme block for your main CSS file
@theme {
--color-primary-50: oklch(0.971 0.013 276.966);
--color-primary-100: oklch(0.936 0.031 276.966);
--color-primary-200: oklch(0.886 0.056 276.966);
--color-primary-300: oklch(0.81 0.096 276.966);
--color-primary-400: oklch(0.707 0.154 276.966);
--color-primary-500: oklch(0.641 0.194 276.966);
--color-primary-600: oklch(0.582 0.232 276.966);
--color-primary-700: oklch(0.511 0.23 276.966);
--color-primary-800: oklch(0.448 0.19 276.966);
--color-primary-900: oklch(0.399 0.153 276.966);
--color-primary-950: oklch(0.258 0.1 276.966);
--color-neutral-50: oklch(0.971 0.001 278.767);
--color-neutral-100: oklch(0.934 0.003 278.767);
--color-neutral-200: oklch(0.88 0.005 278.767);
--color-neutral-300: oklch(0.799 0.009 278.767);
--color-neutral-400: oklch(0.689 0.016 278.767);
--color-neutral-500: oklch(0.618 0.02 278.767);
--color-neutral-600: oklch(0.555 0.02 278.767);
--color-neutral-700: oklch(0.488 0.018 278.767);
--color-neutral-800: oklch(0.431 0.015 278.767);
--color-neutral-900: oklch(0.386 0.012 278.767);
--color-neutral-950: oklch(0.258 0.008 278.767);
--color-success-50: oklch(0.971 0.009 149.921);
--color-success-100: oklch(0.935 0.023 149.921);
--color-success-200: oklch(0.883 0.045 149.921);
--color-success-300: oklch(0.805 0.084 149.921);
--color-success-400: oklch(0.699 0.14 149.921);
--color-success-500: oklch(0.631 0.174 149.921);
--color-success-600: oklch(0.572 0.158 149.921);
--color-success-700: oklch(0.501 0.138 149.921);
--color-success-800: oklch(0.441 0.122 149.921);
--color-success-900: oklch(0.394 0.104 149.921);
--color-success-950: oklch(0.258 0.068 149.921);
--color-warning-50: oklch(0.971 0.017 74.898);
--color-warning-100: oklch(0.928 0.045 74.898);
--color-warning-200: oklch(0.864 0.086 74.898);
--color-warning-300: oklch(0.769 0.162 74.898);
--color-warning-400: oklch(0.672 0.142 74.898);
--color-warning-500: oklch(0.61 0.129 74.898);
--color-warning-600: oklch(0.554 0.117 74.898);
--color-warning-700: oklch(0.487 0.103 74.898);
--color-warning-800: oklch(0.431 0.091 74.898);
--color-warning-900: oklch(0.386 0.082 74.898);
--color-warning-950: oklch(0.258 0.054 74.898);
--color-danger-50: oklch(0.971 0.01 25.038);
--color-danger-100: oklch(0.938 0.026 25.038);
--color-danger-200: oklch(0.89 0.05 25.038);
--color-danger-300: oklch(0.817 0.094 25.038);
--color-danger-400: oklch(0.719 0.156 25.038);
--color-danger-500: oklch(0.656 0.194 25.038);
--color-danger-600: oklch(0.599 0.2 25.038);
--color-danger-700: oklch(0.522 0.174 25.038);
--color-danger-800: oklch(0.457 0.144 25.038);
--color-danger-900: oklch(0.405 0.116 25.038);
--color-danger-950: oklch(0.258 0.076 25.038);
--color-info-50: oklch(0.971 0.007 239.977);
--color-info-100: oklch(0.934 0.019 239.977);
--color-info-200: oklch(0.881 0.037 239.977);
--color-info-300: oklch(0.8 0.069 239.977);
--color-info-400: oklch(0.69 0.114 239.977);
--color-info-500: oklch(0.62 0.142 239.977);
--color-info-600: oklch(0.563 0.129 239.977);
--color-info-700: oklch(0.494 0.113 239.977);
--color-info-800: oklch(0.436 0.1 239.977);
--color-info-900: oklch(0.39 0.085 239.977);
--color-info-950: oklch(0.258 0.056 239.977);
}
Preview (shadcn/ui theme)
Weekly report
Updated just now
Payment failed. Check your card.
Weekly report
Updated just now
Payment failed. Check your card.
Convert
- HEX
- #4f46e5
- RGB
- rgb(79 70 229)
- HSL
- hsl(243.4 75.4% 58.6%)
- OKLCH
- oklch(0.511 0.23 276.966)
- OKLab
- oklab(0.511 0.0279 -0.2284)
- Display P3
- color(display-p3 0.3039 0.2758 0.8646)
Contrast
Large text 24px
Body text at 14px reads like this. The quick brown fox jumps over the lazy dog.
WCAG 2 ratio
4.83:1
- AA normal text (4.5)Pass
- AA large text (3)Pass
- AAA normal text (7)Fail
- AAA large text (4.5)Pass
- Icons and controls (3)Pass
APCA (WCAG 3 draft)
Lc 73.6
Content text, at least 16px
Closest text color that passes:
How to build a color palette
- Type or pick your brand color in the first row. Any CSS color works: hex, rgb(), hsl() or oklch().
- Click Match to first for a matching neutral, success, warning, danger and info, or add your own colors with + Color.
- Adjust hue shift and saturation, and click any swatch to copy its hex value.
- Pick an export format, then copy or download it. For shadcn/ui, choose which colors act as primary, neutral and destructive.
- Open Convert & check to convert a color or test text against a background for WCAG and APCA contrast.
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.
| Export | Use it for |
|---|---|
| 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. |
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.