← Back to All Colors

Tailwind Neutral Color Palette

Pure gray without undertones, maximally versatile for any design system.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.

50

neutral-50

#fafafa

100

neutral-100

#f5f5f5

200

neutral-200

#e5e5e5

300

neutral-300

#d4d4d4

400

neutral-400

#a3a3a3

500

neutral-500

#737373

600

neutral-600

#525252

700

neutral-700

#404040

800

neutral-800

#262626

900

neutral-900

#171717

950

neutral-950

#0a0a0a

Quick Reference

Shade	Class	HEX	RGB	HSL	OKLCH
	neutral-50	#fafafa	rgb(250, 250, 250)	hsl(0, 0%, 98%)	oklch(0.985 0 0)
	neutral-100	#f5f5f5	rgb(245, 245, 245)	hsl(0, 0%, 96%)	oklch(0.97 0 0)
	neutral-200	#e5e5e5	rgb(229, 229, 229)	hsl(0, 0%, 90%)	oklch(0.922 0 0)
	neutral-300	#d4d4d4	rgb(212, 212, 212)	hsl(0, 0%, 83%)	oklch(0.87 0 0)
	neutral-400	#a3a3a3	rgb(163, 163, 163)	hsl(0, 0%, 64%)	oklch(0.708 0 0)
	neutral-500	#737373	rgb(115, 115, 115)	hsl(0, 0%, 45%)	oklch(0.556 0 0)
	neutral-600	#525252	rgb(82, 82, 82)	hsl(0, 0%, 32%)	oklch(0.439 0 0)
	neutral-700	#404040	rgb(64, 64, 64)	hsl(0, 0%, 25%)	oklch(0.371 0 0)
	neutral-800	#262626	rgb(38, 38, 38)	hsl(0, 0%, 15%)	oklch(0.269 0 0)
	neutral-900	#171717	rgb(23, 23, 23)	hsl(0, 0%, 9%)	oklch(0.205 0 0)
	neutral-950	#0a0a0a	rgb(10, 10, 10)	hsl(0, 0%, 4%)	oklch(0.145 0 0)

Usage Examples

Background

bg-neutral-500

Text

text-neutral-500

Sample Text

Border

border-neutral-300

Ring

ring-neutral-500

Explore Other Colors

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element, organized by category. Disable classes and edit them on the fly.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →