TAILWIND CSS COLORS

Tailwind comes with an expertly crafted default color palette out of the box. It's a great place to start if you are not sure of your branding. As a default, Tailwind uses the whole default color palette as its background colors. Using the theme, you can change the colors.

Tailwind Css colors consist of Green HTML colors, Cyan HTML colors, Blue HTML colors, Pink HTML colors, Orange HTML colors, Brown HTML colors, white and Mild HTML And Gray HTML colors.

Gray Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #F9FAFB rgb(249, 250, 251) hsl(210, 20%, 98%)
 
100 #F3F4F6 rgb(243, 244, 246) hsl(220, 14%, 96%)
 
200 #E5E7EB rgb(229, 231, 235) hsl(220, 13%, 91%)
 
300 #D1D5DB rgb(209, 213, 219) hsl(216, 12%, 84%)
 
400 #9CA3AF rgb(156, 163, 175) hsl(218, 11%, 65%)
 
500 #6B7280 rgb(107, 114, 128) hsl(220, 9%, 46%)
 
600 #4B5563 rgb(75, 85, 99) hsl(215, 14%, 34%)
 
700 #374151 rgb(55, 65, 81) hsl(217, 19%, 27%)
 
800 #1F2937 rgb(31, 41, 55) hsl(215, 28%, 17%)
 
900 #111827 rgb(17, 24, 39) hsl(221, 39%, 11%)

Red Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #FEF2F2 rgb(254, 242, 242) hsl(0, 86%, 97%)
 
100 #FEE2E2 rgb(254, 226, 226) hsl(0, 93%, 94%)
 
200 #FECACA rgb(254, 202, 202) hsl(0, 96%, 89%)
 
300 #FCA5A5 rgb(252, 165, 165) hsl(0, 94%, 82%)
 
400 #F87171 rgb(248, 113, 113) hsl(0, 91%, 71%)
 
500 #EF4444 rgb(239, 68, 68) hsl(0, 84%, 60%)
 
600 #DC2626 rgb(220 3,8, 38) hsl(0, 72%, 51%)
 
700 #B91C1C rgb(185, 28, 28) hsl(0, 74%, 42%)
 
800 #991B1B rgb(153, 27, 27) hsl(0, 70%, 35%)
 
900 #7F1D1D rgb(127, 29, 29) hsl(0, 63%, 31%)

Yellow Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #FFFBEB rgb(255, 251, 235) hsl(48, 100%, 96%)
 
100 #FEF3C7 rgb(254, 243, 199) hsl(48, 96%, 89%)
 
200 #FDE68A rgb(253, 230, 138) hsl(48, 97%, 77%)
 
300 #FCD34D rgb(252, 211, 77) hsl(46, 97%, 65%)
 
400 #FBBF24 rgb(251, 191, 36) hsl(43, 96%, 56%)
 
500 #F59E0B rgb(245, 158, 11) hsl(38, 92%, 50%)
 
600 #D97706 rgb(217, 119, 6) hsl(32, 95%, 44%)
 
700 #B45309 rgb(180, 83, 9) hsl(26, 90%, 37%)
 
800 #92400E rgb(146, 64, 14) hsl(23, 82%, 31%)
 
900 #78350F rgb(120, 53, 15) hsl(22, 78%, 26%)

Green Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #ECFDF5 rgb(236, 253, 245) hsl(152, 81%, 96%)
 
100 #D1FAE5 rgb(209, 250, 229) hsl(149, 80%, 90%)
 
200 #A7F3D0 rgb(167, 243, 208) hsl(152, 76%, 80%)
 
300 #6EE7B7 rgb(110, 231, 183) hsl(156, 72%, 67%)
 
400 #34D399 rgb(52, 211, 153) hsl(158, 64%, 52%)
 
500 #10B981 rgb(16, 185, 129) hsl(160, 84%, 39%)
 
600 #059669 rgb(5, 150, 105) hsl(161, 94%, 30%)
 
700 #047857 rgb(4, 120, 87) hsl(163, 94%, 24%)
 
800 #065F46 rgb(6, 95, 70) hsl(163, 88%, 20%)
 
900 #064E3B rgb(6, 78, 59) hsl(164, 86%, 16%)

Blue Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #EFF6FF rgb(239, 246, 255) hsl(214, 100%, 97%)
 
