Color collection
Developer Docs Color Palettes
Technical developer docs palettes for SDK pages, API references, CLI guides, and code-heavy interfaces.
#3169D8Accent#D68751Surface#EBEDF4Text#121621Support#CE829CDeveloper Docs 12Developer / Docs / TechnicalQuality 97Primary#3198D8Accent#D68451Surface#EBF0F4Text#121A21Support#CE82B1Developer Docs 14Developer / Docs / TechnicalQuality 96Primary#313AD8Accent#D6C551Surface#ECEBF4Text#131221Support#CE8286Developer Docs 16Developer / Docs / TechnicalQuality 96Primary#8731D8Accent#6CD651Surface#F1EBF4Text#1B1221Support#CEAA82Developer Docs 1Developer / Docs / TechnicalQuality 95Primary#D85E31Accent#D6BC51Surface#F4EFEBText#211712Support#82CE96Developer Docs 7Developer / Docs / TechnicalQuality 95Primary#37D831Accent#5187D6Surface#EBF4ECText#122113Support#8285CEHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for developer docs, SDK pages, CLI guides, and API references. Make code blocks and inline tokens distinct without pushing the whole page into dark mode.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #3169D8;
--accent: #D68751;
--surface: #EBEDF4;
--text: #121621;
--support: #CE829C;
}FAQ
Where should I use developer docs color palettes?
These palettes are designed for developer docs, SDK pages, CLI guides, and API references.
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?
Make code blocks and inline tokens distinct without pushing the whole page into dark mode.