Developer Tools

Tailwind Color Finder

Browse every Tailwind CSS color, find the nearest Tailwind class for any hex or rgb, and look up a class name to get hex, rgb, hsl, and CSS variable values.

Mode

All Tailwind hues and shades with copy buttons

Filter palette244 of 244 colors

Black and white

2 swatches

#FFFFFF

white

rgb(255, 255, 255)

#000000

black

rgb(0, 0, 0)

slate

11 swatches

#F8FAFC

slate-50

rgb(248, 250, 252)

#F1F5F9

100

slate-100

rgb(241, 245, 249)

#E2E8F0

200

slate-200

rgb(226, 232, 240)

#CBD5E1

300

slate-300

rgb(203, 213, 225)

#94A3B8

400

slate-400

rgb(148, 163, 184)

#64748B

500

slate-500

rgb(100, 116, 139)

#475569

600

slate-600

rgb(71, 85, 105)

#334155

700

slate-700

rgb(51, 65, 85)

#1E293B

800

slate-800

rgb(30, 41, 59)

#0F172A

900

slate-900

rgb(15, 23, 42)

#020617

950

slate-950

rgb(2, 6, 23)

gray

11 swatches

#F9FAFB

gray-50

rgb(249, 250, 251)

#F3F4F6

100

gray-100

rgb(243, 244, 246)

#E5E7EB

200

gray-200

rgb(229, 231, 235)

#D1D5DB

300

gray-300

rgb(209, 213, 219)

#9CA3AF

400

gray-400

rgb(156, 163, 175)

#6B7280

500

gray-500

rgb(107, 114, 128)

#4B5563

600

gray-600

rgb(75, 85, 99)

#374151

700

gray-700

rgb(55, 65, 81)

#1F2937

800

gray-800

rgb(31, 41, 55)

#111827

900

gray-900

rgb(17, 24, 39)

#030712

950

gray-950

rgb(3, 7, 18)

zinc

11 swatches

#FAFAFA

zinc-50

rgb(250, 250, 250)

#F4F4F5

100

zinc-100

rgb(244, 244, 245)

#E4E4E7

200

zinc-200

rgb(228, 228, 231)

#D4D4D8

300

zinc-300

rgb(212, 212, 216)

#A1A1AA

400

zinc-400

rgb(161, 161, 170)

#71717A

500

zinc-500

rgb(113, 113, 122)

#52525B

600

zinc-600

rgb(82, 82, 91)

#3F3F46

700

zinc-700

rgb(63, 63, 70)

#27272A

800

zinc-800

rgb(39, 39, 42)

#18181B

900

zinc-900

rgb(24, 24, 27)

#09090B

950

zinc-950

rgb(9, 9, 11)

neutral

11 swatches

#FAFAFA

neutral-50

rgb(250, 250, 250)

#F5F5F5

100

neutral-100

rgb(245, 245, 245)

#E5E5E5

200

neutral-200

rgb(229, 229, 229)

#D4D4D4

300

neutral-300

rgb(212, 212, 212)

#A3A3A3

400

neutral-400

rgb(163, 163, 163)

#737373

500

neutral-500

rgb(115, 115, 115)

#525252

600

neutral-600

rgb(82, 82, 82)

#404040

700

neutral-700

rgb(64, 64, 64)

#262626

800

neutral-800

rgb(38, 38, 38)

#171717

900

neutral-900

rgb(23, 23, 23)

#0A0A0A

950

neutral-950

rgb(10, 10, 10)

stone

11 swatches

#FAFAF9

stone-50

rgb(250, 250, 249)

#F5F5F4

100

stone-100

rgb(245, 245, 244)

#E7E5E4

200

stone-200

rgb(231, 229, 228)

#D6D3D1

300

stone-300

rgb(214, 211, 209)

#A8A29E

400

stone-400

rgb(168, 162, 158)

#78716C

500

stone-500

rgb(120, 113, 108)

#57534E

600

stone-600

rgb(87, 83, 78)

#44403C

700

stone-700

rgb(68, 64, 60)

#292524

800

stone-800

rgb(41, 37, 36)

#1C1917

900

stone-900

rgb(28, 25, 23)

#0C0A09

950

stone-950

rgb(12, 10, 9)

red

11 swatches

#FEF2F2

red-50

rgb(254, 242, 242)

#FEE2E2

100

red-100

rgb(254, 226, 226)

#FECACA

200

red-200

rgb(254, 202, 202)

#FCA5A5

300

red-300

rgb(252, 165, 165)

#F87171

400

red-400

rgb(248, 113, 113)

#EF4444

500

red-500

rgb(239, 68, 68)

#DC2626

600

red-600

rgb(220, 38, 38)

#B91C1C

700

red-700

rgb(185, 28, 28)

#991B1B

800

red-800

rgb(153, 27, 27)

#7F1D1D

900

red-900

rgb(127, 29, 29)

#450A0A

950

red-950

rgb(69, 10, 10)

orange

11 swatches

#FFF7ED

orange-50

rgb(255, 247, 237)

#FFEDD5

100

orange-100

rgb(255, 237, 213)

#FED7AA

200

orange-200

rgb(254, 215, 170)

#FDBA74

300

orange-300

rgb(253, 186, 116)

#FB923C

400

orange-400

rgb(251, 146, 60)

#F97316

500

orange-500

rgb(249, 115, 22)

#EA580C

600

orange-600

rgb(234, 88, 12)

#C2410C

700

orange-700

rgb(194, 65, 12)

#9A3412

800

orange-800

rgb(154, 52, 18)

#7C2D12

900

orange-900

rgb(124, 45, 18)

#431407

950

orange-950

rgb(67, 20, 7)

amber

11 swatches

#FFFBEB

amber-50

rgb(255, 251, 235)

#FEF3C7

100

amber-100

rgb(254, 243, 199)

#FDE68A

200

amber-200

rgb(253, 230, 138)

#FCD34D

300

amber-300

rgb(252, 211, 77)

#FBBF24

400

amber-400

rgb(251, 191, 36)

#F59E0B

500

amber-500

rgb(245, 158, 11)

#D97706

600

amber-600

rgb(217, 119, 6)

#B45309

700

amber-700

rgb(180, 83, 9)

#92400E

800

amber-800

rgb(146, 64, 14)

#78350F

900

amber-900

rgb(120, 53, 15)

#451A03

950

amber-950

rgb(69, 26, 3)

yellow

11 swatches

#FEFCE8

yellow-50

rgb(254, 252, 232)

#FEF9C3

100

yellow-100

rgb(254, 249, 195)

#FEF08A

200

yellow-200

rgb(254, 240, 138)

#FDE047

300

yellow-300

rgb(253, 224, 71)

#FACC15

400

yellow-400

rgb(250, 204, 21)

#EAB308

500

yellow-500

rgb(234, 179, 8)

#CA8A04

600

yellow-600

rgb(202, 138, 4)

#A16207

700

yellow-700

rgb(161, 98, 7)

#854D0E

800

yellow-800

rgb(133, 77, 14)

#713F12

900

yellow-900

rgb(113, 63, 18)

#422006

950

yellow-950

rgb(66, 32, 6)

lime

11 swatches

#F7FEE7

lime-50

rgb(247, 254, 231)

#ECFCCB

100

lime-100

rgb(236, 252, 203)

#D9F99D

200

lime-200

rgb(217, 249, 157)

#BEF264

300

lime-300

rgb(190, 242, 100)

#A3E635

400

lime-400

rgb(163, 230, 53)

#84CC16

500

lime-500

rgb(132, 204, 22)

#65A30D

600

lime-600

rgb(101, 163, 13)

#4D7C0F

700

lime-700

rgb(77, 124, 15)

#3F6212

800

lime-800

rgb(63, 98, 18)

#365314

900

lime-900

rgb(54, 83, 20)

#1A2E05

950

lime-950

rgb(26, 46, 5)

green

11 swatches

#F0FDF4

green-50

rgb(240, 253, 244)

