Palette collection

Portfolio Website Color Palettes

A portfolio palette should frame your work, not fight it. Favor a neutral canvas, strong readable ink, and one personal accent that becomes your signature.

Best for: designers, developers, photographers, and studios.

Tip: click any HEX code below to copy it. For full editing, contrast checks, and CSS/Tailwind export, open any palette in the generator.

Studio Mono — Bold accent on mono
#FFFFFF#F2F2F2#9A9A9A#111111#FF5436
Architect — Quiet teal
#FAFAF8#ECEAE3#A39E92#1C1B17#0F766E
Night Folio — Dark portfolio
#0B0B0F#15151C#2A2A36#E8E8EF#A78BFA
Editorial — Magazine feel
#FFFDF8#F1ECE0#B7AE9A#211E18#C2410C
Cobalt Folio — Crisp cobalt
#FFFFFF#F1F4FA#8893AE#0E1626#2563EB
Warm Studio — Warm + rose
#FFFEFB#F6EFE6#B6A88F#23201A#E11D48
Mint Maker — Fresh mint
#FFFFFF#F0F6F3#93A79E#0F1A16#10B981
Slate Pro — Slate + amber
#FBFCFD#EEF1F4#8A95A1#0F172A#F59E0B
Violet Ink — Creative violet
#FFFFFF#F4F2FA#9B95B4#14122A#7C3AED
Forest Folio — Calm forest
#FBFCFA#EBF0E9#9DB09B#12211A#15803D
Carbon Coral — Dark + coral
#0D0D0D#1A1A1A#2E2E2E#F2F2F2#FB7185
Sand Maker — Sand + sky
#FFFDF9#F3EBDD#C2B49A#2A2419#0EA5E9

How to use these palettes

Start with the darkest value as text or ink, the lightest as your background, and reserve the most saturated color for primary actions. Always confirm text contrast meets at least 4.5:1 for body copy with the contrast checker before shipping.

Frequently asked questions

Can I use these palettes commercially?

Yes. Copy and use any palette here in personal, educational, or commercial work without attribution.

How do I export these to CSS or Tailwind?

Open a palette in the generator and use the Export panel to copy CSS variables, a Tailwind color object, or JSON.

Are these palettes accessible?

They are designed with readable pairings, but always verify your specific text-on-background combination with the contrast checker for your exact use case.