staticdata.dev
Menu
Datasets About Contact

Tailwind Colors

The 22-color default Tailwind CSS v3 palette (hex values from `tailwindcss/colors` in v3.4.19), with each named color mapped to its 50, 100, 200, …, 900, 950 shades. Useful for design tokens, theme builders, color pickers, and any tool that needs to present the Tailwind palette without depending on Tailwind itself.

v1.0.0 MIT 22 records Updated 2026-10-05 stable Source:  Tailwind CSS v3 colors (customizing colors), [email protected] src/public/colors.js

Quick fetch

Stable URL. CORS-enabled. No auth.

bash
curl https://staticdata.dev/v1/tailwind-colors.json

Or use as a typed import: import { tailwindColors } from "https://staticdata.dev/v1/tailwind-colors.ts"

Formats

  • JSON 6.7 KB

    /v1/tailwind-colors.json

    Open

    min: 4.4 KB · /v1/tailwind-colors.min.json

  • CSV 5.0 KB

    /v1/tailwind-colors.csv

    Open
  • TypeScript 7.0 KB

    /v1/tailwind-colors.ts

    export const tailwindColors

    type TailwindColor = (typeof tailwindColors)[number]

    Open

Schema

Each record in the dataset has the following shape.

Schema
Field Type Description Example
name string Color name as used in Tailwind class names slate
shades Record<string, string> Map of shade key (50, 100, …, 950) to Tailwind v3 hex color {"500":"#64748b"}

Preview

First 10 records.

Data preview
name
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime

Showing 10 of 22. View full data:  JSON · CSV

Fetch examples

Drop-in snippets in five languages.

curl
curl -sSL https://staticdata.dev/v1/tailwind-colors.json | jq '.[0]'
JavaScript
import type { TailwindColor } from "https://staticdata.dev/v1/tailwind-colors.ts";

const res = await fetch("https://staticdata.dev/v1/tailwind-colors.min.json");
if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
const tailwindColors: TailwindColor[] = await res.json();
console.log(tailwindColors[0]);
Python
import urllib.request, json

with urllib.request.urlopen("https://staticdata.dev/v1/tailwind-colors.min.json") as r:
    tailwindColors = json.load(r)

print(tailwindColors[0])
Go
package main

import (
	"encoding/json"
	"fmt"
	"net/http"
)

func main() {
	resp, err := http.Get("https://staticdata.dev/v1/tailwind-colors.min.json")
	if err != nil { panic(err) }
	defer resp.Body.Close()

	var data []map[string]any
	if err := json.NewDecoder(resp.Body).Decode(&data); err != nil {
		panic(err)
	}
	fmt.Println(data[0])
}
Rust
use serde_json::Value;

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let body = ureq::get("https://staticdata.dev/v1/tailwind-colors.min.json").call()?.into_string()?;
    let data: Vec<Value> = serde_json::from_str(&body)?;
    println!("{:?}", data.first());
    Ok(())
}

Sources and methodology

Which version: the hex values are the Tailwind CSS v3 palette, verified against [email protected] (the latest v3 release as of October 2026). Tailwind CSS v4 redefined the default palette in OKLCH (e.g. --color-red-500: oklch(63.7% 0.237 25.331)), so v4 colors are not identical to these hex values, and v4.2+ also adds the mauve, olive, mist and taupe grays, which are not included here. If you target v4, read the --color-* variables from tailwindcss/theme.css instead.

Each color object always contains the same set of keys: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. This shape was unified in Tailwind v3.3; older versions did not include 950.

Hex values are lowercase 6-digit (#rrggbb), no alpha channel. Convert to RGB or HSL at the consumer.

For non-default colors (custom palettes, the deprecated colors lightBlue/warmGray/trueGray/coolGray/blueGray from earlier Tailwind versions, or third-party packages), this dataset is not authoritative.

Versioning

URLs under /v1/ are stable: field names and types will not change in a way that breaks consumers. Values can be corrected or records added when the upstream source changes; schema-incompatible updates ship under a new version path. See the tailwind-colors changelog for this dataset's history.

More Code datasets