#DCFCE7

100

green-100

rgb(220, 252, 231)

#BBF7D0

200

green-200

rgb(187, 247, 208)

#86EFAC

300

green-300

rgb(134, 239, 172)

#4ADE80

400

green-400

rgb(74, 222, 128)

#22C55E

500

green-500

rgb(34, 197, 94)

#16A34A

600

green-600

rgb(22, 163, 74)

#15803D

700

green-700

rgb(21, 128, 61)

#166534

800

green-800

rgb(22, 101, 52)

#14532D

900

green-900

rgb(20, 83, 45)

#052E16

950

green-950

rgb(5, 46, 22)

emerald

11 swatches

#ECFDF5

emerald-50

rgb(236, 253, 245)

#D1FAE5

100

emerald-100

rgb(209, 250, 229)

#A7F3D0

200

emerald-200

rgb(167, 243, 208)

#6EE7B7

300

emerald-300

rgb(110, 231, 183)

#34D399

400

emerald-400

rgb(52, 211, 153)

#10B981

500

emerald-500

rgb(16, 185, 129)

#059669

600

emerald-600

rgb(5, 150, 105)

#047857

700

emerald-700

rgb(4, 120, 87)

#065F46

800

emerald-800

rgb(6, 95, 70)

#064E3B

900

emerald-900

rgb(6, 78, 59)

#022C22

950

emerald-950

rgb(2, 44, 34)

teal

11 swatches

#F0FDFA

teal-50

rgb(240, 253, 250)

#CCFBF1

100

teal-100

rgb(204, 251, 241)

#99F6E4

200

teal-200

rgb(153, 246, 228)

#5EEAD4

300

teal-300

rgb(94, 234, 212)

#2DD4BF

400

teal-400

rgb(45, 212, 191)

#14B8A6

500

teal-500

rgb(20, 184, 166)

#0D9488

600

teal-600

rgb(13, 148, 136)

#0F766E

700

teal-700

rgb(15, 118, 110)

#115E59

800

teal-800

rgb(17, 94, 89)

#134E4A

900

teal-900

rgb(19, 78, 74)

#042F2E

950

teal-950

rgb(4, 47, 46)

cyan

11 swatches

#ECFEFF

cyan-50

rgb(236, 254, 255)

#CFFAFE

100

cyan-100

rgb(207, 250, 254)

#A5F3FC

200

cyan-200

rgb(165, 243, 252)

#67E8F9

300

cyan-300

rgb(103, 232, 249)

#22D3EE

400

cyan-400

rgb(34, 211, 238)

#06B6D4

500

cyan-500

rgb(6, 182, 212)

#0891B2

600

cyan-600

rgb(8, 145, 178)

#0E7490

700

cyan-700

rgb(14, 116, 144)

#155E75

800

cyan-800

rgb(21, 94, 117)

#164E63

900

cyan-900

rgb(22, 78, 99)

#083344

950

cyan-950

rgb(8, 51, 68)

sky

11 swatches

#F0F9FF

sky-50

rgb(240, 249, 255)

#E0F2FE

100

sky-100

rgb(224, 242, 254)

#BAE6FD

200

sky-200

rgb(186, 230, 253)

#7DD3FC

300

sky-300

rgb(125, 211, 252)

#38BDF8

400

sky-400

rgb(56, 189, 248)

#0EA5E9

500

sky-500

rgb(14, 165, 233)

#0284C7

600

sky-600

rgb(2, 132, 199)

#0369A1

700

sky-700

rgb(3, 105, 161)

#075985

800

sky-800

rgb(7, 89, 133)

#0C4A6E

900

sky-900

rgb(12, 74, 110)

#082F49

950

sky-950

rgb(8, 47, 73)

blue

11 swatches

#EFF6FF

blue-50

rgb(239, 246, 255)

#DBEAFE

100

blue-100

rgb(219, 234, 254)

#BFDBFE

200

blue-200

rgb(191, 219, 254)

#93C5FD

300

blue-300

rgb(147, 197, 253)

#60A5FA

400

blue-400

rgb(96, 165, 250)

#3B82F6

500

blue-500

rgb(59, 130, 246)

#2563EB

600

blue-600

rgb(37, 99, 235)

#1D4ED8

700

blue-700

rgb(29, 78, 216)

#1E40AF

800

blue-800

rgb(30, 64, 175)

#1E3A8A

900

blue-900

rgb(30, 58, 138)

#172554

950

blue-950

rgb(23, 37, 84)

indigo

11 swatches

#EEF2FF

indigo-50

rgb(238, 242, 255)

#E0E7FF

100

indigo-100

rgb(224, 231, 255)

#C7D2FE

200

indigo-200

rgb(199, 210, 254)

#A5B4FC

300

indigo-300

rgb(165, 180, 252)

#818CF8

400

indigo-400

rgb(129, 140, 248)

#6366F1

500

indigo-500

rgb(99, 102, 241)

#4F46E5

600

indigo-600

rgb(79, 70, 229)

#4338CA

700

indigo-700

rgb(67, 56, 202)

#3730A3

800

indigo-800

rgb(55, 48, 163)

#312E81

900

indigo-900

rgb(49, 46, 129)

#1E1B4B

950

indigo-950

rgb(30, 27, 75)

violet

11 swatches

#F5F3FF

violet-50

rgb(245, 243, 255)

#EDE9FE

100

violet-100

rgb(237, 233, 254)

#DDD6FE

200

violet-200

rgb(221, 214, 254)

#C4B5FD

300

violet-300

rgb(196, 181, 253)

#A78BFA

400

violet-400

rgb(167, 139, 250)

#8B5CF6

500

violet-500

rgb(139, 92, 246)

#7C3AED

600

violet-600

rgb(124, 58, 237)

#6D28D9

700

violet-700

rgb(109, 40, 217)

#5B21B6

800

violet-800

rgb(91, 33, 182)

#4C1D95

900

violet-900

rgb(76, 29, 149)

#2E1065

950

violet-950

rgb(46, 16, 101)

purple

11 swatches

#FAF5FF

purple-50

rgb(250, 245, 255)

#F3E8FF

100

purple-100

rgb(243, 232, 255)

#E9D5FF

200

purple-200

rgb(233, 213, 255)

#D8B4FE

300

purple-300

rgb(216, 180, 254)

#C084FC

400

purple-400

rgb(192, 132, 252)

#A855F7

500

purple-500

rgb(168, 85, 247)

#9333EA

600

purple-600

rgb(147, 51, 234)

#7E22CE

700

purple-700

rgb(126, 34, 206)

#6B21A8

800

purple-800

rgb(107, 33, 168)

#581C87

900

purple-900

rgb(88, 28, 135)

#3B0764

950

purple-950

rgb(59, 7, 100)

fuchsia

11 swatches

#FDF4FF

fuchsia-50

rgb(253, 244, 255)

#FAE8FF

100

fuchsia-100

rgb(250, 232, 255)

#F5D0FE

200

fuchsia-200

rgb(245, 208, 254)

#F0ABFC

300

fuchsia-300

rgb(240, 171, 252)

#E879F9

400

fuchsia-400

rgb(232, 121, 249)

#D946EF

500

fuchsia-500

rgb(217, 70, 239)

#C026D3

600

fuchsia-600

rgb(192, 38, 211)

#A21CAF

700

fuchsia-700

rgb(162, 28, 175)

#86198F

800

fuchsia-800

rgb(134, 25, 143)

#701A75

900

fuchsia-900

rgb(112, 26, 117)

#4A044E

950

fuchsia-950

rgb(74, 4, 78)

pink

11 swatches

#FDF2F8

pink-50

rgb(253, 242, 248)

#FCE7F3

100

pink-100

rgb(252, 231, 243)

#FBCFE8

200

pink-200

rgb(251, 207, 232)

#F9A8D4

300

pink-300

rgb(249, 168, 212)

#F472B6

400

pink-400

rgb(244, 114, 182)

#EC4899

500

pink-500

rgb(236, 72, 153)

#DB2777

600

pink-600

rgb(219, 39, 119)

#BE185D

700

pink-700

rgb(190, 24, 93)

#9D174D

800

pink-800

rgb(157, 23, 77)

#831843

900

pink-900

rgb(131, 24, 67)

#500724

950

pink-950

rgb(80, 7, 36)

rose

11 swatches

#FFF1F2

rose-50

rgb(255, 241, 242)

#FFE4E6

100

rose-100

rgb(255, 228, 230)

#FECDD3

200

rose-200

rgb(254, 205, 211)

#FDA4AF

300

rose-300

rgb(253, 164, 175)

#FB7185

400

rose-400

rgb(251, 113, 133)

#F43F5E

500

rose-500

rgb(244, 63, 94)

#E11D48

600

rose-600

rgb(225, 29, 72)

#BE123C

700

rose-700

rgb(190, 18, 60)

#9F1239

800

rose-800

rgb(159, 18, 57)

#881337

900

rose-900

rgb(136, 19, 55)

#4C0519

950

rose-950

rgb(76, 5, 25)

About these values

Palette: 22 hues x 11 shades plus black and white, transcribed from the published Tailwind CSS v3.4 / v4 default theme.
Nearest color: distances use the redmean approximation of perceptual color difference: faster than a Lab deltaE pass, more accurate than a naive Euclidean RGB distance.
CSS variable: Tailwind v4 publishes every palette color as --color-{name}-{shade}, so you can reference any swatch directly from plain CSS.
Privacy: all matching happens in your browser. Nothing you paste is sent anywhere.

How to use

Pick a mode at the top. Browse lists the full Tailwind palette; Find nearest matches an arbitrary color to the closest Tailwind class; Look up class converts a class name to its color values.
In Browse, type a filter like blue, 500, rose-400, or #3b82f6 to narrow the swatch grid. Click Copy class on any swatch to put the class name on your clipboard.
In Find nearest, paste a hex code, an rgb() string, or a CSS color name (or use the color picker), then read the five closest Tailwind matches ranked by perceptual distance.
In Look up class, type a Tailwind class (white, blue-500, or bg-rose-300/40) and copy the hex, rgb, hsl, or CSS variable from the detail card.
Use the Copy button on any value to drop the format you need into your code or design tool.

About this tool

Tailwind Color Finder is a browser-based reference and reverse-lookup for the full Tailwind CSS v3.4 and v4 default color palette. The palette covers 22 hues (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose) across 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950), plus the singletons white and black, for 244 colors total. Browse mode renders every swatch in a grouped grid with the class name, hex, rgb, and a one-click copy button on each swatch, plus a fuzzy filter that matches the class name, hue, shade, or hex code so you can jump to any color in two keystrokes. Find nearest mode takes a hex code, an rgb() string, or a CSS color name (tomato, rebeccapurple, dodgerblue, and the other CSS Level 4 names you encounter most often) and surfaces the five closest Tailwind colors ranked by perceptual color distance, computed with the redmean approximation which is much closer to human perception than a naive Euclidean RGB distance and far cheaper than a full Lab deltaE pass: useful when a brand guide hands you an arbitrary color and you want the Tailwind class that lives closest to it. Look up class mode lets you type any palette class (blue-500, rose-300, white) or any utility-prefixed form (bg-blue-500, text-rose-300/40, border-emerald-200) and resolves it to a detail card with the canonical hex, rgb(), hsl(), and CSS variable string (var(--color-{name}-{shade}), which Tailwind v4 publishes for every palette color so you can reference it directly from plain CSS). Copy buttons live on every value so reformatting between hex and rgb for a design tool, a brand guide, or a Figma palette is a single click. The whole palette and every match runs locally in your browser, so the colors you paste here are not uploaded to anyone.

Free to use. Works in your browser. No signup, no login.

Related tools

Tailwind Color Finder

How to use

About this tool

You may also like

Color Palette Generator

Color Shades and Tints Generator

HEX to RGB Converter

Color Format Converter

Color Name Finder