100 #DBEAFE rgb(219, 234, 254) hsl(214, 95%, 93%)
 
200 #BFDBFE rgb(191, 219, 254) hsl(213, 97%, 87%)
 
300 #93C5FD rgb(147, 197, 253) hsl(212, 96%, 78%)
 
400 #60A5FA rgb(96, 165, 250) hsl(213, 94%, 68%)
 
500 #3B82F6 rgb(59, 130, 246) hsl(217, 91%, 60%)
 
600 #2563EB rgb(37, 99, 235) hsl(221, 83%, 53%)
 
700 #1D4ED8 rgb(29, 78, 216) hsl(224, 76%, 48%)
 
800 #1E40AF rgb(30, 64, 175) hsl(226, 71%, 40%)
 
900 #1E3A8A rgb(30, 58, 138) hsl(224, 64%, 33%)

Indigo Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #EEF2FF rgb(238, 242, 255) hsl(226, 100%, 97%)
 
100 #E0E7FF rgb(224, 231, 255) hsl(226, 100%, 94%)
 
200 #C7D2FE rgb(199, 210, 254) hsl(228, 96%, 89%)
 
300 #A5B4FC rgb(165, 180, 252) hsl(230, 94%, 82%)
 
400 #818CF8 rgb(129, 140, 248) hsl(234, 89%, 74%)
 
500 #6366F1 rgb(99, 102, 241) hsl(239, 84%, 67%)
 
600 #4F46E5 rgb(79, 70, 229) hsl(243, 75%, 59%)
 
700 #4338CA rgb(67, 56, 202) hsl(245, 58%, 51%)
 
800 #3730A3 rgb(55, 48, 163) hsl(244, 55%, 41%)
 
900 #312E81 rgb(49, 46, 129) hsl(242, 47%, 34%)

Purple Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #F5F3FF rgb(245, 243, 255) hsl(250, 100%, 98%)
 
100 #EDE9FE rgb(237, 233, 254) hsl(251, 91%, 95%)
 
200 #DDD6FE rgb(221, 214, 254) hsl(251, 95%, 92%)
 
300 #C4B5FD rgb(196, 181, 253) hsl(252, 95%, 85%)
 
400 #A78BFA rgb(167, 139, 250) hsl(255, 92%, 76%)
 
500 #8B5CF6 rgb(139, 92, 246) hsl(258, 90%, 66%)
 
600 #7C3AED rgb(124, 58, 237) hsl(262, 83%, 58%)
 
700 #6D28D9 rgb(109, 40, 217) hsl(263, 70%, 50%)
 
800 #5B21B6 rgb(91, 33, 182) hsl(263, 69%, 42%)
 
900 #4C1D95 rgb(76, 29, 149) hsl(264, 67%, 35%)

Pink Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #FDF2F8 rgb(253, 242, 248) hsl(327, 73%, 97%)
 
100 #FCE7F3 rgb(252, 231, 243) hsl(326, 78%, 95%)
 
200 #FBCFE8 rgb(251, 207, 232) hsl(326, 85%, 90%)
 
300 #F9A8D4 rgb(249, 168, 212) hsl(327, 87%, 82%)
 
400 #F472B6 rgb(244, 114, 182) hsl(329, 86%, 70%)
 
500 #EC4899 rgb(236, 72, 153) hsl(330, 81%, 60%)
 
600 #DB2777 rgb(219, 39, 119) hsl(333, 71%, 51%)
 
700 #BE185D rgb(190, 24, 93) hsl(335, 78%, 42%)
 
800 #9D174D rgb(157, 23, 77) hsl(336, 74%, 35%)
 
900 #831843 rgb(131, 24, 67) hsl(336, 69%, 30%)

Blue Gray Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #F8FAFC rgb(248, 250, 252) hsl(210, 40%, 98%)
 
100 #F1F5F9 rgb(241, 245, 249) hsl(210, 40%, 96%)
 
200 #E2E8F0 rgb(226, 232, 240) hsl(214, 32%, 91%)
 
300 #CBD5E1 rgb(203, 213, 225) hsl(213, 27%, 84%)
 
400 #94A3B8 rgb(148, 163, 184) hsl(215, 20%, 65%)
 
