How do I convert OKLCH to HEX for Tailwind CSS?

You can use our live OKLCH converter on this page. Paste your OKLCH string, and it will instantly translate it to standard HEX, RGB, or HSL color formats.

What is the default hex color for blue-500 in Tailwind v4?

In Tailwind v4, blue-500 resolves to oklch(0.623 0.214 259.815), which translates to the hexadecimal value #3b82f6.

Why did Tailwind v4 switch to OKLCH for its default colors?

OKLCH is perceptually uniform, meaning equal adjustments to lightness or chroma look equal to human eyes. This prevents hue shift, keeping scales visually balanced.

Tailwind CSS v4 Reference Card

Tailwind Default Colors &
OKLCH Converter

The ultimate cheat sheet for Tailwind CSS v4. Translate custom OKLCH variables to HEX or browse default shades with one-click copy.

OKLCH Color Explorer

Translate standard oklch() variables to production HEX or RGB formats.

Paste ColorHEX, RGB, HSL or OKLCH

Presets Swatches

Lightness (L)62%

Chroma (C)0.214

Hue (H)260°

Interactive Cheat Sheet

red

v4 OKLCH scale

red-50

#fef2f2

red-100

#ffe2e2

red-200

#ffc9c9

red-300

#ffa2a2

red-400

#ff6467

red-500

#fb2c36

red-600

#e7000b

red-700

#c10007

red-800

#9f0712

red-900

#82181a

red-950

#460809

orange

v4 OKLCH scale

orange-50

#fff7ed

orange-100

#ffedd4

orange-200

#ffd6a7

orange-300

#ffb86a

orange-400

#ff8904

orange-500

#ff6900

orange-600

#f54900

orange-700

#ca3500

orange-800

#9f2d00

orange-900

#7e2a0c

orange-950

#441306

amber

v4 OKLCH scale

amber-50

#fffbeb

amber-100

#fef3c6

amber-200

#fee685

amber-300

#ffd230

amber-400

#ffb900

amber-500

#fe9a00

amber-600

#e17100

amber-700

#bb4d00

amber-800

#973c00

amber-900

#7b3306

amber-950

#461901

yellow

v4 OKLCH scale

yellow-50

#fefce8

yellow-100

#fef9c2

yellow-200

#fff085

yellow-300

#ffdf20

yellow-400

#fdc700

yellow-500

#f0b100

yellow-600

#d08700

yellow-700

#a65f00

yellow-800

#894b00

yellow-900

#733e0a

yellow-950

#432004

lime

v4 OKLCH scale

lime-50

#f7fee7

lime-100

#ecfcca

lime-200

#d8f999

lime-300

#bbf451

lime-400

#9ae600

lime-500

#7ccf00

lime-600

#5ea500

lime-700

#497d00

lime-800

#3c6300

lime-900

#35530e

lime-950

#192e03

green

v4 OKLCH scale

green-50

#f0fdf4

green-100

#dcfce7

green-200

#b9f8cf

green-300

#7bf1a8

green-400

#05df72

green-500

#00c950

green-600

#00a63e

green-700

#008236

green-800

#016630

green-900

#0d542b

green-950

#032e15

emerald

v4 OKLCH scale

emerald-50

#ecfdf5

emerald-100

#d0fae5

emerald-200

#a4f4cf

emerald-300

#5ee9b5

emerald-400

#00d492

emerald-500

#00bc7d

emerald-600

#009966

emerald-700

#007a55

emerald-800

#006045

emerald-900

#004f3b

emerald-950

#002c22

teal

v4 OKLCH scale

teal-50

#f0fdfa

teal-100

#cbfbf1

teal-200

#96f7e4

teal-300

#46ecd5

teal-400

#00d5be

teal-500

#00bba7

teal-600

#009689

teal-700

#00786f

teal-800

#005f5a

teal-900

#0b4f4a

teal-950

#022f2e

cyan

v4 OKLCH scale

cyan-50

#ecfeff

cyan-100

#cefafe

cyan-200

#a2f4fd

cyan-300

#53eafd

cyan-400

#00d3f2

cyan-500

#00b8db

cyan-600

#0092b8

cyan-700

#007595

cyan-800

#005f78

cyan-900

#104e64

cyan-950

#053345

sky

v4 OKLCH scale

sky-50

#f0f9ff

sky-100

#dff2fe

sky-200

#b8e6fe

sky-300

#74d4ff

sky-400

#00bcff

sky-500

#00a6f4

sky-600

#0084d1

sky-700

#0069a8

sky-800

#00598a

sky-900

#024a70

sky-950

#052f4a

blue

v4 OKLCH scale

blue-50

#eff6ff

blue-100

#dbeafe

blue-200

#bedbff

blue-300

#8ec5ff

blue-400

#51a2ff

blue-500

#2b7fff

blue-600

#155dfc

blue-700

#1447e6

blue-800

#193cb8

blue-900

#1c398e

blue-950

#162456

indigo

v4 OKLCH scale

indigo-50

#eef2ff

indigo-100

#e0e7ff

indigo-200

#c6d2ff

