← Back to All Colors
Tailwind Gray Color Palette
Neutral and versatile, the standard gray scale for most applications.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
gray-50
#f9fafb
100
gray-100
#f3f4f6
200
gray-200
#e5e7eb
300
gray-300
#d1d5db
400
gray-400
#9ca3af
500
gray-500
#6b7280
600
gray-600
#4b5563
700
gray-700
#374151
800
gray-800
#1f2937
900
gray-900
#111827
950
gray-950
#030712
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| gray-50 | #f9fafb | rgb(249, 250, 251) | hsl(210, 20%, 98%) | oklch(0.985 0.002 247.839) | |
| gray-100 | #f3f4f6 | rgb(243, 244, 246) | hsl(220, 14%, 96%) | oklch(0.967 0.003 264.542) | |
| gray-200 | #e5e7eb | rgb(229, 231, 235) | hsl(220, 13%, 91%) | oklch(0.928 0.006 264.531) | |
| gray-300 | #d1d5db | rgb(209, 213, 219) | hsl(216, 12%, 84%) | oklch(0.872 0.01 258.338) | |
| gray-400 | #9ca3af | rgb(156, 163, 175) | hsl(218, 11%, 65%) | oklch(0.707 0.022 261.325) | |
| gray-500 | #6b7280 | rgb(107, 114, 128) | hsl(220, 9%, 46%) | oklch(0.551 0.027 264.364) | |
| gray-600 | #4b5563 | rgb(75, 85, 99) | hsl(215, 14%, 34%) | oklch(0.446 0.03 256.802) | |
| gray-700 | #374151 | rgb(55, 65, 81) | hsl(217, 19%, 27%) | oklch(0.373 0.034 259.733) | |
| gray-800 | #1f2937 | rgb(31, 41, 55) | hsl(215, 28%, 17%) | oklch(0.278 0.033 256.848) | |
| gray-900 | #111827 | rgb(17, 24, 39) | hsl(221, 39%, 11%) | oklch(0.21 0.034 264.665) | |
| gray-950 | #030712 | rgb(3, 7, 18) | hsl(224, 71%, 4%) | oklch(0.13 0.028 261.692) |
Usage Examples
Background
bg-gray-500Text
text-gray-500Sample Text
Border
border-gray-300Ring
ring-gray-500Explore Other Colors
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Aa
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
Aa
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