500 #64748B rgb(100, 116, 139) hsl(215, 16%, 47%)
 
600 #475569 rgb(71, 85, 105) hsl(215, 19%, 35%)
 
700 #334155 rgb(51, 65, 85) hsl(215, 25%, 27%)
 
800 #1E293B rgb(30, 41, 59) hsl(217, 33%, 17%)
 
900 #0F172A rgb(15, 23, 42) hsl(222, 47%, 11%)

Gray Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #FAFAFA rgb(250, 250, 250) hsl(0, 0%, 98%)
 
100 #F4F4F5 rgb(244, 244, 245) hsl(240, 5%, 96%)
 
200 #E4E4E7 rgb(228, 228, 231) hsl(240, 6%, 90%)
 
300 #D4D4D8 rgb(212, 212, 216) hsl(240, 5%, 84%)
 
400 #A1A1AA rgb(161, 161, 170) hsl(240, 5%, 65%)
 
500 #71717A rgb(113, 113, 122) hsl(240, 4%, 46%)
 
600 #52525B rgb(82, 82, 91) hsl(240, 5%, 34%)
 
700 #3F3F46 rgb(63, 63, 70) hsl(240, 5%, 26%)
 
800 #27272A rgb(39, 39, 42) hsl(240, 4%, 16%)
 
900 #18181B rgb(24, 24, 27) hsl(240, 6%, 10%)

True Gray Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #FAFAFA rgb(250, 250, 250) hsl(0, 0%, 98%)
 
100 #F5F5F5 rgb(245, 245, 245) hsl(0, 0%, 96%)
 
200 #E5E5E5 rgb(229, 229, 229) hsl(0, 0%, 90%)
 
300 #D4D4D4 rgb(212, 212, 212) hsl(0, 0%, 83%)
 
400 #A3A3A3 rgb(163, 163, 163) hsl(0, 0%, 64%)
 
500 #737373 rgb(115, 115, 115) hsl(0, 0%, 45%)
 
600 #525252 rgb(82, 82, 82) hsl(0, 0%, 32%)
 
700 #404040 rgb(64, 64, 64) hsl(0, 0%, 25%)
 
800 #262626 rgb(38, 38, 38) hsl(0, 0%, 15%)
 
900 #171717 rgb(23, 23, 23) hsl(0, 0%, 9%)

Warm Gray Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #FAFAF9 rgb(250, 250, 249) hsl(60, 9%, 98%)
 
100 #F5F5F4 rgb(245, 245, 244) hsl(60, 5%, 96%)
 
200 #E7E5E4 rgb(231, 229, 228) hsl(20, 6%, 90%)
 
300 #D6D3D1 rgb(214, 211, 209) hsl(24, 6%, 83%)
 
400 #A8A29E rgb(168, 162, 158) hsl(24, 5%, 64%)
 
500 #78716C rgb(120, 113, 108) hsl(25, 5%, 45%)
 
600 #57534E rgb(87, 83, 78) hsl(33, 5%, 32%)
 
700 #44403C rgb(68, 64, 60) hsl(30, 6%, 25%)
 
800 #292524 rgb(41, 37, 36) hsl(12, 6%, 15%)
 
900 #1C1917 rgb(28, 25, 23) hsl(24, 10%, 10%)

Orange Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #FFF7ED rgb(255, 247, 237) hsl(33, 100%, 96%)
 
100 #FFEDD5 rgb(255, 237, 213) hsl(34, 100%, 92%)
 
200 #FED7AA rgb(254, 215, 170) hsl(32, 98%, 83%)
 
300 #FDBA74 rgb(253, 186, 116) hsl(31, 97%, 72%)
 
400 #FB923C rgb(251, 146, 60) hsl(27, 96%, 61%)
 
500 #F97316 rgb(249, 115, 22) hsl(25, 95%, 53%)
 
600 #EA580C rgb(234, 88, 12) hsl(21, 90%, 48%)
 
700 #C2410C rgb(194, 65, 12) hsl(17, 88%, 40%)
 
800 #9A3412 rgb(154, 52, 18) hsl(15, 79%, 34%)
 
900 #7C2D12 rgb(124, 45, 18) hsl(15, 75%, 28%)

Amber Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #FFFBEB rgb(255, 251, 235) hsl(48, 100%, 96%)
 
