Color collection
Portfolio Color Palettes
Portfolio palettes for designers, developers, photographers, and personal brand websites.
#318AD8Accent#D66C51Surface#EBEFF4Text#121921Support#CE82ABPortfolio 14Portfolio / Pastel / MinimalQuality 98Primary#315BD8Accent#D6AA51Surface#EBECF4Text#121521Support#CE8295Portfolio 1Portfolio / Pastel / MinimalQuality 95Primary#D83C31Accent#D6A151Surface#F4EDEBText#211412Support#82CE87Portfolio 2Portfolio / Pastel / MinimalQuality 95Primary#D86C31Accent#CDD651Surface#F4F0EBText#211812Support#82CE9DPortfolio 8Portfolio / Pastel / MinimalQuality 95Primary#31D83AAccent#5163D6Surface#EBF4EDText#122114Support#8682CEPortfolio 9Portfolio / Pastel / MinimalQuality 95Primary#31D869Accent#7E51D6Surface#EBF4EFText#122118Support#9C82CEHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for designer portfolios, developer pages, and personal brand sites. Use fewer colors and let typography, spacing, and one accent define the identity.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #318AD8;
--accent: #D66C51;
--surface: #EBEFF4;
--text: #121921;
--support: #CE82AB;
}FAQ
Where should I use portfolio color palettes?
These palettes are designed for designer portfolios, developer pages, and personal brand sites.
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?
Use fewer colors and let typography, spacing, and one accent define the identity.