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.
Quick fetch
Stable URL. CORS-enabled. No auth.
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
min: 4.4 KB · /v1/tailwind-colors.min.json
- CSV 5.0 KB
/v1/tailwind-colors.csv
- TypeScript 7.0 KB
/v1/tailwind-colors.ts
export const tailwindColors
type TailwindColor = (typeof tailwindColors)[number]
Schema
Each record in the dataset has the following shape.
| 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.
Fetch examples
Drop-in snippets in five languages.
curl -sSL https://staticdata.dev/v1/tailwind-colors.json | jq '.[0]' 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]); 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]) 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])
} 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 tailwindcss@3.4.19 (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
- ansi-colors
- ascii
- cron-presets
- css-at-rules
- css-functions
- css-named-colors
- css-properties
- css-pseudo-classes
- css-pseudo-elements
- css-units
- data-units
- exit-codes
- file-signatures
- hash-algorithms
- js-array-methods
- js-math-methods
- js-object-methods
- js-string-methods
- json-schema-keywords
- jwt-claims
- mathematical-constants
- measurement-units
- node-builtin-modules
- owasp-top-10
- periodic-table
- physical-constants
- posix-signals
- programming-languages
- regex-flags
- regex-patterns
- roman-numerals
- si-base-units
- si-derived-units
- si-prefixes
- spdx-licenses
- strftime-tokens
- time-units
- unicode-blocks
- unicode-general-categories
- unicode-planes
- unix-file-permissions
- xterm-256-colors