Tailwind CSS Color to HEX: Color Lookup

Tailwind CSS Color to HEX Lookup

blue-500 is #3b82f6, which is rgb(59, 130, 246). Tailwind’s color system uses a fixed palette of named colors with numbered shades from 50 to 950. Each shade maps to a specific hex value that is consistent across Tailwind versions within the same major version.

The Color Scale Structure

Every Tailwind color family uses the same numeric scale. The numbers represent lightness in a roughly linear progression:

Commonly Used Colors with HEX Values

A reference for the shades used most often in practice:

The Gray Families Compared

Tailwind ships with five gray families. The differences matter most at darker shades:

For dark mode backgrounds, zinc and neutral are popular because they avoid the blue cast that makes slate and gray look cold on some displays. Stone is useful for warm-toned UIs.

Custom Colors in tailwind.config.js

To extend the palette without replacing it:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          900: '#1e3a8a',
        },
      },
    },
  },
}

This adds bg-brand-500, text-brand-600, border-brand-100, and all the other utility variants automatically.

To replace the entire palette (remove all defaults):

module.exports = {
  theme: {
    colors: {
      // only your colors here
    },
  },
}

This is useful when a design system has strict color governance and the default Tailwind palette should not be available.

Tailwind v4 and CSS Custom Properties

Tailwind v4 moves configuration from tailwind.config.js to CSS using the @theme directive:

@import "tailwindcss";

@theme {
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;
}

Every color in @theme automatically generates utility classes. The CSS variable names follow the pattern --color-{name}-{shade}.

All default Tailwind colors are also exposed as CSS custom properties, so you can use them in arbitrary CSS:

.custom-element {
  background: var(--color-blue-500);
  border-color: var(--color-blue-200);
}

This removes the need for the resolveConfig workaround that was common in v3 for accessing palette values outside of Tailwind utilities.

Accessing Palette Values in JavaScript

In Tailwind v3, use resolveConfig to get hex values at runtime:

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from './tailwind.config.js';

const config = resolveConfig(tailwindConfig);
const blue500 = config.theme.colors.blue[500]; // '#3b82f6'

In Tailwind v4, read CSS custom properties from the computed style instead:

const blue500 = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-blue-500')
  .trim(); // '#3b82f6'

This is useful for canvas rendering, charting libraries, or any context where you need a color value as a string but want it to stay in sync with your design tokens.