Color & DesignGenerator Development Design & Color

Tailwind Color Scale Generator

Tailwind Color Scale Generator is a free Tailwind color generator that turns a single base color into a full 50-950 (11 shades) lightness scale, just like Tailwind's default palette. Build a Tailwind palette from your brand color or any color you like in an instant, ready to drop straight into a design system or theme config.

Base color

Color name

Display format

Share or save the current scale via URL.

Generated color scale

50
#EFF6FE
100
#DDEBFD
200
#C1DCFC
300
#95C4FC
400
#58A3F8
500Base
#1E90FF
600
#006BE3
700
#005BC7
800
#004AA9
900
#004185
950
#04294F

Export

@theme {
  --color-brand-50: oklch(0.971 0.013 253.2);
  --color-brand-100: oklch(0.936 0.028 253.2);
  --color-brand-200: oklch(0.885 0.052 253.2);
  --color-brand-300: oklch(0.808 0.094 253.2);
  --color-brand-400: oklch(0.704 0.146 253.2);
  --color-brand-500: oklch(0.652 0.19 253.2);
  --color-brand-600: oklch(0.549 0.201 257.7);
  --color-brand-700: oklch(0.494 0.184 258.1);
  --color-brand-800: oklch(0.432 0.165 258.7);
  --color-brand-900: oklch(0.382 0.128 255.5);
  --color-brand-950: oklch(0.281 0.081 253.2);
}

Scale generation runs entirely in your browser, and the color you enter is never sent to any external server.

Color Picker

Pick colors from an image and get the HEX, RGB, or HSL code. Zoom in with the loupe for pixel-level accuracy and export your palette. Free, no signup.

Design & Color
Productivity

Color Palette Extractor

Extract dominant colors from images and build a palette with HEX/RGB/HSL, color shares and 4–12 colors. Export to CSS/SCSS/Tailwind/JSON — all in your browser.

Extraction
Design & Color

Color Palette Generator

Free color palette generator. Pick one base color to generate complementary, analogous, triadic, and other color schemes from color theory. Export as CSS variables, Tailwind, SCSS, or JSON. Runs entirely in your browser.

Generator
Design & Color

Color Code Converter

Convert color codes between HEX, RGB, HSL, HSV, and OKLCH, with alpha and a CMYK reference. Copy any format in one click. Runs entirely in your browser.

Converter
Design & Color

Contrast Checker

Check color contrast against WCAG 2.1 / 2.2 AA and AAA, with passing-color suggestions, color-blindness simulation, and APCA. Runs entirely in your browser.

Checker
Design & Color
Accessibility

CSS Gradient Generator

Free CSS gradient generator for linear, radial, and conic gradients. Adjust colors, angle, and alpha, then copy as CSS, Tailwind, or SCSS. Runs in your browser.

Generator
Development
Design & Color

About Tailwind Color Scale Generator

Enter the base color as HEX like #1E90FF, or as rgb(30, 144, 255) or oklch(0.65 0.19 253). You can also pick one from the native color picker or hit "Random" to explore colors. The tool automatically finds the shade (50-950) closest to your color's lightness, keeps your input color as-is at that shade, and generates the rest around it. Colors are computed in the OKLCH color space used by Tailwind CSS v4, so the lightness of each step is perceptually even and the color scale looks natural.

Export the generated scale in every format at once: Tailwind v4 (@theme OKLCH variables), Tailwind v3 (theme.extend.colors for tailwind.config.js), CSS Variables, and JSON. Set a color name (for example brand or primary) and it flows into the variable names, so you can copy and paste straight into your tailwind config or stylesheet. Each shade can be displayed and copied as HEX, OKLCH, HSL, or RGB, and every swatch shows whether black or white text reads better on it (a contrast guide).

Scale calculation runs entirely in your browser, and the color you enter is never sent to any external server. No account or sign-up required — just start generating.

How to use

Enter a base color in the input field (HEX, RGB, HSL, and OKLCH are accepted), or pick one from the color picker. Hit "Random" when you want a fresh idea.
Optionally enter a color name (for example brand or primary). It flows into the variable names on export.
Review the generated 50-950 (11 shades) scale. The shade closest to your input color gets a "Base" badge, and that color is kept as-is.
Switch the display format (HEX, OKLCH, HSL, or RGB) and copy any shade's value with the copy button.
Under "Export", switch between the Tailwind v4, Tailwind v3, CSS Variables, and JSON tabs, then use "Copy" to grab the full code and paste it into your tailwind config or styles.
Press "Copy URL" to get a shareable link that reproduces the current scale — handy for sharing with your team or bookmarking.

Use cases

Front-end engineers building a Tailwind 50-950 scale from a single brand color and dropping it straight into tailwind.config.
Developers migrating to Tailwind CSS v4 who want to define custom colors with @theme and OKLCH.
Designers who want a systematic set of lightness variations for button and link states (hover, active) in a design system.
Anyone preparing a custom primary color scale to match components like shadcn/ui.
Anyone who wants to generate everything from a light background (50, 100) to a dark text color (900, 950) starting from one existing color.
Anyone who wants to hand a chosen color scale to their team via a share URL or reproduce the same scale later.

Notes

Scale generation runs entirely in your browser, and the color you enter is never sent anywhere.
The base color can be entered as HEX, RGB, HSL, or OKLCH. Transparency (alpha) is not supported.
The shade closest to your input color's lightness is detected automatically, and your input color is used as-is at that shade (for example, a light color lands the base around 200, a dark color around 800).
Colors are calculated in the same OKLCH color space as Tailwind CSS v4, and colors outside the sRGB display range are clamped back into it automatically. The result does not perfectly match Tailwind's actual default palette.
The share URL contains only the base color, color name, and display format. Opening it reproduces the scale with the same settings.

FAQ

Are the colors I enter sent to a server?

No. Color scale generation runs entirely in your browser, so you can safely use it with brand colors or colors from your work.

How are the Tailwind 50-950 shades created?

Your input color is converted into the same OKLCH color space as Tailwind CSS v4, and the lightness of each shade is assigned along a curve close to Tailwind's default palette. The shade nearest your input color's lightness keeps the base color as-is, while chroma is higher in the middle shades and tapers off gently toward both ends (50 and 950).

Can I export in Tailwind v4 or v3 format?

Both are supported. The export tabs let you switch between Tailwind v4 (@theme OKLCH variables) and Tailwind v3 (theme.extend.colors in tailwind.config.js, HEX). You can also export as CSS Variables and JSON, and the "Copy" button copies the full code.

Are the colors exported as OKLCH or HEX?

The Tailwind v4 format uses OKLCH, while the Tailwind v3, CSS Variables, and JSON formats use HEX. For the swatches, you can switch the display between HEX, OKLCH, HSL, and RGB to view and copy values.

Can I change the color name (variable name)?

The name you enter in the "Color name" field (for example brand or primary) flows into the variable names on export. If left blank, brand is used. In Tailwind you can then use it like `bg-brand-500`.

Can I share or save the scale I create?

Press "Copy URL" to get a share URL that includes the base color, color name, and display format. Opening that URL reproduces the same scale, which is handy for sharing with your team or bookmarking.