100 #FEF3C7 rgb(254, 243, 199) hsl(48, 96%, 89%)
 
200 #FDE68A rgb(253, 230, 138) hsl(48, 97%, 77%)
 
300 #FCD34D rgb(252, 211, 77) hsl(46, 97%, 65%)
 
400 #FBBF24 rgb(251, 191, 36) hsl(43, 96%, 56%)
 
500 #F59E0B rgb(245, 158, 11) hsl(38, 92%, 50%)
 
600 #D97706 rgb(217, 119, 6) hsl(32, 95%, 44%)
 
700 #B45309 rgb(180, 83, 9) hsl(26, 90%, 37%)
 
800 #92400E rgb(146, 64, 14) hsl(23, 82%, 31%)
 
900 #78350F rgb(120, 53, 15) hsl(22, 78%, 26%)

Lime Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #F7FEE7 rgb(247, 254, 231) hsl(78, 92%, 95%)
 
100 #ECFCCB rgb(236, 252, 203) hsl(80, 89%, 89%)
 
200 #D9F99D rgb(217, 249, 157) hsl(81, 88%, 80%)
 
300 #BEF264 rgb(190, 242, 100) hsl(82, 85%, 67%)
 
400 #A3E635 rgb(163, 230, 53) hsl(83, 78%, 55%)
 
500 #84CC16 rgb(132, 204, 22) hsl(84, 81%, 44%)
 
600 #65A30D rgb(101, 163, 13) hsl(85, 85%, 35%)
 
700 #4D7C0F rgb(77, 124, 15) hsl(86, 78%, 27%)
 
800 #3F6212 rgb(63, 98, 18) hsl(86, 69%, 23%)
 
900 #365314 rgb(54, 83, 20) hsl(88, 61%, 20%)

Emerald Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #ECFDF5 rgb(236, 253, 245) hsl(152, 81%, 96%)
 
100 #D1FAE5 rgb(209, 250, 229) hsl(149, 80%, 90%)
 
200 #A7F3D0 rgb(167, 243, 208) hsl(152, 76%, 80%)
 
300 #6EE7B7 rgb(110, 231, 183) hsl(156, 72%, 67%)
 
400 #34D399 rgb(52, 211, 153) hsl(158, 64%, 52%)
 
500 #10B981 rgb(16, 185, 129) hsl(160, 84%, 39%)
 
600 #059669 rgb(5, 150, 105) hsl(161, 94%, 30%)
 
700 #047857 rgb(4, 120, 87) hsl(163, 94%, 24%)
 
800 #065F46 rgb(6, 95, 70) hsl(163, 88%, 20%)
 
900 #064E3B rgb(6, 78, 59) hsl(164, 86%, 16%)

Teal Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #F0FDFA rgb(240, 253, 250) hsl(166, 76%, 97%)
 
100 #CCFBF1 rgb(204, 251, 241) hsl(167, 85%, 89%)
 
200 #99F6E4 rgb(153, 246, 228) hsl(168, 84%, 78%)
 
300 #5EEAD4 rgb(94, 234, 212) hsl(171, 77%, 64%)
 
400 #2DD4BF rgb(45, 212, 191) hsl(172, 66%, 50%)
 
500 #14B8A6 rgb(20, 184, 166) hsl(173, 80%, 40%)
 
600 #0D9488 rgb(13, 148, 136) hsl(175, 84%, 32%)
 
700 #0F766E rgb(15, 118, 110) hsl(175, 77%, 26%)
 
800 #115E59 rgb(17, 94, 89) hsl(176, 69%, 22%)
 
900 #134E4A rgb(19, 78, 74) hsl(176, 61%, 19%)

Cyan Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #ECFEFF rgb(236, 254, 255) hsl(183, 100%, 96%)
 
100 #CFFAFE rgb(207, 250, 254) hsl(185, 96%, 90%)
 
200 #A5F3FC rgb(165, 243, 252) hsl(186, 94%, 82%)
 
300 #67E8F9 rgb(103, 232, 249) hsl(187, 92%, 69%)
 
400 #22D3EE rgb(34, 211, 238) hsl(188, 86%, 53%)
 
500 #06B6D4 rgb(6, 182, 212) hsl(189, 94%, 43%)
 