indigo-300

#a3b3ff

indigo-400

#7c86ff

indigo-500

#615fff

indigo-600

#4f39f6

indigo-700

#432dd7

indigo-800

#372aac

indigo-900

#312c85

indigo-950

#1e1a4d

violet

v4 OKLCH scale

violet-50

#f5f3ff

violet-100

#ede9fe

violet-200

#ddd6ff

violet-300

#c4b4ff

violet-400

#a684ff

violet-500

#8e51ff

violet-600

#7f22fe

violet-700

#7008e7

violet-800

#5d0ec0

violet-900

#4d179a

violet-950

#2f0d68

purple

v4 OKLCH scale

purple-50

#faf5ff

purple-100

#f3e8ff

purple-200

#e9d4ff

purple-300

#dab2ff

purple-400

#c27aff

purple-500

#ad46ff

purple-600

#9810fa

purple-700

#8200db

purple-800

#6e11b0

purple-900

#59168b

purple-950

#3c0366

fuchsia

v4 OKLCH scale

fuchsia-50

#fdf4ff

fuchsia-100

#fae8ff

fuchsia-200

#f6cfff

fuchsia-300

#f4a8ff

fuchsia-400

#ed6aff

fuchsia-500

#e12afb

fuchsia-600

#c800de

fuchsia-700

#a800b7

fuchsia-800

#8a0194

fuchsia-900

#721378

fuchsia-950

#4b004f

pink

v4 OKLCH scale

pink-50

#fdf2f8

pink-100

#fce7f3

pink-200

#fccee8

pink-300

#fda5d5

pink-400

#fb64b6

pink-500

#f6339a

pink-600

#ee0000

pink-700

#007acb

pink-800

#00699c

pink-900

#035b00

pink-950

#003251

rose

v4 OKLCH scale

rose-50

#fff1f2

rose-100

#ffe4e6

rose-200

#ffccd3

rose-300

#ffa1ad

rose-400

#ff637e

rose-500

#ff2056

rose-600

#ec003f

rose-700

#c70036

rose-800

#a50036

rose-900

#8b0836

rose-950

#4d0218

slate

v4 OKLCH scale

slate-50

#f8fafc

slate-100

#f1f5f9

slate-200

#e2e8f0

slate-300

#cad5e2

slate-400

#90a1b9

slate-500

#62748e

slate-600

#45556c

slate-700

#314158

slate-800

#1d293d

slate-900

#0f172b

slate-950

#020618

gray

v4 OKLCH scale

gray-50

#f9fafb

gray-100

#f3f4f6

gray-200

#e5e7eb

gray-300

#d1d5dc

gray-400

#99a1af

gray-500

#6a7282

gray-600

#4a5565

gray-700

#364153

gray-800

#1e2939

gray-900

#101828

gray-950

#030712

zinc

v4 OKLCH scale

zinc-50

#fafafa

zinc-100

#f4f4f5

zinc-200

#e4e4e7

zinc-300

#d4d4d8

zinc-400

#9f9fa9

zinc-500

#71717b

zinc-600

#52525c

zinc-700

#3f3f46

zinc-800

#27272a

zinc-900

#18181b

zinc-950

#09090b

neutral

v4 OKLCH scale

neutral-50

#fafafa

neutral-100

#f5f5f5

neutral-200

#e5e5e5

neutral-300

#d4d4d4

neutral-400

#a1a1a1

neutral-500

#737373

neutral-600

#525252

neutral-700

#404040

neutral-800

#262626

neutral-900

#171717

neutral-950

#0a0a0a

stone

v4 OKLCH scale

stone-50

#fafaf9

stone-100

#f5f5f4

stone-200

#e7e5e4

stone-300

#d6d3d1

stone-400

#a6a09b

stone-500

#79716b

stone-600

#57534d

stone-700

#44403b

stone-800

#292524

stone-900

#1c1917

stone-950

#0c0a09

Using Default Colors in Tailwind CSS v4

Tailwind CSS v4 introduces a streamlined system for custom design colors, switching from JavaScript configuration files to native CSS variables.

Dynamic CSS @theme Variables

Tailwind CSS v4 uses CSS variables in the global stylesheet. By default, colors are defined as oklch() values. You can easily extend or override standard palettes like so:

@theme {
  /* Customize standard color scale */
  --color-blue-500: oklch(0.623 0.214 259.81);
  
  /* Add custom brand color scales */
  --color-brand-500: oklch(0.55 0.18 120.4);
}

Why use HEX vs OKLCH?

While browser support for OKLCH is now universal, design software (like Figma or Photoshop) and legacy CSS code bases still rely heavily on 6-character hexadecimal codes. This reference cheat sheet bridges the gap, allowing design and development teams to stay perfectly aligned.

💡 Quick Tip: Use the search filter above to locate precise HEX codes to drop into your design mockups.

Tailwind Default Colors & OKLCH Converter

Interactive Cheat Sheet

Using Default Colors in Tailwind CSS v4

Dynamic CSS @theme Variables

Why use HEX vs OKLCH?

Tailwind Default Colors &
OKLCH Converter