Principles of Design #6 - Colour Theory, The basics

Right I could wax long an lyrical about colours and how to use them, which I have to say probably sounds odd coming from me given that I am nearly colour blind. However I have been colour blind all my life and to me the sky is blue and grass green because that is what we are taught from when we are small.

Colour is very hard to describe to someone else without using the word "like" in fact most colour names are based around a descriptor that carries with it the meaning of the colour being expressed..

For example "Cornflower Blue" should make you think of the colour of Cornflowers like the one on the left or of a room that was painted with cornflower blue paint. There is no such thing as normal colour vision, we all each and every one bring our own baggage to this quick wander down the garden path of colour theory.



Colour Theory is a BIG topic so I will only be looking at 3 specific areas in this post, areas that any web or app designer needs to have a firm grasp of if they are to produce finished code and colour schemes that are beautiful, pleasing and work within the context of the app you are developing. These topics are .

1. The Colour Wheel
2. Colour Harmony
3. Colour Context

The Colour Wheel

 The colour wheel is one of those things I never see on a geek developers table or in their favourites and yet it is a tool that artists and graphic designers use daily!. Go to any art store and pick one up they will know exactly what you want is you ask for "A Colour Wheel". Alternately you can use one of the many online colour wheels .. this is one I use a lot and can recommend.
http://colorschemedesigner.com/

Color wheels are arranged so that the colours move from red at the top around the rainbow until you come again to the blues and violets at 11pm ish. You will notice that the wheel on http://colorschemedesigner.com has the words WARM and COLD at 1 and 7 o'clock. this does not mean that just the colors at these "times" are Warm or Cold but there is a transition going on from the reds,oranges and yellows which are the colours of fire, embers and the sun convey warmth where greens, turquoises and blues are the colours of grass and water traditionally cool things. But be careful it is transitional and you move from warmer to cooler in gradual steps in each colour.

 

A color circle, based on red, yellow and blue, is traditional in the field of artists however Sir Isaac Newton was the chap that developed the first circular diagram of colors we know of in 1666. Since then, scientists and artists have studied and designed numerous variations of this concept. Differences of opinion about the validity of one format over another continue to provoke debate. In reality, any color circle or color wheel which presents a logically arranged sequence of pure hues has merit.

Primary Colours: Red, yellow and blue
In traditional colour theory (used in paint and pigments), primary colour are the 3 pigment colours that can not be mixed or formed by any combination of other colours. All other colours are derived from these 3 hues.  When you mix these 3 colours you get the Secondary Colours Green, orange and purple. If you start mixing primary and secondary you get the Tertiary Colours Yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green etc. and so on. gradually as you mix the colours you get the wheel you can see at http://colorschemedesigner.com.



OK I got that colours are colours and they are can be placed on a wheel so how does that help me and why should I use a wheel at all?

Good Question - this is where the next topic comes in

Colour Harmony

In visual experiences, harmony is something that is pleasing to the eye. It engages the viewer and it creates an inner sense of order or a balance in the visual experience. When something is not harmonious, it's either boring or chaotic. At one extreme is a visual experience that is so bland that the viewer is not engaged. The human brain will reject under-stimulating information. At the other extreme is a visual experience that is so overdone, so chaotic that the viewer can't stand to look at it. The human brain rejects what it can not organize because it cannot understand it.. Creating harmony is the task designers need to get right as it delivers visual interest and a sense of order.

The Schemes!
Look again at the colour wheel

The very slime outer ring comprise the primary colors, the inner rings the secondary, terteriary and so on so how do we combine these into a scheme? Well look at the top of the site you will see what at first glance look like odd shaped buttons.

these are the 6 types of standard colour schemes that for want of a better word "work". Look at the one I have highlighted called ANALOGIC, note the 3 dark segments at the top of the circle, these represent colours that are close together on the wheel. If a colour is beside another other colour it is called Analogous (or Analogic) you see this quite a lot in nature and the human brain really quite likes it and accepts it readily and this is perhaps the easiest colour scheme to get right.

If two colours are opposite one another on the wheel they are deemed to be Complimentary and this is another of the scheme names. If you select the Complimentary button on the http://colorschemedesigner.com site you will see this.

Note the appearance of two dots one at 12 o'clock the other at 6, these are the complimentary colours if you drag the dark 12 o'clock dot around the circle the corresponding opposite dot moves with it and the colour scheme displayed on the right of the screen displays a palate of colours that work well together. Note that as you move the dot the palate colours on the left never clash, are never discordant, they "work" - and there-in lies the beauty of the colour wheel!

