header bg image

Tailwind CSS Color Palette in different CSS color formats

By Vivian

/

July 13, 2022

Colors

Slate
Name Hex 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.1%)
200
#e2e8f0
rgb(226,232,240)
hsl(214.3,31.8%,91.4%)
300
#cbd5e1
rgb(203,213,225)
hsl(212.7,26.8%,83.9
400
#94a3b8
rgb(148,163,184)
hsl(215,20.2%,65.1%)
500
#64748b
rgb(100,116,139)
hsl(215.4,16.3%,46.9%)
600
#475569
rgb(71,85,105)
hsl(215.3,19.3%,34.5%)
700
#334155
rgb(51,65,85)
hsl(215.3,25%,26.7%)
800
#1e293b
rgb(30,41,59)
hsl(217.2,32.6%,17.5%)
900
#0f172a
rgb(15,23,42)
hsl(222.2,47.4%,11.2%)
Gray
Name Hex Code RGB Code HSL Code
50
#f9fafb
rgb(249,250,251)
hsl(210,20%,98%)
100
#f3f4f6
rgb(243,244,246)
hsl(220,14.3%,95.9%)
200
#e5e7eb
rgb(229,231,235)
hsl(220,13%,91%)
300
#d1d5db
rgb(209,213,219)
hsl(216,12.2%,83.9%)
400
#9ca3af
rgb(156,163,175)
hsl(217.9,10.6%,64.9%)
500
#6b7280
rgb(107,114,128)
hsl(220,8.9%,46.1%)
600
#4b5563
rgb(75,85,99)
hsl(215,13.8%,34.1%)
700
#374151
rgb(55,65,81)
hsl(216.9,19.1%,26.7%)
800
#1f2937
rgb(31,41,55)
hsl(215,27.9%,16.9%)
900
#111827
rgb(17,24,39)
hsl(220.9,39.3%,11%)
Zinc
Name Hex Code RGB Code HSL Code
50
#fafafa
rgb(250,250,250)
hsl(0,0%,98%)
100
#f4f4f5
rgb(244,244,245)
hsl(240,4.8%,95.9%)
200
#e4e4e7
rgb(228,228,231)
hsl(240,5.9%,90%)
300
#d4d4d8
rgb(212,212,216)
hsl(240,4.9%,83.9%)
400
#a1a1aa
rgb(161,161,170)
hsl(240,5%,64.9%)
500
#71717a
rgb(113,113,122)
hsl(240,3.8%,46.1%)
600
#52525b
rgb(82,82,91)
hsl(240,5.2%,33.9%)
700
#3f3f46
rgb(63,63,70)
hsl(240,5.3%,26.1%)
800
#27272a
rgb(39,39,42)
hsl(240,3.7%,15.9%)
900
#18181b
rgb(24,24,27)
hsl(240,5.9%,10%)
Neutral
Name Hex 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.1%)
200
#e5e5e5
rgb(229,229,229)
hsl(0,0%,89.8%)
300
#d4d4d4
rgb(212,212,212)
hsl(0,0%,83.1%)
400
#a3a3a3
rgb(163,163,163)
hsl(0,0%,63.9%)
500
#737373
rgb(115,115,115)
hsl(0,0%,45.1%)
600
#525252
rgb(82,82,82)
hsl(0,0%,32.2%)
700
#404040
rgb(64,64,64)
hsl(0,0%,25.1%)
800
#262626
rgb(38,38,38)
hsl(0,0%,14.9%)
900
#171717
rgb(23,23,23)
hsl(0,0%,9%)
Stone
Name Hex Code RGB Code HSL Code
50
#fafaf9
rgb(250,250,249)
hsl(60,9.1%,97.8%)
100
#f5f5f4
rgb(245,245,244)
hsl(60,4.8%,95.9%)
200
#e7e5e4
rgb(231,229,228)
hsl(20,5.9%,90%)
300
#d6d3d1
rgb(214,211,209)
hsl(24,5.7%,82.9%)
400
#a8a29e
rgb(168,162,158)
hsl(24,5.4%,63.9%)
500
#78716c
rgb(120,113,108)
hsl(25,5.3%,44.7%)
600
#57534e
rgb(87,83,78)
hsl(33.3,5.5%,32.4%)
700
#44403c
rgb(68,64,60)
hsl(30,6.3%,25.1%)
800
#292524
rgb(41,37,36)
hsl(12,6.5%,15.1%)
900
#1c1917
rgb(28,25,23)
hsl(24,9.8%,10%)
Red
Name Hex Code RGB Code HSL Code
50
#fef2f2
rgb(254,242,242)
hsl(0,85.7%,97.3%)
100
#fee2e2
rgb(254,226,226)
hsl(0,93.3%,94.1%)
200
#fecaca
rgb(254,202,202)
hsl(0,96.3%,89.4%)
300
#fca5a5
rgb(252,165,165)
hsl(0,93.5%,81.8%)
400
#f87171
rgb(248,113,113)
hsl(0,90.6%,70.8%)
500
#ef4444
rgb(239,68,68)
hsl(0,84.2%,60.2%)
600
#dc2626
rgb(220,38,38)
hsl(0,72.2%,50.6%)
700
#b91c1c
rgb(185,28,28)
hsl(0,73.7%,41.8%)
800
#991b1b
rgb(153,27,27)
hsl(0,70%,35.3%)
900
#7f1d1d
rgb(127,29,29)
hsl(0,62.8%,30.6%)
Orange
Name Hex Code RGB Code HSL Code
50
#fff7ed
rgb(255,247,237)
hsl(33.3,100%,96.5%)
100
#ffedd5
rgb(255,237,213)
hsl(34.3,100%,91.8%)
200
#fed7aa
rgb(254,215,170)
hsl(32.1,97.7%,83.1%)
300
#fdba74
rgb(253,186,116)
hsl(30.7,97.2%,72.4%)
400
#fb923c
rgb(251,146,60)
hsl(27,96%,61%)
500
#f97316
rgb(249,115,22)
hsl(24.6,95%,53.1%)
600
#ea580c
rgb(234,88,12)
hsl(20.5,90.2%,48.2%)
700
#c2410c
rgb(194,65,12)
hsl(17.5,88.3%,40.4%)
800
#9a3412
rgb(154,52,18)
hsl(15,79.1%,33.7%)
900
#7c2d12
rgb(124,45,18)
hsl(15.3,74.6%,27.8%)
Amber
Name Hex Code RGB Code HSL Code
50
#fffbeb
rgb(255,251,235)
hsl(48,100%,96.1%)
100
#fef3c7
rgb(254,243,199)
hsl(48,96.5%,88.8%)
200
#fde68a
rgb(253,230,138)
hsl(48,96.6%,76.7%)
300
#fcd34d
rgb(252,211,77)
hsl(45.9,96.7%,64.5%)
400
#fbbf24
rgb(251,191,36)
hsl(43.3,96.4%,56.3%)
500
#f59e0b
rgb(245,158,11)
hsl(37.7,92.1%,50.2%)
600
#d97706
rgb(217,119,6)
hsl(32.1,94.6%,43.7%)
700
#b45309
rgb(180,83,9)
hsl(26,90.5%,37.1%)
800
#92400e
rgb(146,64,14)
hsl(22.7,82.5%,31.4%)
900
#78350f
rgb(120,53,15)
hsl(21.7,77.8%,26.5%)
Yellow
Name Hex Code RGB Code HSL Code
50
#fefce8
rgb(254,252,232)
hsl(54.5,91.7%,95.3%)
100
#fef9c3
rgb(254,249,195)
hsl(54.9,96.7%,88%)
200
#fef08a
rgb(254,240,138)
hsl(52.8,98.3%,76.9%)
300
#fde047
rgb(253,224,71)
hsl(50.4,97.8%,63.5%)
400
#facc15
rgb(250,204,21)
hsl(47.9,95.8%,53.1%)
500
#eab308
rgb(234,179,8)
hsl(45.4,93.4%,47.5%)
600
#ca8a04
rgb(202,138,4)
hsl(40.6,96.1%,40.4%)
700
#a16207
rgb(161,98,7)
hsl(35.5,91.7%,32.9%)
800
#854d0e
rgb(133,77,14)
hsl(31.8,81%,28.8%)
900
#713f12
rgb(113,63,18)
hsl(28.4,72.5%,25.7%)
Lime
Name Hex Code RGB Code HSL Code
50
#f7fee7
rgb(247,254,231)
hsl(78.3,92%,95.1%)
100
#ecfccb
rgb(236,252,203)
hsl(79.6,89.1%,89.2%)
200
#d9f99d
rgb(217,249,157)
hsl(80.9,88.5%,79.6%)
300
#bef264
rgb(190,242,100)
hsl(82,84.5%,67.1%)
400
#a3e635
rgb(163,230,53)
hsl(82.7,78%,55.5%)
500
#84cc16
rgb(132,204,22)
hsl(83.7,80.5%,44.3%)
600
#65a30d
rgb(101,163,13)
hsl(84.8,85.2%,34.5%)
700
#4d7c0f
rgb(77,124,15)
hsl(85.9,78.4%,27.3%)
800
#3f6212
rgb(63,98,18)
hsl(86.3,69%,22.7%)
900
#365314
rgb(54,83,20)
hsl(87.6,61.2%,20.2%)
Green
Name Hex Code RGB Code HSL Code
50
#f0fdf4
rgb(240,253,244)
hsl(138.5,76.5%,96.7%)
100
#dcfce7
rgb(220,252,231)
hsl(140.6,84.2%,92.5%)
200
#bbf7d0
rgb(187,247,208)
hsl(141,78.9%,85.1%)
300
#86efac
rgb(134,239,172)
hsl(141.7,76.6%,73.1%)
400
#4ade80
rgb(74,222,128)
hsl(141.9,69.2%,58%)
500
#22c55e
rgb(34,197,94)
hsl(142.1,70.6%,45.3%)
600
#16a34a
rgb(22,163,74)
hsl(142.1,76.2%,36.3%)
700
#15803d
rgb(21,128,61)
hsl(142.4,71.8%,29.2%)
800
#166534
rgb(22,101,52)
hsl(142.8,64.2%,24.1%)
900
#14532d
rgb(20,83,45)
hsl(143.8,61.2%,20.2%)
Emerald
Name Hex Code RGB Code HSL Code
50
#ecfdf5
rgb(236,253,245)
hsl(151.8,81%,95.9%)
100
#d1fae5
rgb(209,250,229)
hsl(149.3,80.4%,90%)
200
#a7f3d0
rgb(167,243,208)
hsl(152.4,76%,80.4%)
300
#6ee7b7
rgb(110,231,183)
hsl(156.2,71.6%,66.9%)
400
#34d399
rgb(52,211,153)
hsl(158.1,64.4%,51.6%)
500
#10b981
rgb(16,185,129)
hsl(160.1,84.1%,39.4%)
600
#059669
rgb(5,150,105)
hsl(161.4,93.5%,30.4%)
700
#047857
rgb(4,120,87)
hsl(162.9,93.5%,24.3%)
800
#065f46
rgb(6,95,70)
hsl(163.1,88.1%,19.8%)
900
#064e3b
rgb(6,78,59)
hsl(164.2,85.7%,16.5%)
Teal
Name Hex Code RGB Code HSL Code
50
#f0fdfa
rgb(240,253,250)
hsl(166.2,76.5%,96.7%)
100
#ccfbf1
rgb(204,251,241)
hsl(167.2,85.5%,89.2%)
200
#99f6e4
rgb(153,246,228)
hsl(168.4,83.8%,78.2%)
300
#5eead4
rgb(94,234,212)
hsl(170.6,76.9%,64.3%)
400
#2dd4bf
rgb(45,212,191)
hsl(172.5,66%,50.4%)
500
#14b8a6
rgb(20,184,166)
hsl(173.4,80.4%,40%)
600
#0d9488
rgb(13,148,136)
hsl(174.7,83.9%,31.6%)
700
#0f766e
rgb(15,118,110)
hsl(175.3,77.4%,26.1%)
800
#115e59
rgb(17,94,89)
hsl(176.1,69.4%,21.8%)
900
#134e4a
rgb(19,78,74))
hsl(175.9,60.8%,19%)
Cyan
Name Hex Code RGB Code HSL Code
50
#ecfeff
rgb(236,254,255)
hsl(183.2,100%,96.3%)
100
#cffafe
rgb(207,250,254)
hsl(185.1,95.9%,90.4%)
200
#a5f3fc
rgb(165,243,252)
hsl(186.2,93.5%,81.8%)
300
#67e8f9
rgb(103,232,249)
hsl(187,92.4%,69%)
400
#22d3ee
rgb(34,211,238)
hsl(187.9,85.7%,53.3%)
500
#06b6d4
rgb(6,182,212)
hsl(188.7,94.5%,42.7%)
600
#0891b2
rgb(8,145,178)
hsl(191.6,91.4%,36.5%)
700
#0e7490
rgb(14,116,144)
hsl(192.9,82.3%,31%)
800
#155e75
rgb(21,94,117)
hsl(194.4,69.6%,27.1%)
900
#164e63
rgb(22,78,99)
hsl(196.4,63.6%,23.7%)
Sky
Name Hex Code RGB Code HSL Code
50
#f0f9ff
rgb(240,249,255)
hsl(204,100%,97.1%)
100
#e0f2fe
rgb(224,242,254)
hsl(204,93.8%,93.7%)
200
#bae6fd
rgb(186,230,253)
hsl(200.6,94.4%,86.1%)
300
#7dd3fc
rgb(125,211,252)
hsl(199.4,95.5%,73.9%)
400
#38bdf8
rgb(56,189,248)
hsl(198.4,93.2%,59.6%)
500
#0ea5e9
rgb(14,165,233)
hsl(198.6,88.7%,48.4%)
600
#0284c7
rgb(2,132,199)
hsl(200.4,98%,39.4%)
700
#0369a1
rgb(3,105,161)
hsl(201.3,96.3%,32.2%)
800
#075985
rgb(7,89,133)
hsl(201,90%,27.5%)
900
#0c4a6e
rgb(12,74,110)
hsl(202,80.3%,23.9%)
Blue
Name Hex Code RGB Code HSL Code
50
#eff6ff
rgb(239,246,255)
hsl(213.8,100%,96.9%)
100
#dbeafe
rgb(219,234,254)
hsl(214.3,94.6%,92.7%)
200
#bfdbfe
rgb(191,219,254)
hsl(213.3,96.9%,87.3%)
300
#93c5fd
rgb(147,197,253)
hsl(211.7,96.4%,78.4%)
400
#60a5fa
rgb(96,165,250)
hsl(213.1,93.9%,67.8%)
500
#3b82f6
rgb(59,130,246)
hsl(217.2,91.2%,59.8%)
600
#2563eb
rgb(37,99,235)
hsl(221.2,83.2%,53.3%)
700
#1d4ed8
rgb(29,78,216)
hsl(224.3,76.3%,48%)
800
#1e40af
rgb(30,64,175)
hsl(225.9,70.7%,40.2%)
900
#1e3a8a
rgb(30,58,138)
hsl(224.4,64.3%,32.9%)
Indigo
Name Hex Code RGB Code HSL Code
50
#eef2ff
rgb(238,242,255)
hsl(225.9,100%,96.7%)
100
#e0e7ff
rgb(224,231,255)
hsl(226.5,100%,93.9%)
200
#c7d2fe
rgb(199,210,254)
hsl(228,96.5%,88.8%)
300
#a5b4fc
rgb(165,180,252)
hsl(229.7,93.5%,81.8%)
400
#818cf8
rgb(129,140,248)
hsl(234.5,89.5%,73.9%)
500
#6366f1
rgb(99,102,241)
hsl(238.7,83.5%,66.7%)
600
#4f46e5
rgb(79,70,229)
hsl(243.4,75.4%,58.6%)
700
#4338ca
rgb(67,56,202)
hsl(244.5,57.9%,50.6%)
800
#3730a3
rgb(55,48,163)
hsl(243.7,54.5%,41.4%)
900
#312e81
rgb(49,46,129)
hsl(242.2,47.4%,34.3%)
Violet
Name Hex Code RGB Code HSL Code
50
#f5f3ff
rgb(245,243,255)
hsl(250,100%,97.6%)
100
#ede9fe
rgb(237,233,254)
hsl(251.4,91.3%,95.5%)
200
#ddd6fe
rgb(221,214,254)
hsl(250.5,95.2%,91.8%)
300
#c4b5fd
rgb(196,181,253)
hsl(252.5,94.7%,85.1%)
400
#a78bfa
rgb(167,139,250)
hsl(255.1,91.7%,76.3%)
500
#8b5cf6
rgb(139,92,246)
hsl(258.3,89.5%,66.3%)
600
#7c3aed
rgb(124,58,237)
hsl(262.1,83.3%,57.8%)
700
#6d28d9
rgb(109,40,217)
hsl(263.4,70%,50.4%)
800
#5b21b6
rgb(91,33,182)
hsl(263.4,69.3%,42.2%)
900
#4c1d95
rgb(76,29,149)
hsl(263.5,67.4%,34.9%)
Purple
Name Hex Code RGB Code HSL Code
50
#faf5ff
rgb(250,245,255)
hsl(270,100%,98%)
100
#f3e8ff
rgb(243,232,255)
hsl(268.7,100%,95.5%)
200
#e9d5ff
rgb(233,213,255)
hsl(268.6,100%,91.8%)
300
#d8b4fe
rgb(216,180,254)
hsl(269.2,97.4%,85.1%)
400
#c084fc
rgb(192,132,252)
hsl(270,95.2%,75.3%)
500
#a855f7
rgb(168,85,247)
hsl(270.7,91%,65.1%)
600
#9333ea
rgb(147,51,234)
hsl(271.5,81.3%,55.9%)
700
#7e22ce
rgb(126,34,206)
hsl(272.1,71.7%,47.1%)
800
#6b21a8
rgb(107,33,168)
hsl(272.9,67.2%,39.4%)
900
#581c87
rgb(88,28,135)
hsl(273.6,65.6%,32%)
Fuchsia
Name Hex Code RGB Code HSL Code
50
#fdf4ff
rgb(253,244,255)
hsl(289.1,100%,97.8%)
100
#fae8ff
rgb(250,232,255))
hsl(287,100%,95.5%)
200
#f5d0fe
rgb(245,208,254)
hsl(288.3,95.8%,90.6%)
300
#f0abfc
rgb(240,171,252)
hsl(291.1,93.1%,82.9%)
400
#e879f9
rgb(232,121,249)
hsl(292,91.4%,72.5%)
500
#d946ef
rgb(217,70,239)
hsl(292.2,84.1%,60.6%)
600
#c026d3
rgb(192,38,211)
hsl(293.4,69.5%,48.8%)
700
#a21caf
rgb(162,28,175)
hsl(294.7,72.4%,39.8%)
800
#86198f
rgb(134,25,143)
hsl(295.4,70.2%,32.9%)
900
#701a75
rgb(112,26,117)
hsl(296.7,63.6%,28%)
Pink
Name Hex Code RGB Code HSL Code
50
#fdf2f8
rgb(253,242,248)
hsl(327.3,73.3%,97.1%)
100
#fce7f3
rgb(252,231,243)
hsl(325.7,77.8%,94.7%)
200
#fbcfe8
rgb(251,207,232)
hsl(325.9,84.6%,89.8%)
300
#f9a8d4
rgb(249,168,212)
hsl(327.4,87.1%,81.8%)
400
#f472b6
rgb(244,114,182)
hsl(328.6,85.5%,70.2%)
500
#ec4899
rgb(236,72,153)
hsl(330.4,81.2%,60.4%)
600
#db2777
rgb(219,39,119)
hsl(333.3,71.4%,50.6%)
700
#be185d
rgb(190,24,93)
hsl(335.1,77.6%,42%)
800
#9d174d
rgb(157,23,77)
hsl(335.8,74.4%,35.3%)
900
#831843
rgb(131,24,67)
hsl(335.9,69%,30.4%)
Rose
Name Hex Code RGB Code HSL Code
50
#fff1f2
rgb(255,241,242)
hsl(355.7,100%,97.3%)
100
#ffe4e6
rgb(255,228,230)
hsl(355.6,100%,94.7%)
200
#fecdd3
rgb(254,205,211)
hsl(352.7,96.1%,90%)
300
#fda4af
rgb(253,164,175)
hsl(352.6,95.7%,81.8%)
400
#fb7185
rgb(251,113,133)
hsl(351.3,94.5%,71.4%)
500
#f43f5e
rgb(244,63,94)
hsl(349.7,89.2%,60.2%)
600
#e11d48
rgb(225,29,72)
hsl(346.8,77.2%,49.8%)
700
#be123c
rgb(190,18,60)
hsl(345.3,82.7%,40.8%)
800
#9f1239
rgb(159,18,57)
hsl(343.4,79.7%,34.7%)
900
#881337
rgb(136,19,55)
hsl(341.5,75.5%,30.4%)
Share this article on:

Sign up for Tailwind Weekly, our newsletter about
all things Tailwind CSS.

Check out a recent issue for a sample.

Sign up successful, check your email to confirm!

Submitting...

© 2022. Red Pixel Themes. All Rights Reserved.