Which Tailwind version is this?

The reference reflects Tailwind v3.4 colors, which match the v4 default palette. Custom theme colors are not included.

How do I copy a Tailwind class name?

Hover any swatch and click the class name (e.g. bg-blue-500). It copies to your clipboard ready to paste into your markup.

Can I get the OKLCH value of a Tailwind color?

Yes. Click any swatch and the modal shows HEX, RGB, HSL, OKLCH, and LAB values for that exact shade.

Tailwind

Every Tailwind color, ready to copy

Click any swatch to copy its HEX, RGB, HSL, OKLCH or class name. All 22 families ???'- - 11 shades.

Your palette → Tailwind

Live 50–950 ramps generated from your working palette in OKLCH. Drop the snippet into tailwind.config.js and you're wired up.

Edit palette

brand

accent

tertiary

support

muted

New

Looks good in your brand

Live preview using brand-50/700/900 and accent-100/600.

tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
      brand: {
        50: '#f2f2ff',
        100: '#e6e5ff',
        200: '#cdc8ff',
        300: '#b0a2ff',
        400: '#8d73ff',
        500: '#6f4bee',
        600: '#5b2dd2',
        700: '#4918b0',
        800: '#340687',
        900: '#1f005a',
        950: '#11003b',
      },
      accent: {
        50: '#e3faff',
        100: '#caf3ff',
        200: '#97e1f9',
        300: '#4ec9ea',
        400: '#00a4cc',
        500: '#0083ab',
        600: '#006a92',
        700: '#005578',
        800: '#003d5a',
        900: '#002439',
        950: '#001424',
      },
      tertiary: {
        50: '#ffedfd',
        100: '#ffdcf9',
        200: '#ffb9eb',
        300: '#f78dd7',
        400: '#d85db6',
        500: '#b53495',
        600: '#9a127d',
        700: '#7f0065',
        800: '#5e004b',
        900: '#3c002e',
        950: '#26001c',
      },
      support: {
        50: '#e3fde6',
        100: '#cafad0',
        200: '#97eca5',
        300: '#4ed770',
        400: '#00b436',
        500: '#009200',
        600: '#007800',
        700: '#006100',
        800: '#004700',
        900: '#002b00',
        950: '#001a00',
      },
      muted: {
        50: '#fcf4e3',
        100: '#f8eacb',
        200: '#ead29c',
        300: '#d6b362',
        400: '#b58b1b',
        500: '#946a00',
        600: '#7c5200',
        700: '#654000',
        800: '#4a2c00',
        900: '#2e1800',
        950: '#1b0b00',
      },
      },
    },
  },
};

Copy as

100

200

300

400

500

600

700

800

900

950

Keep exploring

All tools →

Color Converter

HEX, RGB, HSL, LCH, OKLCH, LAB.

Open

Design System

Turn one color into a 12-step OKLCH scale.

Open

Material 3

Material You tonal palette generator.

Open

// tailwind.config.js module.exports = { theme: { extend: { colors: { brand: { 50: '#f2f2ff', 100: '#e6e5ff', 200: '#cdc8ff', 300: '#b0a2ff', 400: '#8d73ff', 500: '#6f4bee', 600: '#5b2dd2', 700: '#4918b0', 800: '#340687', 900: '#1f005a', 950: '#11003b', }, accent: { 50: '#e3faff', 100: '#caf3ff', 200: '#97e1f9', 300: '#4ec9ea', 400: '#00a4cc', 500: '#0083ab', 600: '#006a92', 700: '#005578', 800: '#003d5a', 900: '#002439', 950: '#001424', }, tertiary: { 50: '#ffedfd', 100: '#ffdcf9', 200: '#ffb9eb', 300: '#f78dd7', 400: '#d85db6', 500: '#b53495', 600: '#9a127d', 700: '#7f0065', 800: '#5e004b', 900: '#3c002e', 950: '#26001c', }, support: { 50: '#e3fde6', 100: '#cafad0', 200: '#97eca5', 300: '#4ed770', 400: '#00b436', 500: '#009200', 600: '#007800', 700: '#006100', 800: '#004700', 900: '#002b00', 950: '#001a00', }, muted: { 50: '#fcf4e3', 100: '#f8eacb', 200: '#ead29c', 300: '#d6b362', 400: '#b58b1b', 500: '#946a00', 600: '#7c5200', 700: '#654000', 800: '#4a2c00', 900: '#2e1800', 950: '#1b0b00', }, }, }, }, };