Tailwind CSS Colors
The official color palette from Tailwind CSS, featuring a handpicked range of colors that are designed for harmonious combinations and straightforward customization.
Red
| Color | Name | HEX | RGB |
|---|---|---|---|
| red-50 | #FEF2F2 | rgb(254, 242, 242) | |
| red-100 | #FEE2E2 | rgb(254, 226, 226) | |
| red-200 | #FECACA | rgb(254, 202, 202) | |
| red-300 | #FCA5A5 | rgb(252, 165, 165) | |
| red-400 | #F87171 | rgb(248, 113, 113) | |
| red-500 | #EF4444 | rgb(239, 68, 68) | |
| red-600 | #DC2626 | rgb(220, 38, 38) | |
| red-700 | #B91C1C | rgb(185, 28, 28) | |
| red-800 | #991B1B | rgb(153, 27, 27) | |
| red-900 | #7F1D1D | rgb(127, 29, 29) | |
| red-950 | #450A0A | rgb(69, 10, 10) |
Orange
| Color | Name | HEX | RGB |
|---|---|---|---|
| orange-50 | #FFF7ED | rgb(255, 247, 237) | |
| orange-100 | #FFEDD5 | rgb(255, 237, 213) | |
| orange-200 | #FED7AA | rgb(254, 215, 170) | |
| orange-300 | #FDBA74 | rgb(253, 186, 116) | |
| orange-400 | #FB923C | rgb(251, 146, 60) | |
| orange-500 | #F97316 | rgb(249, 115, 22) | |
| orange-600 | #EA580C | rgb(234, 88, 12) | |
| orange-700 | #C2410C | rgb(194, 65, 12) | |
| orange-800 | #9A3412 | rgb(154, 52, 18) | |
| orange-900 | #7C2D12 | rgb(124, 45, 18) | |
| orange-950 | #431407 | rgb(67, 20, 7) |
Amber
| Color | Name | HEX | RGB |
|---|---|---|---|
| amber-50 | #FFFAFA | rgb(255, 250, 250) | |
| amber-100 | #FEF3C7 | rgb(254, 243, 199) | |
| amber-200 | #FDE68A | rgb(253, 230, 138) | |
| amber-300 | #FCD34D | rgb(252, 211, 77) | |
| amber-400 | #FBBF24 | rgb(251, 191, 36) | |
| amber-500 | #F59E0B | rgb(245, 158, 11) | |
| amber-600 | #D97706 | rgb(217, 119, 6) | |
| amber-700 | #B45309 | rgb(180, 83, 9) | |
| amber-800 | #92400E | rgb(146, 64, 14) | |
| amber-900 | #78350F | rgb(120, 53, 15) | |
| amber-950 | #451A03 | rgb(69, 26, 3) |
Yellow
| Color | Name | HEX | RGB |
|---|---|---|---|
| yellow-50 | #FEFCE8 | rgb(254, 252, 232) | |
| yellow-100 | #FEF9C3 | rgb(254, 249, 195) | |
| yellow-200 | #FEF08A | rgb(254, 240, 138) | |
| yellow-300 | #FDE047 | rgb(253, 224, 71) | |
| yellow-400 | #FACC15 | rgb(250, 204, 21) | |
| yellow-500 | #EAB308 | rgb(234, 179, 8) | |
| yellow-600 | #CA8A04 | rgb(202, 138, 4) | |
| yellow-700 | #A16207 | rgb(161, 98, 7) | |
| yellow-800 | #854D0E | rgb(133, 77, 14) | |
| yellow-900 | #713F12 | rgb(113, 63, 18) | |
| yellow-950 | #422006 | rgb(66, 32, 6) |
Lime
| Color | Name | HEX | RGB |
|---|---|---|---|
| lime-50 | #F7FEE7 | rgb(247, 254, 231) | |
| lime-100 | #ECFCCB | rgb(236, 252, 203) | |
| lime-200 | #D9F99D | rgb(217, 249, 157) | |
| lime-300 | #BEF264 | rgb(190, 242, 100) | |
| lime-400 | #A3E635 | rgb(163, 230, 53) | |
| lime-500 | #84CC16 | rgb(132, 204, 22) | |
| lime-600 | #65A30D | rgb(101, 163, 13) | |
| lime-700 | #4D7C0F | rgb(77, 124, 15) | |
| lime-800 | #3F6212 | rgb(63, 98, 18) | |
| lime-900 | #365314 | rgb(54, 83, 20) | |
| lime-950 | #1A2E05 | rgb(26, 46, 5) |
Green
| Color | Name | HEX | RGB |
|---|---|---|---|
| green-50 | #F0FDF4 | rgb(240, 253, 244) | |
| green-100 | #DCFCE7 | rgb(220, 252, 231) | |
| green-200 | #BBF7D0 | rgb(187, 247, 208) | |
| green-300 | #86EFAC | rgb(134, 239, 172) | |
| green-400 | #4ADE80 | rgb(74, 222, 128) | |
| green-500 | #22C55E | rgb(34, 197, 94) | |
| green-600 | #16A34A | rgb(22, 163, 74) | |
| green-700 | #15803D | rgb(21, 128, 61) | |
| green-800 | #166534 | rgb(22, 101, 52) | |
| green-900 | #14532D | rgb(20, 83, 45) | |
| green-950 | #052E16 | rgb(5, 46, 22) |
Emerald
| Color | Name | HEX | RGB |
|---|---|---|---|
| emerald-50 | #ECFDF5 | rgb(236, 253, 245) | |
| emerald-100 | #D1FAE5 | rgb(209, 250, 229) | |
| emerald-200 | #A7F3D0 | rgb(167, 243, 208) | |
| emerald-300 | #6EE7B7 | rgb(110, 231, 183) | |
| emerald-400 | #34D399 | rgb(52, 211, 153) | |
| emerald-500 | #10B981 | rgb(16, 185, 129) | |
| emerald-600 | #059669 | rgb(5, 150, 105) | |
| emerald-700 | #047857 | rgb(4, 120, 87) | |
| emerald-800 | #065F46 | rgb(6, 95, 70) | |
| emerald-900 | #064E3B | rgb(6, 78, 59) | |
| emerald-950 | #022C22 | rgb(2, 44, 34) |
Teal
| Color | Name | HEX | RGB |
|---|---|---|---|
| teal-50 | #F0FDFA | rgb(240, 253, 250) | |
| teal-100 | #CCFBF1 | rgb(204, 251, 241) | |
| teal-200 | #99F6E4 | rgb(153, 246, 228) | |
| teal-300 | #5EEAD4 | rgb(94, 234, 212) | |
| teal-400 | #2DD4BF | rgb(45, 212, 191) | |
| teal-500 | #14B8A6 | rgb(20, 184, 166) | |
| teal-600 | #0D9488 | rgb(13, 148, 136) | |
| teal-700 | #0F766E | rgb(15, 118, 110) | |
| teal-800 | #115E59 | rgb(17, 94, 89) | |
| teal-900 | #044E42 | rgb(4, 78, 66) | |
| teal-950 | #012A26 | rgb(1, 42, 38) |
Cyan
| Color | Name | HEX | RGB |
|---|---|---|---|
| cyan-50 | #ECFEFF | rgb(236, 254, 255) | |
| cyan-100 | #CFFAFE | rgb(207, 250, 254) | |
| cyan-200 | #A5F3FC | rgb(165, 243, 252) | |
| cyan-300 | #67E8F9 | rgb(103, 232, 249) | |
| cyan-400 | #22D3EE | rgb(34, 211, 238) | |
| cyan-500 | #06B6D4 | rgb(6, 182, 212) | |
| cyan-600 | #0891B2 | rgb(8, 145, 178) | |
| cyan-700 | #0E7490 | rgb(14, 116, 144) | |
| cyan-800 | #155E75 | rgb(21, 94, 117) | |
| cyan-900 | #164E63 | rgb(22, 78, 99) | |
| cyan-950 | #083344 | rgb(8, 51, 68) |
Sky
| Color | Name | HEX | RGB |
|---|---|---|---|
| sky-50 | #F0F9FF | rgb(240, 249, 255) | |
| sky-100 | #E0F2FE | rgb(224, 242, 254) | |
| sky-200 | #BAE6FD | rgb(186, 230, 253) | |
| sky-300 | #7DD3FC | rgb(125, 211, 252) | |
| sky-400 | #38BDF8 | rgb(56, 189, 248) | |
| sky-500 | #0EA5E9 | rgb(14, 165, 233) | |
| sky-600 | #0284C7 | rgb(2, 132, 199) | |
| sky-700 | #0369A1 | rgb(3, 105, 161) | |
| sky-800 | #075985 | rgb(7, 89, 133) | |
| sky-900 | #0C4A6E | rgb(12, 74, 110) | |
| sky-950 | #082F49 | rgb(8, 47, 73) |
Blue
| Color | Name | HEX | RGB |
|---|---|---|---|
| blue-50 | #EFF6FF | rgb(239, 246, 255) | |
| blue-100 | #DBEAFE | rgb(219, 234, 254) | |
| blue-200 | #BFDBFE | rgb(191, 219, 254) | |
| blue-300 | #93C5FD | rgb(147, 197, 253) | |
| blue-400 | #60A5FA | rgb(96, 165, 250) | |
| blue-500 | #3B82F6 | rgb(59, 130, 246) | |
| blue-600 | #2563EB | rgb(37, 99, 235) | |
| blue-700 | #1D4ED8 | rgb(29, 78, 216) | |
| blue-800 | #1E40AF | rgb(30, 64, 175) | |
| blue-900 | #1E3A8A | rgb(30, 58, 138) | |
| blue-950 | #172554 | rgb(23, 37, 84) |
Indigo
| Color | Name | HEX | RGB |
|---|---|---|---|
| indigo-50 | #EEF2FF | rgb(238, 242, 255) | |
| indigo-100 | #E0E7FF | rgb(224, 231, 255) | |
| indigo-200 | #C7D2FE | rgb(199, 210, 254) | |
| indigo-300 | #A5B4FC | rgb(165, 180, 252) | |
| indigo-400 | #818CF8 | rgb(129, 140, 248) | |
| indigo-500 | #6366F1 | rgb(99, 102, 241) | |
| indigo-600 | #4F46E5 | rgb(79, 70, 229) | |
| indigo-700 | #4338CA | rgb(67, 56, 202) | |
| indigo-800 | #3730A3 | rgb(55, 48, 163) | |
| indigo-900 | #312E81 | rgb(49, 46, 129) | |
| indigo-950 | #1E1B4B | rgb(30, 27, 75) |
Violet
| Color | Name | HEX | RGB |
|---|---|---|---|
| violet-50 | #F5F3FF | rgb(245, 243, 255) | |
| violet-100 | #EDE9FE | rgb(237, 233, 254) | |
| violet-200 | #DDD6FE | rgb(221, 214, 254) | |
| violet-300 | #C4B5FD | rgb(196, 181, 253) | |
| violet-400 | #A78BFA | rgb(167, 139, 250) | |
| violet-500 | #8B5CF6 | rgb(139, 92, 246) | |
| violet-600 | #7C3AED | rgb(124, 58, 237) | |
| violet-700 | #6D28D9 | rgb(109, 40, 217) | |
| violet-800 | #5B21B6 | rgb(91, 33, 182) | |
| violet-900 | #4C1D95 | rgb(76, 29, 149) | |
| violet-950 | #2E1065 | rgb(46, 16, 101) |
Purple
| Color | Name | HEX | RGB |
|---|---|---|---|
| purple-50 | #FAF5FF | rgb(250, 245, 255) | |
| purple-100 | #F3E8FF | rgb(243, 232, 255) | |
| purple-200 | #E9D5FF | rgb(233, 213, 255) | |
| purple-300 | #D8B4FE | rgb(216, 180, 254) | |
| purple-400 | #C084FC | rgb(192, 132, 252) | |
| purple-500 | #A855F7 | rgb(168, 85, 247) | |
| purple-600 | #9333EA | rgb(147, 51, 234) | |
| purple-700 | #7E22CE | rgb(126, 34, 206) | |
| purple-800 | #6B21A8 | rgb(107, 33, 168) | |
| purple-900 | #581C87 | rgb(88, 28, 135) | |
| purple-950 | #3B0764 | rgb(59, 7, 100) |
Fuchsia
| Color | Name | HEX | RGB |
|---|---|---|---|
| fuchsia-50 | #FDF4FF | rgb(253, 244, 255) | |
| fuchsia-100 | #FAE8FF | rgb(250, 232, 255) | |
| fuchsia-200 | #F5D0FE | rgb(245, 208, 254) | |
| fuchsia-300 | #F0ABFC | rgb(240, 171, 252) | |
| fuchsia-400 | #E879F9 | rgb(232, 121, 249) | |
| fuchsia-500 | #D946EF | rgb(217, 70, 239) | |
| fuchsia-600 | #C026D3 | rgb(192, 38, 211) | |
| fuchsia-700 | #A21CAF | rgb(162, 28, 175) | |
| fuchsia-800 | #86198F | rgb(134, 25, 143) | |
| fuchsia-900 | #701A75 | rgb(112, 26, 117) | |
| fuchsia-950 | #4A044E | rgb(74, 4, 78) |
Pink
| Color | Name | HEX | RGB |
|---|---|---|---|
| pink-50 | #FDF2F8 | rgb(253, 242, 248) | |
| pink-100 | #FCE7F3 | rgb(252, 231, 243) | |
| pink-200 | #FBCFE8 | rgb(251, 207, 232) | |
| pink-300 | #F9A8D4 | rgb(249, 168, 212) | |
| pink-400 | #F472B6 | rgb(244, 114, 182) | |
| pink-500 | #EC4899 | rgb(236, 72, 153) | |
| pink-600 | #DB2777 | rgb(219, 39, 119) | |
| pink-700 | #BE185D | rgb(190, 24, 93) | |
| pink-800 | #9D174D | rgb(157, 23, 77) | |
| pink-900 | #831843 | rgb(131, 24, 67) | |
| pink-950 | #500724 | rgb(80, 7, 36) |
Rose
| Color | Name | HEX | RGB |
|---|---|---|---|
| rose-50 | #FFF1F2 | rgb(255, 241, 242) | |
| rose-100 | #FFE4E6 | rgb(255, 228, 230) | |
| rose-200 | #FECDD3 | rgb(254, 205, 211) | |
| rose-300 | #FDA4AF | rgb(253, 164, 175) | |
| rose-400 | #FB7185 | rgb(251, 113, 133) | |
| rose-500 | #F43F5E | rgb(244, 63, 94) | |
| rose-600 | #E11D48 | rgb(225, 29, 72) | |
| rose-700 | #BE123C | rgb(190, 18, 60) | |
| rose-800 | #9F1239 | rgb(159, 18, 57) | |
| rose-900 | #881337 | rgb(136, 19, 55) | |
| rose-950 | #4C0519 | rgb(76, 5, 25) |
Slate
| Color | Name | HEX | RGB |
|---|---|---|---|
| slate-50 | #F8FAFC | rgb(248, 250, 252) | |
| slate-100 | #F1F5F9 | rgb(241, 245, 249) | |
| slate-200 | #E2E8F0 | rgb(226, 232, 240) | |
| slate-300 | #CBD5E1 | rgb(203, 213, 225) | |
| slate-400 | #94A3B8 | rgb(148, 163, 184) | |
| slate-500 | #64748B | rgb(100, 116, 139) | |
| slate-600 | #475569 | rgb(71, 85, 105) | |
| slate-700 | #334155 | rgb(51, 65, 85) | |
| slate-800 | #1E293B | rgb(30, 41, 59) | |
| slate-900 | #0F172A | rgb(15, 23, 42) | |
| slate-950 | #020617 | rgb(2, 6, 23) |
Gray
| Color | Name | HEX | RGB |
|---|---|---|---|
| gray-50 | #F9FAFB | rgb(249, 250, 251) | |
| gray-100 | #F3F4F6 | rgb(243, 244, 246) | |
| gray-200 | #E5E7EB | rgb(229, 231, 235) | |
| gray-300 | #D1D5DB | rgb(209, 213, 219) | |
| gray-400 | #9CA3AF | rgb(156, 163, 175) | |
| gray-500 | #6B7280 | rgb(107, 114, 128) | |
| gray-600 | #4B5563 | rgb(75, 85, 99) | |
| gray-700 | #374151 | rgb(55, 65, 81) | |
| gray-800 | #1F2937 | rgb(31, 41, 55) | |
| gray-900 | #111827 | rgb(17, 24, 39) | |
| gray-950 | #030712 | rgb(3, 7, 18) |
Zinc
| Color | Name | HEX | RGB |
|---|---|---|---|
| zinc-50 | #FAFAFA | rgb(250, 250, 250) | |
| zinc-100 | #F4F4F5 | rgb(244, 244, 245) | |
| zinc-200 | #E4E4E7 | rgb(228, 228, 231) | |
| zinc-300 | #D4D4D8 | rgb(212, 212, 216) | |
| zinc-400 | #A1A1AA | rgb(161, 161, 170) | |
| zinc-500 | #71717A | rgb(113, 113, 122) | |
| zinc-600 | #52525B | rgb(82, 82, 91) | |
| zinc-700 | #3F3F46 | rgb(63, 63, 70) | |
| zinc-800 | #27272A | rgb(39, 39, 42) | |
| zinc-900 | #18181B | rgb(24, 24, 27) | |
| zinc-950 | #09090B | rgb(9, 9, 11) |
Neutral
| Color | Name | HEX | RGB |
|---|---|---|---|
| neutral-50 | #FAFAFA | rgb(250, 250, 250) | |
| neutral-100 | #F5F5F5 | rgb(245, 245, 245) | |
| neutral-200 | #E7E5E4 | rgb(231, 229, 228) | |
| neutral-300 | #D6D3D1 | rgb(214, 211, 209) | |
| neutral-400 | #A8A29E | rgb(168, 162, 158) | |
| neutral-500 | #78716C | rgb(120, 113, 108) | |
| neutral-600 | #57534E | rgb(87, 83, 78) | |
| neutral-700 | #44403C | rgb(68, 64, 60) | |
| neutral-800 | #292524 | rgb(41, 37, 36) | |
| neutral-900 | #1C1917 | rgb(28, 25, 23) | |
| neutral-950 | #0C0A09 | rgb(12, 10, 9) |
Stone
| Color | Name | HEX | RGB |
|---|---|---|---|
| stone-50 | #FAFAF9 | rgb(250, 250, 249) | |
| stone-100 | #F5F5F4 | rgb(245, 245, 244) | |
| stone-200 | #E7E5E4 | rgb(231, 229, 228) | |
| stone-300 | #D6D3D1 | rgb(214, 211, 209) | |
| stone-400 | #A8A29E | rgb(168, 162, 158) | |
| stone-500 | #78716C | rgb(120, 113, 108) | |
| stone-600 | #57534E | rgb(87, 83, 78) | |
| stone-700 | #44403C | rgb(68, 64, 60) | |
| stone-800 | #292524 | rgb(41, 37, 36) | |
| stone-900 | #1C1917 | rgb(28, 25, 23) | |
| stone-950 | #0C0A09 | rgb(12, 10, 9) |