Color collection
Documentation Website Palettes
Readable documentation palettes for API docs, developer portals, guides, and long-form technical content.
#318DD8Accent#C951D6Surface#EBEFF4Text#121921Support#CE82ACDocumentation Website 7Docs / Developer / MinimalQuality 98Primary#315ED8Accent#D6B351Surface#EBEDF4Text#121521Support#CE8296Documentation Website 10Docs / Developer / MinimalQuality 96Primary#9231D8Accent#D6B751Surface#F2EBF4Text#1C1221Support#CEAF82Documentation Website 1Docs / Developer / MinimalQuality 95Primary#31D837Accent#D651D2Surface#EBF4EDText#122114Support#8582CEDocumentation Website 2Docs / Developer / MinimalQuality 95Primary#31D866Accent#51D2D6Surface#EBF4EFText#122118Support#9A82CEDocumentation Website 8Docs / Developer / MinimalQuality 95Primary#3431D8Accent#D65168Surface#EDEBF4Text#141221Support#CE8382How to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for API docs, knowledge bases, developer portals, and technical guides. Optimize for long reading sessions with restrained surfaces and clear code block contrast.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #318DD8;
--accent: #C951D6;
--surface: #EBEFF4;
--text: #121921;
--support: #CE82AC;
}FAQ
Where should I use documentation website palettes?
These palettes are designed for API docs, knowledge bases, developer portals, and technical guides.
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?
Optimize for long reading sessions with restrained surfaces and clear code block contrast.