Tailwind Color Chart
Explore, export and download colors from the ever-popular Tailwind CSS framework, used to quickly build clean, modern websites and apps.
Red
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(254, 242, 242) | ||
| 100 | rgb(255, 226, 226) | ||
| 200 | rgb(256, 201, 201) | ||
| 300 | rgb(257, 162, 162) | ||
| 400 | rgb(256, 100, 103) | ||
| 500 | rgb(251, 44, 54) | ||
| 600 | rgb(231, 24, 11) | ||
| 700 | rgb(193, 16, 7) | ||
| 800 | rgb(159, 7, 18) | ||
| 900 | rgb(130, 24, 26) | ||
| 950 | rgb(70, 8, 9) |
Orange
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(255, 247, 237) | ||
| 100 | rgb(255, 237, 212) | ||
| 200 | rgb(255, 214, 167) | ||
| 300 | rgb(258, 184, 106) | ||
| 400 | rgb(258, 137, 4) | ||
| 500 | rgb(260, 105, 42) | ||
| 600 | rgb(245, 73, 39) | ||
| 700 | rgb(202, 53, 25) | ||
| 800 | rgb(159, 45, 1) | ||
| 900 | rgb(126, 42, 12) | ||
| 950 | rgb(68, 19, 6) |
Amber
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(255, 251, 235) | ||
| 100 | rgb(254, 243, 198) | ||
| 200 | rgb(254, 230, 133) | ||
| 300 | rgb(256, 210, 48) | ||
| 400 | rgb(255, 185, 59) | ||
| 500 | rgb(254, 154, 55) | ||
| 600 | rgb(225, 113, 43) | ||
| 700 | rgb(187, 77, 26) | ||
| 800 | rgb(151, 60, 8) | ||
| 900 | rgb(123, 51, 6) | ||
| 950 | rgb(70, 25, 1) |
Yellow
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(254, 252, 232) | ||
| 100 | rgb(254, 249, 194) | ||
| 200 | rgb(255, 240, 133) | ||
| 300 | rgb(256, 223, 32) | ||
| 400 | rgb(253, 199, 69) | ||
| 500 | rgb(240, 177, 59) | ||
| 600 | rgb(208, 135, 46) | ||
| 700 | rgb(166, 95, 27) | ||
| 800 | rgb(137, 75, 10) | ||
| 900 | rgb(115, 62, 10) | ||
| 950 | rgb(67, 32, 4) |
Lime
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(247, 254, 231) | ||
| 100 | rgb(236, 252, 202) | ||
| 200 | rgb(216, 249, 153) | ||
| 300 | rgb(187, 244, 81) | ||
| 400 | rgb(154, 230, 48) | ||
| 500 | rgb(124, 207, 53) | ||
| 600 | rgb(94, 165, 41) | ||
| 700 | rgb(73, 125, 21) | ||
| 800 | rgb(60, 99, 1) | ||
| 900 | rgb(53, 83, 14) | ||
| 950 | rgb(25, 46, 3) |
Green
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(240, 253, 244) | ||
| 100 | rgb(220, 252, 231) | ||
| 200 | rgb(185, 248, 207) | ||
| 300 | rgb(123, 241, 168) | ||
| 400 | rgb(5, 223, 114) | ||
| 500 | rgb(49, 201, 80) | ||
| 600 | rgb(42, 166, 62) | ||
| 700 | rgb(23, 130, 54) | ||
| 800 | rgb(1, 102, 48) | ||
| 900 | rgb(13, 84, 43) | ||
| 950 | rgb(3, 46, 21) |
Emerald
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(236, 253, 245) | ||
| 100 | rgb(208, 250, 229) | ||
| 200 | rgb(164, 244, 207) | ||
| 300 | rgb(94, 233, 181) | ||
| 400 | rgb(49, 212, 146) | ||
| 500 | rgb(55, 188, 125) | ||
| 600 | rgb(45, 153, 102) | ||
| 700 | rgb(31, 122, 85) | ||
| 800 | rgb(17, 96, 69) | ||
| 900 | rgb(3, 79, 59) | ||
| 950 | rgb(1, 44, 34) |
Teal
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(240, 253, 250) | ||
| 100 | rgb(203, 251, 241) | ||
| 200 | rgb(150, 247, 228) | ||
| 300 | rgb(70, 236, 213) | ||
| 400 | rgb(56, 213, 190) | ||
| 500 | rgb(54, 187, 167) | ||
| 600 | rgb(42, 150, 137) | ||
| 700 | rgb(24, 120, 111) | ||
| 800 | rgb(7, 95, 90) | ||
| 900 | rgb(11, 79, 74) | ||
| 950 | rgb(2, 47, 46) |
Cyan
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(236, 254, 255) | ||
| 100 | rgb(206, 250, 254) | ||
| 200 | rgb(162, 244, 253) | ||
| 300 | rgb(83, 234, 253) | ||
| 400 | rgb(66, 211, 242) | ||
| 500 | rgb(59, 184, 219) | ||
| 600 | rgb(44, 146, 184) | ||
| 700 | rgb(26, 117, 149) | ||
| 800 | rgb(1, 95, 120) | ||
| 900 | rgb(16, 78, 100) | ||
| 950 | rgb(5, 51, 69) |
Sky
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(240, 249, 255) | ||
| 100 | rgb(223, 242, 254) | ||
| 200 | rgb(184, 230, 254) | ||
| 300 | rgb(116, 212, 257) | ||
| 400 | rgb(33, 188, 256) | ||
| 500 | rgb(52, 166, 244) | ||
| 600 | rgb(41, 132, 209) | ||
| 700 | rgb(28, 105, 168) | ||
| 800 | rgb(16, 89, 138) | ||
| 900 | rgb(2, 74, 112) | ||
| 950 | rgb(5, 47, 74) |
Blue
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(239, 246, 255) | ||
| 100 | rgb(219, 234, 254) | ||
| 200 | rgb(190, 219, 255) | ||
| 300 | rgb(142, 197, 259) | ||
| 400 | rgb(81, 162, 260) | ||
| 500 | rgb(43, 127, 261) | ||
| 600 | rgb(21, 93, 252) | ||
| 700 | rgb(20, 71, 230) | ||
| 800 | rgb(25, 60, 184) | ||
| 900 | rgb(28, 57, 142) | ||
| 950 | rgb(22, 36, 86) |
Indigo
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(238, 242, 255) | ||
| 100 | rgb(224, 231, 255) | ||
| 200 | rgb(198, 210, 256) | ||
| 300 | rgb(163, 179, 259) | ||
| 400 | rgb(124, 134, 259) | ||
| 500 | rgb(97, 95, 257) | ||
| 600 | rgb(79, 57, 246) | ||
| 700 | rgb(67, 45, 215) | ||
| 800 | rgb(55, 42, 172) | ||
| 900 | rgb(49, 44, 133) | ||
| 950 | rgb(30, 26, 77) |
Violet
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(245, 243, 255) | ||
| 100 | rgb(237, 233, 254) | ||
| 200 | rgb(221, 214, 255) | ||
| 300 | rgb(196, 180, 258) | ||
| 400 | rgb(166, 132, 260) | ||
| 500 | rgb(142, 81, 262) | ||
| 600 | rgb(127, 34, 254) | ||
| 700 | rgb(112, 8, 231) | ||
| 800 | rgb(93, 14, 192) | ||
| 900 | rgb(77, 23, 154) | ||
| 950 | rgb(47, 13, 104) |
Purple
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(250, 245, 255) | ||
| 100 | rgb(243, 232, 255) | ||
| 200 | rgb(233, 212, 256) | ||
| 300 | rgb(218, 178, 259) | ||
| 400 | rgb(194, 122, 262) | ||
| 500 | rgb(173, 70, 262) | ||
| 600 | rgb(152, 16, 250) | ||
| 700 | rgb(130, 7, 219) | ||
| 800 | rgb(110, 17, 176) | ||
| 900 | rgb(89, 22, 139) | ||
| 950 | rgb(60, 3, 102) |
Fuchsia
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(253, 244, 255) | ||
| 100 | rgb(250, 232, 255) | ||
| 200 | rgb(246, 207, 255) | ||
| 300 | rgb(244, 168, 257) | ||
| 400 | rgb(237, 106, 257) | ||
| 500 | rgb(225, 42, 251) | ||
| 600 | rgb(200, 28, 222) | ||
| 700 | rgb(168, 19, 183) | ||
| 800 | rgb(138, 1, 148) | ||
| 900 | rgb(114, 19, 120) | ||
| 950 | rgb(75, 0, 79) |
Pink
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(253, 242, 248) | ||
| 100 | rgb(252, 231, 243) | ||
| 200 | rgb(252, 206, 232) | ||
| 300 | rgb(253, 165, 213) | ||
| 400 | rgb(251, 100, 182) | ||
| 500 | rgb(246, 51, 154) | ||
| 600 | rgb(230, 24, 118) | ||
| 700 | rgb(198, 24, 92) | ||
| 800 | rgb(163, 4, 76) | ||
| 900 | rgb(134, 16, 67) | ||
| 950 | rgb(81, 4, 36) |
Rose
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(255, 241, 242) | ||
| 100 | rgb(255, 228, 230) | ||
| 200 | rgb(255, 204, 211) | ||
| 300 | rgb(259, 161, 173) | ||
| 400 | rgb(259, 99, 126) | ||
| 500 | rgb(256, 32, 86) | ||
| 600 | rgb(236, 37, 63) | ||
| 700 | rgb(199, 29, 54) | ||
| 800 | rgb(165, 12, 54) | ||
| 900 | rgb(139, 8, 54) | ||
| 950 | rgb(77, 2, 24) |
Slate
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(248, 250, 252) | ||
| 100 | rgb(241, 245, 249) | ||
| 200 | rgb(226, 232, 240) | ||
| 300 | rgb(202, 213, 226) | ||
| 400 | rgb(144, 161, 185) | ||
| 500 | rgb(98, 116, 142) | ||
| 600 | rgb(69, 85, 108) | ||
| 700 | rgb(49, 65, 88) | ||
| 800 | rgb(29, 41, 61) | ||
| 900 | rgb(15, 23, 43) | ||
| 950 | rgb(2, 6, 24) |
Gray
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(249, 250, 251) | ||
| 100 | rgb(243, 244, 246) | ||
| 200 | rgb(229, 231, 235) | ||
| 300 | rgb(209, 213, 220) | ||
| 400 | rgb(153, 161, 175) | ||
| 500 | rgb(106, 114, 130) | ||
| 600 | rgb(74, 85, 101) | ||
| 700 | rgb(54, 65, 83) | ||
| 800 | rgb(30, 41, 57) | ||
| 900 | rgb(16, 24, 40) | ||
| 950 | rgb(3, 7, 18) |
Zinc
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(250, 250, 250) | ||
| 100 | rgb(244, 244, 245) | ||
| 200 | rgb(228, 228, 231) | ||
| 300 | rgb(212, 212, 216) | ||
| 400 | rgb(159, 159, 169) | ||
| 500 | rgb(113, 113, 123) | ||
| 600 | rgb(82, 82, 92) | ||
| 700 | rgb(63, 63, 70) | ||
| 800 | rgb(39, 39, 42) | ||
| 900 | rgb(24, 24, 27) | ||
| 950 | rgb(9, 9, 11) |
Neutral
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(250, 250, 250) | ||
| 100 | rgb(245, 245, 245) | ||
| 200 | rgb(229, 229, 229) | ||
| 300 | rgb(212, 212, 212) | ||
| 400 | rgb(161, 161, 161) | ||
| 500 | rgb(115, 115, 115) | ||
| 600 | rgb(82, 82, 82) | ||
| 700 | rgb(64, 64, 64) | ||
| 800 | rgb(38, 38, 38) | ||
| 900 | rgb(23, 23, 23) | ||
| 950 | rgb(10, 10, 10) |
Stone
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| 50 | rgb(250, 250, 249) | ||
| 100 | rgb(245, 245, 244) | ||
| 200 | rgb(231, 229, 228) | ||
| 300 | rgb(214, 211, 209) | ||
| 400 | rgb(166, 160, 155) | ||
| 500 | rgb(121, 113, 107) | ||
| 600 | rgb(87, 83, 77) | ||
| 700 | rgb(68, 64, 59) | ||
| 800 | rgb(41, 37, 36) | ||
| 900 | rgb(28, 25, 23) | ||
| 950 | rgb(12, 10, 9) |
Copy as Tailwind config
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
'primary': '#030712',
'secondary': '#737373',
'accent': '#FFC9C9',
'surface': '#FFFBEB',
'highlight': '#FEFCE8',
}
}
}
}Tailwind's default palette
Tailwind CSS ships a opinionated color system: each hue exposes steps from 50 (lightest) through 950 (darkest). Utility classes like `bg-sky-500` and `text-rose-700` reference these steps.
The chart lists every step with hex values so you can use them outside Tailwind—in design tools, plain CSS, or other frameworks—while keeping the same visual scale.
Reading the scales
Lower numbers are backgrounds and subtle borders; mid numbers are primary UI fills; high numbers are text on light surfaces or deep accents.
Copy the Tailwind config snippet to seed a custom `theme.extend.colors` block, or paste individual hex values into our picker to explore harmonies.