Your portfolio is a product pitch where YOU are the product. The palette needs to be memorable enough to stand out in a recruiter's tab bar but readable enough that they actually read your case studies.
Most developers either pick colors by instinct (and end up with something generic) or go full dark-mode hacker aesthetic (and blend in with every other portfolio they've seen). Both miss the point: your palette signals something before anyone reads a word.
Here are 3 palette directions built specifically for developer portfolios, each with a different persona signal and complete CSS variables ready to paste.
Generate your portfolio palette at sixtythirtyten.co →
Direction A: Minimal / Professional
Positioning: Signals competence without trying to signal creativity. Lets your work speak.
| Role | Hex | HSL |
|------|-----|-----|
| Dominant (60%) | #fafafa | 0 0% 98% |
| Secondary (30%) | #18181b | 240 4% 10% |
| Accent (10%) | #6366f1 | 239 84% 67% |
:root {
--color-dominant: #fafafa; /* light neutral page background */
--color-secondary: #18181b; /* near-black for nav, headers, code blocks */
--color-accent: #6366f1; /* indigo for links, CTAs, active states */
}
The near-black secondary on a white dominant gives crisp contrast that reads cleanly in both dark office lighting and bright displays. Indigo as the accent sits in the same color family as blue (safe, technical) but has enough personality to distinguish you from the default Tailwind blue everyone else ships.
Fits: Senior roles, companies with design-conscious hiring managers, any stack. If you're applying to Stripe, Linear, or Vercel — use this one.
Direction B: Bold / Standout
Positioning: Dark background says "I care about aesthetics." The accent on your name and CTAs creates visual memory.
| Role | Hex | HSL |
|------|-----|-----|
| Dominant (60%) | #0a0a0a | 0 0% 4% |
| Secondary (30%) | #e5e5e5 | 0 0% 90% |
| Accent (10%) | #22d3ee | 188 91% 53% |
:root {
--color-dominant: #0a0a0a; /* near-black for full dark surface */
--color-secondary: #e5e5e5; /* light gray for text, card borders */
--color-accent: #22d3ee; /* cyan for your name, links, CTAs */
}
The dark background with cyan accent is a deliberate pattern — it appears in tools developers actually use (Vercel, Supabase, GitHub's dark theme). Seeing it in a portfolio signals you build things at that quality level. The secondary is warm gray rather than white, which keeps the palette from looking like a vscode color theme.
Fits: Front-end engineers, design engineers, creative devs applying for product roles. If your portfolio IS the portfolio (not just a resume with a website), this direction gets remembered.
Direction C: Warm / Approachable
Positioning: Warm tones feel approachable — important if your portfolio is also a sales page for freelance clients.
| Role | Hex | HSL |
|------|-----|-----|
| Dominant (60%) | #fffbeb | 48 100% 96% |
| Secondary (30%) | #292524 | 20 5% 16% |
| Accent (10%) | #f97316 | 24 95% 53% |
:root {
--color-dominant: #fffbeb; /* warm cream for page background */
--color-secondary: #292524; /* warm near-black for text, nav */
--color-accent: #f97316; /* orange for CTAs and highlight elements */
}
Warm cream dominant instead of pure white reads friendlier on long scrolls — it reduces eye strain and gives the page a non-generic feel. The orange accent is high-energy but not alarming. Pair it with a serif heading font and this palette says "I ship production code and I can communicate with clients."
Fits: Freelancers, consultants, full-stack devs with client-facing work. If your portfolio ends with a "Hire me" or "Work with me" CTA, this direction converts better than the minimal or bold options.
Which direction fits your context
| If you're... | Use direction | |--------------|--------------| | Applying to product companies, senior IC roles | A (Minimal) | | Showcasing visual/interactive work, design engineering | B (Bold) | | Freelancing, consulting, looking for client work | C (Warm) | | Unsure — default safe choice | A (Minimal) |
One note on dark mode: if you implement a dark mode toggle, Direction A is the easiest to flip (neutral palette with clear contrast hierarchy). Direction B is already dark — you'd need to decide whether your toggle inverts it or removes it. Direction C inverts naturally: warm cream becomes warm near-black, and orange still reads on dark.
Wiring it up
If you're using plain CSS:
:root {
--color-dominant: #fafafa;
--color-secondary: #18181b;
--color-accent: #6366f1;
}
body {
background-color: var(--color-dominant);
color: var(--color-secondary);
}
a, button.primary {
color: var(--color-accent);
}
If you're on Tailwind v4, register the tokens in your CSS file:
@theme {
--color-dominant: #fafafa;
--color-secondary: #18181b;
--color-accent: #6366f1;
}
Then use bg-dominant, text-secondary, bg-accent as utility classes across your layout. Your nav, hero, project cards, and CTA buttons all draw from the same three values.
Start with your brand color
If you already have a color you associate with your work — a hex code you've used before, a color from a logo or icon — enter it at sixtythirtyten.co. The generator fills in all three roles automatically, with the CSS variables and Tailwind config already written.
Generate your portfolio palette at sixtythirtyten.co →
Related guides
- 60-30-10 Hex Color Palette Examples — more palette starting points if you want to try different base colors
- CSS Variables Color System Cheat Sheet — the full
:rootblock setup with dark mode override - 60-30-10 Dark Mode Color Palette — how to implement a dark mode toggle for Direction A or C
- shadcn/ui Color System — if you're building your portfolio with shadcn/ui components
- The 60-30-10 Rule: A Developer's Guide to UI Color Balance — the full breakdown of the 60-30-10 rule and how to apply it in code