Ex-Kubrick 3: Colour

I’ve chosen two colours to stand out and act the primary basis of the theme:

#ff8000#0080ff

#ff8000 and #0080ff are good strong “wild” colours, but can be used in “mild” ways. They are on opposite sides of the colour wheel and conveniently represent hot and cold colours (useful for links). The bright and unusual combination is eyecatching and works well for branding. Despite these positive factors, a purely two colour theme is hard to manage, so let’s add another colour for highlights:

#80ff00

#80ff00 has the dubious honour of being brighter than either of the two previous colours, ruling it out for text, and limiting it to small appearances such as bullets or decorative bits. What’s a designer to do with such a crazy palette? First, let’s see how they play together:

Colour BlockColour Block BlurColour Block Gradient

Each of these images show a different way the colours blend with each other and black and white.

  • The first picture shows how the colours appear directly next to each other with no blending. We can see how the colours lose their power when placed directly next to each other. In the context of such extreme brightness, they don’t stand out.
  • The second, how they look when blended into each other by blurring, giving us a look of the colours relative to each other. Green seems to stand out the most, orange the least. We also start to see some nasty brown residue when the complementary orange and blue are blended.
  • The third, how they look when blended into each other by gradient. The brown is exaggerated here and we can see how the green seems brighter as it travels further into the white and black.

Thus we need something to act as a neutral buffer in places where white would be too bland but the solid colours wouldn’t work:

#ccddee

#ccddee’s works as a buffer and cover colour. We can stick it between the orange and blue to keep the nasty brown away and to make sure the green doesn’t get out of hand. It can be used as a replacement for plain white and unlike our other colours pushes the design back towards the “mild” side. Let’s make some more comparison images to see how they colours all look together:

Colour Block Blur with #ccddeeColour Block Gradient with #ccddee

Looks good. With these building blocks in hand, we can start working on the layout in the next installment.

Pages: 1 2

2 Responses to “Ex-Kubrick 3: Colour”

  1. Berta »

    I tend to be a neutral sort of person myself, but I like how those colors go together.

    Have you studied color theory, or do you just pick up inspirations from certain places?

  2. LittleZephyr »

    Experimentation mostly, although I’ve read a whole bunch of various stuff on color theory.

    My first contact with digital art was colouring other people’s sketches, and that’s when I discovered how colours work with each other. It comes in handy for webpage design…

Leave a Comment

You must be logged in to post a comment.