There are 6 schemes in total and you can explore them at your leisure however I will mention one more the Triadic which combines 3 colours on the wheel in a triangle shape. This can be hard to get right if you do not use a colour wheel!

as you can see you get the dark dot at the top, which you can move around clock wise and anti-clockwise, the two white dots at the bottom form a triangle and these can be dragged as well.. however they broaden or narrow the base of the triangle.Once again the wheel can be used to get colour schemes that work, although some may be a tad garish.. so use with caution!

you will notice that the center of the circle is the colour under the dark dot, this colour will be the one you select as the main colour of your scheme, the others will be secondary to it. hence the larger area of that colour on the right hand palate pane.

Context

How colour behaves in relation to other colors and shapes is a complex area of color theory. Compare the contrast effects of different color backgrounds for the same red square

For most people with normal or nearly normal color vision red appears more brilliant against a black background and somewhat duller against the white background. In contrast with orange, the red appears lifeless; in contrast with blue-green, it exhibits brilliance. Also notice that the red square appears larger on black than on other background colors, this is context! Always try colour swatches of your colour scheme like this to see if they 'work' the way you expect them to and deliver the sort of balance and emphasis that you want to convey.

This is also where I have a problem and http://colorschemedesigner comes to the rescue again notice a the top right there is an option for..... Colour Blind

 Have a look at your color scheme when you apply the different types of colour blindness filters and note how the tonal values change use these options in combination with the preview buttons at the bottom to see how others will see your colour scheme always remember that how you see the context of your scheme is not how others will if they have colour blindness of if there monitor is configured differently from yours. (I am Tritanopy Colour blind have a go and welcome to my world ;-) )

Next post we will go a bit deeper into the world of color and look at hue, luminance and tone

Coping with Windows update 2661254 SSL FIx on a self certed domino server

Well well well, that was an interesting couple of days!
Microsoft in their infinite wisdom decided to release a fix that stops Internet Explorer (a pox on it) accessing any SSL site that has a <=512bit certificate.

Here is a link to the MS document

Now there are very good, sound and security related reasons for MS to do this but it did cause me some fretting and sleepless nights this week, i have no doubt once the fuss dies down you will see Firefox, Opera, Safari and the rest follow suit.

We protect a lot of our internally accessed data with self certed SSL certificates and these where created back in the days when 512 bytes was more than ample and secure for this purpose. These certs were renewed each year and over time have been forgotten about.

The symptoms of the problem post this fix being applied are:-

When IE <=8 tried to connect you get a "there is a problem with the web site" error and you can go no further, with IE >=9 you get the "There is a problem with the certificate" message but clicking on the "Proceed to the web site (not recommended)" does nothing.

Now on a i5 server (used to be the iSeries Server or AS400 and nicknamed iBoxes) renewing a self certed SSL server certificate is dead easy and you get the option to change the bit length so for our iBoxes it was dead easy. Admin Panel, renew certificate, change bit length, create, apply , restart server .. and the problem went away.

But Domino servers ... ahhhh ....

I went into the Certificate authority NSF created for the server, tried to create a new certificate, not a problem but no field to let me change the key length.. ARRRRRRGGHHHHHHH!!! Tried a whole lot of things to get a 1024 long key, with no great success. So my quickr users on the one server with the problem had to start using another browser whilst I sorted this problem out.

As it turns out Per Lausten Domino Guru and all around nice chap tweeted a link that lead me to the solution ...many thanks Per!!! Once again Social Networking helps the poor benighted admin out of a tight corner not really of his own making.

Basically what I did was the following which I was missing in the other ways I tried
The full details for what follows are on the link above, but in summary you just start from scratch.

01. I took a copy of the original Cert Authority NSF created for the server
02. I took a copy of the .key and .sth files currently in use on the server
03. I created a new nsf using the Domino Certificate Authority template CCA50.ntf
04. I created a new CERTIFICATE AUTHORITY KEY RING FILE with a 1024 bit key (option 1)
05. I ran the Configure Certificate Authority Profile (option 2) for the new key ring file
06. Set the expiry to 5 years
07. I ran option 3 - Create Server Key Ring & Certificate, filled in the guff required paying special attention to put CAKeyPair in as  the CA Certificate Label and the fully qualified domain name of the server as the "Common Name" and 1024 as the key length.

Et Voila!!! I have a new Keyfile.kyr and KeyFile.sth with 1024bit keys!

All that was left was to copy these to the server and stop and start the HTTP task and IE started to work again, which was accompanied by a massive sigh of relief and a couple of memo's suggesting we might as well go the whole hog and get "real" certificates even thought they cost money.

Thanks again Per for the link that got this sorted you are a star!