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%)