Color collection
Developer Tool Color Palettes
Developer tool palettes for code editors, docs, observability products, and technical SaaS.
#317CD8Accent#D6C051Surface#EBEEF4Text#121821Support#CE82A4Developer Tool 17Developer / Dark UI / TechnicalQuality 97Primary#314DD8Accent#D6C051Surface#EBECF4Text#121421Support#CE828FDeveloper Tool 2Developer / Dark UI / TechnicalQuality 95Primary#D83177Accent#D67951Surface#F4EBEEText#211217Support#A2CE82Developer Tool 3Developer / Dark UI / TechnicalQuality 95Primary#D83148Accent#D6B751Surface#F4EBEBText#211213Support#8CCE82Developer Tool 4Developer / Dark UI / TechnicalQuality 95Primary#D84A31Accent#B7D651Surface#F4EEEBText#211512Support#82CE8EDeveloper Tool 11Developer / Dark UI / TechnicalQuality 95Primary#31D848Accent#D651C5Surface#EBF4EEText#122115Support#8C82CEHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for developer products, docs, logs, and observability tools. Respect long reading sessions with restrained contrast and clear semantic colors.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #317CD8;
--accent: #D6C051;
--surface: #EBEEF4;
--text: #121821;
--support: #CE82A4;
}FAQ
Where should I use developer tool color palettes?
These palettes are designed for developer products, docs, logs, and observability tools.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Respect long reading sessions with restrained contrast and clear semantic colors.