Created at 06/26/2025 08:36
Visual Debug Web Toolkit
- Breakpoint Yellow#fde047
- Inspect Cyan#22d3ee
- Node Gray#6b7280
- DevGrid White#f9fafb
- Runtime Plum#c084fc
- Panel Charcoal#111827
- Flag Red#f43f5e
The palette consists of Light, Dark colors. Accent colors Breakpoint Yellow #fde047 and Runtime Plum #c084fc. Palette has Warm, Cool, Neutral colors temperature.
By lightness, this palette runs from #111827 (darkest) to #F9FAFB (lightest). The lightness range is wide.
Overall saturation feels vivid (higher chroma).
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): #111827, #22D3EE, #6B7280, #C084FC, #F43F5E, #F9FAFB, #FDE047
Palette Visual Debug Web Toolkit has combination of 7 codes colors:
HEX: #fde047, RGB: (253, 224, 71); HEX: #22d3ee, RGB: (34, 211, 238); HEX: #6b7280, RGB: (107, 114, 128)
HEX: #f9fafb, RGB: (249, 250, 251); HEX: #c084fc, RGB: (192, 132, 252); HEX: #111827, RGB: (17, 24, 39)
HEX: #f43f5e, RGB: (244, 63, 94)
Simplified version of palette colors
Shade of gold, Shade of darkturquoise, Tint of slategrey, Shade of whitesmoke, Tint of violet, Shade of Black, Tint of indianred
Color scheme was created by colorday
Colors codes in palette
Visual Debug Web Toolkit color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #fde047 | #fde047 | RGB(253, 224, 71) | Breakpoint Yellow | — |
| #22d3ee | #22d3ee | RGB(34, 211, 238) | Inspect Cyan | — |
| #6b7280 | #6b7280 | RGB(107, 114, 128) | Node Gray | — |
| #f9fafb | #f9fafb | RGB(249, 250, 251) | DevGrid White | — |
| #c084fc | #c084fc | RGB(192, 132, 252) | Runtime Plum | — |
| #111827 | #111827 | RGB(17, 24, 39) | Panel Charcoal | — |
| #f43f5e | #f43f5e | RGB(244, 63, 94) | Flag Red | — |
Color Palette Contrast
7 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#fde047 | #22d3ee | 1.37 |
#fde047 | #f9fafb | 1.26 |
#22d3ee | #f9fafb | 1.72 |
#22d3ee | #c084fc | 1.46 |
#6b7280 | #c084fc | 1.82 |
#6b7280 | #f43f5e | 1.31 |
Image palette Visual Debug Web Toolkit png
Export Palette
Download the "Visual Debug Web Toolkit" in multiple formats for seamless integration into your design projects.
Available formats: