Loading...
Created at 07/11/2025 09:40
React Component Library Dark Mode
- React Base Black#0f1115
- Props Purple#8e7cc3
- State Active Cyan#00cfc1
- Focus Ring Yellow#ffda3d
- Shadow UI Grey#b5b5b5
- Card Border White#f4f4f4
The palette consists of Dark, Light colors. Accent colors State Active Cyan #00cfc1 and Focus Ring Yellow #ffda3d. Palette has Neutral, Cool, Warm colors temperature.
By lightness, this palette runs from #0F1115 (darkest) to #F4F4F4 (lightest). The lightness range is wide.
Saturation is mixed — some muted swatches and some vivid accents.
Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).
Overall temperature among swatches leans cool.
HEX codes (sorted): #00CFC1, #0F1115, #8E7CC3, #B5B5B5, #F4F4F4, #FFDA3D
Palette React Component Library Dark Mode has combination of 6 codes colors:
HEX: #0f1115, RGB: (15, 17, 21); HEX: #8e7cc3, RGB: (142, 124, 195); HEX: #00cfc1, RGB: (0, 207, 193)
HEX: #ffda3d, RGB: (255, 218, 61); HEX: #b5b5b5, RGB: (181, 181, 181); HEX: #f4f4f4, RGB: (244, 244, 244)
Simplified version of palette colors
Shade of Black, Shade of mediumpurple, Tint of mediumturquoise, Shade of gold, Tint of Silver, Tint of whitesmoke
Color scheme was created by bad_colors
Colors codes in palette
React Component Library Dark Mode color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #0f1115 | #0f1115 | RGB(15, 17, 21) | React Base Black | — |
| #8e7cc3 | #8e7cc3 | RGB(142, 124, 195) | Props Purple | — |
| #00cfc1 | #00cfc1 | RGB(0, 207, 193) | State Active Cyan | — |
| #ffda3d | #ffda3d | RGB(255, 218, 61) | Focus Ring Yellow | — |
| #b5b5b5 | #b5b5b5 | RGB(181, 181, 181) | Shadow UI Grey | Brainstem Grey |
| #f4f4f4 | #f4f4f4 | RGB(244, 244, 244) | Card Border White | — |
Color Palette Contrast
8 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#8e7cc3 | #00cfc1 | 1.83 |
#8e7cc3 | #b5b5b5 | 1.75 |
#00cfc1 | #ffda3d | 1.43 |
#00cfc1 | #b5b5b5 | 1.04 |
#00cfc1 | #f4f4f4 | 1.78 |
#ffda3d | #b5b5b5 | 1.49 |
Image palette React Component Library Dark Mode png
Export Palette
Download the "React Component Library Dark Mode" in multiple formats for seamless integration into your design projects.
Available formats: