About Tailwind CSS
Tailwind CSS ships a default palette of ten families from slate to zinc plus rose, each with shades 50 to 950. Colors live in the theme and can be extended with arbitrary values at build time.
How to use
Use utilities such as bg-brand-500 or extend theme.colors in tailwind.config to add your own scales. Shades 500 to 700 work best for text, borders, and focus rings.
Official documentation ↗
Red
#FB2C36
Shades
50 #FEF 100 #FFE 200 #FFC 300 #FFA 400 #FF6 500 #FB2 600 #E70 700 #C10 800 #9F0 900 #821 950 #460
Orange
#FF6900
Shades
50 #FFF 100 #FFE 200 #FFD 300 #FFB 400 #FF8 500 #FF6 600 #F54 700 #CA3 800 #9F2 900 #7E2 950 #441
Amber
#FE9A00
Shades
50 #FFF 100 #FEF 200 #FEE 300 #FFD 400 #FFB 500 #FE9 600 #E17 700 #BB4 800 #973 900 #7B3 950 #461
Yellow
#F0B100
Shades
50 #FEF 100 #FEF 200 #FFF 300 #FFD 400 #FDC 500 #F0B 600 #D08 700 #A65 800 #894 900 #733 950 #432
Lime
#7CCF00
Shades
50 #F7F 100 #ECF 200 #D8F 300 #BBF 400 #9AE 500 #7CC 600 #5EA 700 #497 800 #3C6 900 #355 950 #192
Green
#00C950
Shades
50 #F0F 100 #DCF 200 #B9F 300 #7BF 400 #05D 500 #00C 600 #00A 700 #008 800 #016 900 #0D5 950 #032
Emerald
#00BC7D
Shades
50 #ECF 100 #D0F 200 #A4F 300 #5EE 400 #00D 500 #00B 600 #009 700 #007 800 #006 900 #004 950 #002
Teal
#00BBA7
Shades
50 #F0F 100 #CBF 200 #96F 300 #46E 400 #00D 500 #00B 600 #009 700 #007 800 #005 900 #0B4 950 #022
Cyan
#00B8DB
Shades
50 #ECF 100 #CEF 200 #A2F 300 #53E 400 #00D 500 #00B 600 #009 700 #007 800 #005 900 #104 950 #053
Sky
#00A6F4
Shades
50 #F0F 100 #DFF 200 #B8E 300 #74D 400 #00B 500 #00A 600 #008 700 #006 800 #005 900 #024 950 #052
Blue
#2B7FFF
Shades
50 #EFF 100 #DBE 200 #BED 300 #8EC 400 #51A 500 #2B7 600 #155 700 #144 800 #193 900 #1C3 950 #162
Indigo
#615FFF
Shades
50 #EEF 100 #E0E 200 #C6D 300 #A3B 400 #7C8 500 #615 600 #4F3 700 #432 800 #372 900 #312 950 #1E1
Violet
#8E51FF
Shades
50 #F5F 100 #EDE 200 #DDD 300 #C4B 400 #A68 500 #8E5 600 #7F2 700 #700 800 #5D0 900 #4D1 950 #2F0
Purple
#AD46FF
Shades
50 #FAF 100 #F3E 200 #E9D 300 #DAB 400 #C27 500 #AD4 600 #981 700 #820 800 #6E1 900 #591 950 #3C0
Fuchsia
#E12AFB
Shades
50 #FDF 100 #FAE 200 #F6C 300 #F4A 400 #ED6 500 #E12 600 #C80 700 #A80 800 #8A0 900 #721 950 #4B0
Pink
#F6339A
Shades
50 #FDF 100 #FCE 200 #FCC 300 #FDA 400 #FB6 500 #F63 600 #E60 700 #C60 800 #A30 900 #861 950 #510
Rose
#FF2056
Shades
50 #FFF 100 #FFE 200 #FFC 300 #FFA 400 #FF6 500 #FF2 600 #EC0 700 #C70 800 #A50 900 #8B0 950 #4D0
Slate
#62748E
Shades
50 #F8F 100 #F1F 200 #E2E 300 #CAD 400 #90A 500 #627 600 #455 700 #314 800 #1D2 900 #0F1 950 #020
Gray
#6A7282
Shades
50 #F9F 100 #F3F 200 #E5E 300 #D1D 400 #99A 500 #6A7 600 #4A5 700 #364 800 #1E2 900 #101 950 #030
Zinc
#71717B
Shades
50 #FAF 100 #F4F 200 #E4E 300 #D4D 400 #9F9 500 #717 600 #525 700 #3F3 800 #272 900 #181 950 #090
Neutral
#737373
Shades
50 #FAF 100 #F5F 200 #E5E 300 #D4D 400 #A1A 500 #737 600 #525 700 #404 800 #262 900 #171 950 #0A0
Stone
#79716B
Shades
50 #FAF 100 #F5F 200 #E7E 300 #D6D 400 #A6A 500 #797 600 #575 700 #444 800 #292 900 #1C1 950 #0C0
Mauve
#79697B
Shades
50 #FAF 100 #F3F 200 #E7E 300 #D7D 400 #A89 500 #796 600 #594 700 #463 800 #2A2 900 #1D1 950 #0C0
Olive
#7C7C67
Shades
50 #FBF 100 #F4F 200 #E8E 300 #D8D 400 #ABA 500 #7C7 600 #5B5 700 #474 800 #2B2 900 #1D1 950 #0C0
Mist
#67787C
Shades
50 #F9F 100 #F1F 200 #E3E 300 #D0D 400 #9CA 500 #677 600 #4B5 700 #394 800 #222 900 #161 950 #090
Taupe
#7C6D67
Shades
50 #FBF 100 #F3F 200 #E8E 300 #D8D 400 #ABA 500 #7C6 600 #5B4 700 #473 800 #2B2 900 #1D1 950 #0C0
No matching colors
Source: Tailwind CSS v4 · theme.css
