How Should You Choose Colors for a Portfolio Website? | Choosing Colors That Highlight Your Work
The work itself should take center stage on a portfolio website. When colorful illustrations, simple logos, and website screenshots appear together, the surrounding background can affect how each project looks. To preserve the character of the work while making project details and contact information easy to find, separate the colors of the artwork from the colors used for navigation and actions.
Compare light and dark backgrounds with several actual projects
Start by placing four to six projects side by side. Logos and app screens with generous white margins may lose their edges against a pure-white background. Conversely, dark photographs or designs built around black can blend into a dark page. Look at both light and dark examples before choosing a shared background for the project gallery.
If your portfolio contains work in many colors, a background close to white or gray with low saturation can help the projects avoid competing with an additional vivid site color. Saturation means how vivid or muted a color appears. Use consistent spacing and card shapes around thumbnails (the small preview images in a project list), adding a visible border when the image edges would otherwise be unclear.
You do not need to apply one colored filter to every piece simply to make the gallery look uniform. When showing logos or interface designs, keep their original colors intact and adjust the surfaces around them instead. That helps preserve the visual information viewers are meant to evaluate.
A palette for the project gallery, case studies, and contact section
Here is an example for a portfolio featuring illustrations, logos, and website projects. HEX codes are hexadecimal values used to specify colors on the web.
- Project-gallery background: very pale neutral gray #F7F7F4. Use it across the gallery as a quiet foundation for work with different color palettes.
- Thumbnail cards: white #FFFFFF. The contrast with the pale gray background #F7F7F4 is only about 1.07:1, so do not rely on this slight color difference alone to define the cards.
- Card borders: blue-gray #76828A. Its contrast ratio is about 3.94:1 against white #FFFFFF and 3.67:1 against the pale gray background #F7F7F4.
- Project names, dates, and your role: dark charcoal #283238. It contrasts at about 13.10:1 on white #FFFFFF and 12.20:1 on pale gray #F7F7F4.
- Case-study information panels: pale gray-green #EDF1F0. Dark charcoal #283238 body text on this surface reaches about 11.50:1.
- Headings and text links: deep blue #24586B. Its contrast ratio is about 7.83:1 on white #FFFFFF and 6.87:1 on the gray-green information panels #EDF1F0. Underline links as an additional cue.
- “Discuss a Project” button: a deep blue #24586B background with white #FFFFFF text. The contrast ratio is about 7.83:1. Reserve this stronger interface color for contact actions and other primary navigation needs rather than competing with the work itself.
With low-saturation surfaces and dark text providing the structure, deep blue can serve consistently across navigation and key actions. Even if every project uses a different palette, visitors can still recognize where to read about the work and where to take the next step.
Adjust individual project backgrounds and check mobile layouts
For a particular project with few dark areas, you could try deep charcoal #232B31 as the background of just one detail section. Pale gray #F7F7F4 explanatory text on that solid background has a contrast ratio of about 13.39:1. Check the actual images, however, to make sure dark elements do not disappear into the surrounding surface.
Putting a title directly over artwork can make its visibility change across bright and dark areas of the image. Place project names, your responsibilities, and the design rationale outside the image on a solid-color area. On a phone, check that thumbnail cropping does not remove important content. Identify actions such as “View Project” with words and underlines rather than color alone.
Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal-sized text requires at least 4.5:1 contrast against its background, and large text requires at least 3:1. Borders and other essential non-text elements needed to identify controls or understand information must contrast with adjacent colors by at least 3:1. The ratios above are calculated for the specific color combinations shown. If you change the images or background colors, check the text and boundaries in their actual context again.