600 #0891B2 rgb(8, 145, 178) hsl(192, 91%, 36%)
 
700 #0E7490 rgb(14, 116, 144) hsl(193, 82%, 31%)
 
800 #155E75 rgb(21, 94, 117) hsl(194, 70%, 27%)
 
900 #164E63 rgb(22, 78, 99) hsl(196, 64%, 24%)

Sky Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #F0F9FF rgb(240, 249, 255) hsl(204, 100%, 97%)
 
100 #E0F2FE rgb(224, 242, 254) hsl(204, 94%, 94%)
 
200 #BAE6FD rgb(186, 230, 253) hsl(201, 94%, 86%)
 
300 #7DD3FC rgb(125, 211, 252) hsl(199, 95%, 74%)
 
400 #38BDF8 rgb(56, 189, 248) hsl(198, 93%, 60%)
 
500 #0EA5E9 rgb(14, 165, 233) hsl(199, 89%, 48%)
 
600 #0284C7 rgb(2, 132, 199) hsl(200, 98%, 39%)
 
700 #0369A1 rgb(3, 105, 161) hsl(201, 96%, 32%)
 
800 #075985 rgb(7, 89, 133) hsl(201, 90%, 27%)
 
900 #0C4A6E rgb(12, 74, 110) hsl(202, 80%, 24%)

Violet Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #F5F3FF rgb(245, 243, 255) hsl(250, 100%, 98%)
 
100 #EDE9FE rgb(237, 233, 254) hsl(251, 91%, 95%)
 
200 #DDD6FE rgb(221, 214, 254) hsl(251, 95%, 92%)
 
300 #C4B5FD rgb(196, 181, 253) hsl(252, 95%, 85%)
 
400 #A78BFA rgb(167, 139, 250) hsl(255, 92%, 76%)
 
500 #8B5CF6 rgb(139, 92, 246) hsl(258, 90%, 66%)
 
600 #7C3AED rgb(124, 58, 237) hsl(262, 83%, 58%)
 
700 #6D28D9 rgb(109, 40, 217) hsl(263, 70%, 50%)
 
800 #5B21B6 rgb(91, 33, 182) hsl(263, 69%, 42%)
 
900 #4C1D95 rgb(76, 29, 149) hsl(264, 67%, 35%)

Fuchsia Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #FDF4FF rgb(253, 244, 255) hsl(289, 100%, 98%)
 
100 #FAE8FF rgb(250, 232, 255) hsl(287, 100%, 95%)
 
200 #F5D0FE rgb(245, 208, 254) hsl(288, 96%, 91%)
 
300 #F0ABFC rgb(240, 171, 252) hsl(291, 93%, 83%)
 
400 #E879F9 rgb(232, 121, 249) hsl(292, 91%, 73%)
 
500 #D946EF rgb(217, 70, 239) hsl(292, 84%, 61%)
 
600 #C026D3 rgb(192, 38, 211) hsl(293, 69%, 49%)
 
700 #A21CAF rgb(162, 28, 175) hsl(295, 72%, 40%)
 
800 #86198F rgb(134, 25, 143) hsl(295, 70%, 33%)
 
900 #701A75 rgb(112, 26, 117) hsl(297, 64%, 28%)

Rose Colors

COLOR CLASS NAME HEXA CODE RGB CODE HSL CODE
 
50 #FFF1F2 rgb(255, 241, 242) hsl(356, 100%, 97%)
 
100 #FFE4E6 rgb(255, 228, 230) hsl(356, 100%, 95%)
 
200 #FECDD3 rgb(254, 205, 211) hsl(353, 96%, 90%)
 
300 #FDA4AF rgb(253, 164, 175) hsl(353, 96%, 82%)
 
400 #FB7185 rgb(251, 113, 133) hsl(351, 95%, 71%)
 
500 #F43F5E rgb(244, 63, 94) hsl(350, 89%, 60%)
 
600 #E11D48 rgb(225, 29, 72) hsl(347, 77%, 50%)
 
700 #BE123C rgb(190, 18, 60) hsl(345, 83%, 41%)
 
800 #9F1239 rgb(159, 18, 57) hsl(343, 80%, 35%)
 
900 #881337 rgb(136, 19, 55) hsl(342, 75%, 30%)