---
title: "Tailwind Color Palette Generator - Create a Tailwind color scale from a base color"
description: "Create a Tailwind color palette from a single base color. Enter a brand color and get a light-to-dark scale that keeps its character, ready to copy into your CSS or Tailwind config."
canonical_url: "https://web-toolbox.dev/en/tools/tailwind-color-palette"
meta:
  author: K
  "og:description": "Create a Tailwind color palette from a single base color. Enter a brand color and get a light-to-dark scale that keeps its character, ready to copy into your CSS or Tailwind config."
  "og:image": "https://web-toolbox.dev/og/en/tools/tailwind-color-palette-fee625b9.png"
  "og:image:alt": "Tailwind Color Palette Generator"
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "Tailwind Color Palette Generator - Create a Tailwind color scale from a base color"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **Tailwind Color Palette Generator**

Turn a base color into a Tailwind palette

## **Base color**

**Color code**

## **Palette**

#3b82f6→Placed at 500

**Notation**

-
-
-
-
-
-
-
-
-
-
-

Select a swatch to copy its value.

## **Code**

theme.css

**Palette name**

**Format**

```
@theme {
  --color-brand-50: oklch(0.97 0.012 254.604);
  --color-brand-100: oklch(0.932 0.028 255.585);
  --color-brand-200: oklch(0.882 0.052 254.128);
  --color-brand-300: oklch(0.809 0.092 251.813);
  --color-brand-400: oklch(0.707 0.145 254.624);
  --color-brand-500: oklch(0.623 0.188 259.815);
  --color-brand-600: oklch(0.546 0.215 262.881);
  --color-brand-700: oklch(0.488 0.213 264.376);
  --color-brand-800: oklch(0.424 0.175 265.638);
  --color-brand-900: oklch(0.379 0.128 265.522);
  --color-brand-950: oklch(0.282 0.08 267.935);
}
```

v4 uses the selected notation; v3 always outputs HEX.

## What is Tailwind Color Palette Generator?

Create a palette of 11 shades for Tailwind from a single color. Enter a brand color and get a range from light to dark that keeps the same character.

Copy the result straight into your Tailwind config or CSS.

## How to Use

1. Enter a base color, or choose one with the picker or "Choose from Tailwind colors".
2. Review the palette, then copy a value from a swatch or use "Copy all colors".
3. In the code section, set the palette name and notation, choose Tailwind v4 or v3, and copy the code.

## Main Settings

### Base color

The color the palette starts from. Your color stays in the palette at the closest shade.

### Palette name

With `**primary**`, you get `**--color-primary-50**` through `**--color-primary-950**` as CSS variables. Spaces, uppercase letters, and symbols are cleaned up automatically: `**Brand Color**` becomes `**brand-color**`. An empty name falls back to `**brand**`.

### Notation

- **OKLCH**: the notation you can use directly in Tailwind v4
- **HEX**: a common color code for CSS and design tools

Tailwind v4 uses the selected notation; v3 always outputs HEX.

### Presets

Choose a base color from the Tailwind color families. Selecting a color bar sets that family's color as the base color.

## Use Cases

- Using a brand color with Tailwind classes
- Preparing a light-to-dark set for tokens such as `**primary**` and `**accent**`
- Matching button and background shades from one existing color

## Things to Keep in Mind

- Very vivid colors may not keep the same vividness at the lightest and darkest ends
- A color copied as OKLCH may look slightly different on screen. In that case, swatches and HEX are approximations

**How was your experience?**

Last updated: October 30, 2026

### **Related Tools**

- [<h4>**Color Contrast Checker**</h4>](https://web-toolbox.dev/en/tools/color-contrast-checker)
- [<h4>**Color Code Converter**</h4>](https://web-toolbox.dev/en/tools/color-converter)
- [<h4>**Color Code Extractor**</h4>](https://web-toolbox.dev/en/tools/color-extractor)
- [<h4>**Color Eyedropper**</h4>](https://web-toolbox.dev/en/tools/color-eyedropper)
- [<h4>**Border Radius Generator**</h4>](https://web-toolbox.dev/en/tools/border-radius-generator)
- [<h4>**Box Shadow Generator**</h4>](https://web-toolbox.dev/en/tools/box-shadow-generator)
- [<h4>**CSS Background Pattern Generator**</h4>](https://web-toolbox.dev/en/tools/css-background-pattern-generator)
- [<h4>**CSS Filter Generator**</h4>](https://web-toolbox.dev/en/tools/css-filter-generator)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/tailwind-color-palette#webpage","@type":"WebPage","description":"Create a Tailwind color palette from a single base color. Enter a brand color and get a light-to-dark scale that keeps its character, ready to copy into your CSS or Tailwind config.","name":"Tailwind Color Palette Generator - Create a Tailwind color scale from a base color","url":"https://web-toolbox.dev/en/tools/tailwind-color-palette","isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/tailwind-color-palette"]}]},{"@id":"https://web-toolbox.dev/en/tools/tailwind-color-palette#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Create a Tailwind color palette from a single base color. Enter a brand color and get a light-to-dark scale that keeps its character, ready to copy into your CSS or Tailwind config.","name":"Tailwind Color Palette Generator - Create a Tailwind color scale from a base color","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.