IXD 301 – Portfolio Colour Pallet

Colour Pallet

I already knew what 2 primary colours I wanted for the portfolio, this being black and white. Although I wanted a 3rd colour to use for buttons and for when the user hovered over the navigation buttons. I would need a colour that complimented the black background I was going to use.


To find a colour to compliment black and white, I would have to do some research.

The most important one was colour contrast and the visibility of colours when placed on each other. Yellow and Orange both worked really well with black, the black worked well on orange and yellow. The other colours did not work as well with black, Red worked but the synergy between it and Black was not as noticeable or impactful as Yellow or Orange. This narrowed it down to both Yellow and Orange, although the contrast sheet did prove useful incase I choose to remove the black background.

Now Yellow on black is a great combo, but people normally associate yellow and black with the chevrons and safety tape seen as warning symbols.

Although even the darker shades of yellow still work well, provided you don’t go too dark.

This leaves Orange, a colour that is deep and vibrant to me. Orange is one of my favourite colours and it contrasts extremely well with blacks and whites. The colour combo has seen itself used to create logos in real life and in fiction, the most recent implementation I’ve seen of this colour scheme was during my recent playthrough of the Mass Effect trilogy that had been remastered for the Legendary Edition which came out earlier this year. The in game faction Cerberus which is an evil human-survivalist paramilitary group. Who play as unlikely protagonists in Mass Effect 2 and them one of the antagonists in Mass Effect 3. Their colour scheme is uses Black, off-White and Orange.

The colours together create a very sleak and modern style.


Another franchise that uses this colour scheme is the well known Call of Duty series, more specifially the Black Ops series from BO2 all the way up to BO4. The 3 colours all contrast each other extremely well, and the Orange adds a nice break into the Black and White. One thing to notice is the Orange used in the Black Ops logo is a more darker and vivid Orange, this much darker colour is something I might look at for my portfolio site.

Seeing the white text upon the black background with the orange provides a good insight into how the colours would actually work in my portfolio site.

The black and orange their own create a fantastic contrast.

Looking at the different shades of orange we can search for one that looks the nicest.

Out of the entire shade sheet, these rows are my favourite, as I don’t want the orange to be too pale or too dark. Keeping it a neutral orange will keep the contrast, therefore keeping the synergy between the 3 colours. If the orange becomes too pale it’ll become too close to the white and vice versa with the black.

The next step will be to find a typeface that will compliment the colours. Going for the style of modern, I will most likely use a font similar to Helvetica but possibly more thinner…

Leave a Reply

Your email address will not be published.