Loading...
Created at 02/05/2023 02:51
TailwindCSS
- #000000
- #64748b
- #6b7280
- #0b1120
- #7c3aed
- #7dd3fc
- #818cf8
- #0d9488
- #0ea5e9
- #93c5fd
- #94a3b8
- #0f172a
- #9ca3af
- #a5f3fc
- #111827
- #bfdbfe
- #cbd5e1
- #1e293b
- #0f172a
- #475569
The palette consists of Dark, Light, Semi dark colors. Accent colors Black #000000 and #bfdbfe. Palette has Neutral, Cool colors temperature.
By lightness, this palette runs from #000000 (darkest) to #BFDBFE (lightest). The lightness range is wide.
Saturation is mixed — some muted swatches and some vivid accents.
Hues sit in a neighboring band on the wheel (loose heuristic).
Overall temperature among swatches leans cool.
HEX codes (sorted): #000000, #0B1120, #0D9488, #0EA5E9, #0F172A, #111827, #1E293B, #475569, #64748B, #6B7280, #7C3AED, #7DD3FC, #818CF8, #93C5FD, #94A3B8, #9CA3AF, #A5F3FC, #BFDBFE, #CBD5E1
Palette TailwindCSS has combination of 20 codes colors:
HEX: #000000, RGB: (0, 0, 0); HEX: #64748b, RGB: (100, 116, 139); HEX: #6b7280, RGB: (107, 114, 128)
HEX: #0b1120, RGB: (11, 17, 32); HEX: #7c3aed, RGB: (124, 58, 237); HEX: #7dd3fc, RGB: (125, 211, 252)
HEX: #818cf8, RGB: (129, 140, 248); HEX: #0d9488, RGB: (13, 148, 136); HEX: #0ea5e9, RGB: (14, 165, 233)
HEX: #93c5fd, RGB: (147, 197, 253); HEX: #94a3b8, RGB: (148, 163, 184); HEX: #0f172a, RGB: (15, 23, 42)
HEX: #9ca3af, RGB: (156, 163, 175); HEX: #a5f3fc, RGB: (165, 243, 252); HEX: #111827, RGB: (17, 24, 39)
HEX: #bfdbfe, RGB: (191, 219, 254); HEX: #cbd5e1, RGB: (203, 213, 225); HEX: #1e293b, RGB: (30, 41, 59)
HEX: #0f172a, RGB: (15, 23, 42); HEX: #475569, RGB: (71, 85, 105)
Simplified version of palette colors
Black, Tint of slategrey, Tint of slategrey, Shade of Black, Shade of blueviolet, Shade of lightskyblue, Shade of cornflowerblue, Shade of darkcyan, Tint of deepskyblue, Tint of lightskyblue, Shade of lightslategrey, Shade of Black, Tint of darkgrey, Shade of paleturquoise, Shade of Black, Shade of lightsteelblue, Shade of lightgrey, Shade of midnightblue, Shade of Black, Shade of darkslateblue
Color scheme was created by HelloMikko
Colors codes in palette
TailwindCSS color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #000000 | #000000 | RGB(0, 0, 0) | — | Black |
| #64748b | #64748b | RGB(100, 116, 139) | — | — |
| #6b7280 | #6b7280 | RGB(107, 114, 128) | — | — |
| #0b1120 | #0b1120 | RGB(11, 17, 32) | — | — |
| #7c3aed | #7c3aed | RGB(124, 58, 237) | — | — |
| #7dd3fc | #7dd3fc | RGB(125, 211, 252) | — | — |
| #818cf8 | #818cf8 | RGB(129, 140, 248) | — | — |
| #0d9488 | #0d9488 | RGB(13, 148, 136) | — | — |
| #0ea5e9 | #0ea5e9 | RGB(14, 165, 233) | — | — |
| #93c5fd | #93c5fd | RGB(147, 197, 253) | — | — |
| #94a3b8 | #94a3b8 | RGB(148, 163, 184) | — | — |
| #0f172a | #0f172a | RGB(15, 23, 42) | — | — |
| #9ca3af | #9ca3af | RGB(156, 163, 175) | — | — |
| #a5f3fc | #a5f3fc | RGB(165, 243, 252) | — | — |
| #111827 | #111827 | RGB(17, 24, 39) | — | — |
| #bfdbfe | #bfdbfe | RGB(191, 219, 254) | — | — |
| #cbd5e1 | #cbd5e1 | RGB(203, 213, 225) | — | — |
| #1e293b | #1e293b | RGB(30, 41, 59) | — | — |
| #0f172a | #0f172a | RGB(15, 23, 42) | — | — |
| #475569 | #475569 | RGB(71, 85, 105) | — | — |
Color Palette Contrast
68 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#000000 | #0b1120 | 1.11 |
#000000 | #0f172a | 1.17 |
#000000 | #111827 | 1.18 |
#000000 | #1e293b | 1.43 |
#000000 | #0f172a | 1.17 |
#64748b | #6b7280 | 1.01 |
Image palette TailwindCSS png
Export Palette
Download the "TailwindCSS" in multiple formats for seamless integration into your design projects.
Available formats: