Do colours speak louder than words?

When we deliver a message verbally, the timing and tone of the voice matters. Similarly, Formats and Colours are important aspects of Presentation.

This post will help to understand the use and overuse of colour, which applies just as much to presentations, dashboards, and websites. For the Tech Geeks, It will provide very useful details of the various way we refer the colours along with useful tools link.

Do colours Speak?

Yes, Colours do speak. When we repeatedly associate a colour to the context, our Brain will be trained to the colour and its expression. It is true of the omnipresent “traffic signal” colours, red, orange and green, which have an almost universal understanding attached to them.

White – Purity, safety, creativity; mourning (some eastern cultures), cleanliness, simplicity, and neutrality;

Black – Heavy, mournful, highly technical, formal, death, authority, power, stability, strength, intelligence, seriousness, sombre, evil (black hat), grieving (in the western hemisphere); Evokes strong emotions; Overwhelm with too much black, and makes objects appear thinner

Beige - Conservatism, piety, and dullness

Grey – Conservative, practical, reliability, security, staid, practicality, timeless, middle-of-the-road, solidity (a little grey), and nothingness/emptiness (too much grey).

Grey shades - Associated with old age, death, taxes, depression, lost sense of direction; Silver (an off-shoot of grey) a helping hand, and strong character.

Red – Passion, excitement, love, romance, intensity; energy, heat, movement, excitement, life, and blood;

Signal Red - Danger, anger, aggression.

Draws maximum attention, where the eye looks first, overuse is NOT good.

Pink (shade of red) - Calming, romance, love, and gentle feelings

Yellow – Cheerful, laughter, happiness, good times, optimism, creativity, idealism, imagination;

Flame Yellow - Associated with anger. If It is overused, It will be quickly overpowering; It can be an effective highlight colour.

Golden Yellow - Valuable, precious, fortune, promise of better times

Orange – Warning, flamboyance, fun, freaky, happy, energetic, warmth, organic; ambition. Warmth, expansive, associated with calm.

Green – Growth, nature, environment, health, money, peace, harmony, comfortable nurturing, support, envy, good luck, generosity, fertility, calming, and pleasing to the senses.

Dark forest green – Conservative, masculinity, wealth, nature, environment, health, reptiles, and insects

Blue – Productive, steadfastness, dependability, wisdom, loyalty, peace, tranquillity, trust, confidence, security, calming/restful/focused (some shades), and cold/uncaring (some shades)

Purple – Wealth, prosperity, rich sophistication (royal), the air of mystery, wisdom, respect, spirituality, and mystery. When overused appears artificial; creativity stimulates brain activity used in problem-solving.

Brown – Reliability, stability, friendship; natural, organic, Earth, simplicity, outdoors

Expression of colours

Colours help to express the context in three major ways categorically, aesthetically and semantically.

Categoric

Different colours should be used for different categories. If different colours are used in the same category, It will confuse the user.

Red, Amber and Green ( RAG Status) - Classic use include Red for Bad, Amber or Orange for Neutral and Green for Good.

We should avoid interchanging these colours of the different category.

Aesthetic

Aesthetic colours have no association with data. Colours are combined for just visual appeal. Colours have to be chosen carefully, to not conflict with other colour uses.

Semantic

Semantic colours have the meaning, but not of quantitative data values.

Here it is as important as to be consistent, especially across pages and tabs.

Business users need not require to guess or ask, and the business community who will see those colours every day, week or month, persist across presentation.

Selecting Colours ( Schemes)

Selecting the colour from the colour wheel is more schematic.

Refer the direction of lines in the below guide, how the colour schemes are derived.

Monochromatic, 3 Hue Adjacent, 5 Hue Adjacent, Analogous, Complementary, Near Complementary, Split Complementary, Split Complementary - Bridged, Double Complementary, Double Split Complementary, Double Split Complementary Bridged, Compound, Triadic - Strict, and Triadic with Neutral Dominant, Triadic with Neutral 3 Hue, Triadic with Neutral 5 Hue, Tetradic, Saturation are the various methods the colours are being selected from the wheel to form the colour schemes.

An important aspect of the design is removing colours and understanding the lack of colours. Design the Dashboard in colour and view it in the grey scale. It helps with accentuating the important things. Why not apply this to our dashboards and reports design?

Depth of Colours

Further, the colours are having 4 depths.

Hue, Tint, Tone and Shade. These depths are achieved with the help of adding white and black to the original pure colour.

Transparency & Opacity

In the Design theory, transparency is the functionality that supports transparent areas in an image or image layer. Certain image formats do not support transparency. Opacity is the extent to which something blocks viewing the behind layers of over-layered images.

In the bubble chart, the bubbles are over layered and only the bubbles on the front layer are visible.

You can change the opacity of layers, filters, and effects so that more (or less) of the underlying image shows through.

Transparent layers are the layers make the hidden layer visible through the over-layered images.

Colour Gradient

A gradient is the term to describe density range of coloured area or banding of the different colour in a multicoloured area. Gradients come in various forms, although axial (a linear colour transition from one side of a space to another), and radial (circular transitions of colour) are the most common.

In graphics, a colour gradient (sometimes called a colour ramp or colour progression) specifies a range of position-dependent colours, usually used to fill a region between two points in a gradual descent or ascent. The transition of colours between points in a smooth way. Refer the chart above the smooth transition effect of Blue and Red colour.

Colour notation

Colours in Computer graphics are referred in two widely used systems based on devices CMYK and RGB.

You can interchange the reference notation by converting them from one form to another form according to the requirement.

CMYK

It is a subtractive colour model used in colour printing. CMYK works on an optical illusion that is based on light absorption.

The principle is to superimpose three images; one for cyan, one for magenta and one for yellow; which will reproduce colours.

Commercial printers print with cyan, magenta, yellow and black (CMYK) ink, The colour ranges are achieved combining cyan, magenta, yellow and black.

The CMYK colour space, also known as CMJN, stands for:

• Cyan.
• Ranges from 0 to 100% in most applications.
• Magenta.
• Ranges from 0 to 100% in most applications.
• Yellow.
• Ranges from 0 to 100% in most applications.
• blacK.
• Ranges from 0 to 100% in most applications.

RGB (Red Green Blue)

Scanners, digital cameras and computer monitors use red, green and blue (RGB) light to display colour.

The RGB (Red, Green, Blue) colour model is the most known, and the most used every day.

• Red, which ranges from 0-255
• Green, which ranges from 0-255
• Blue, which ranges from 0-255

The RGB colour model is an additive one. In other words, Red, Green and Blue values (known as the three primary colours) are combined to reproduce other colours.

For example, the color "Red" can be represented as [R=255, G=0, B=0], "Violet" as [R=238, G=130, B=238], etc.

Its common graphic representation is the following image:

However, there are other notations also used such as YUV, Hex, HSB and HSL.

YUV

The YUV model defines a colour space in terms of one luma and two chrominance components. The YUV colour model is used in the PAL, NTSC, and SECAM composite colour video standards.

YUV models human perception of colour more closely than the standard RGB model used in computer graphics hardware.

The YUV colour stands for:

Y, the luma component, or the brightness.

• Ranges from 0 to 100% in most applications.

U and V are the chrominance components (blue-luminance and red-luminance differences components).

• Expressed as factors depending on the YUV version you want to use.

Hex is a Hexadecimal code of the RGB colour; HSL meant Hue, Saturation and Luminosity.

HSL or HSV

The HSB (Hue, Saturation, Brightness) or HSV ( Hue, Saturation, Value) colour model defines a colour space in terms of three constituent components:

Hue: the colour type (such as red, blue, or yellow).

• Ranges from 0 to 360° in most applications. (each value corresponds to one colour : 0 is red, 45 is a shade of orange and 55 is a shade of yellow).

Saturation: the intensity of the colour.

• Ranges from 0 to 100% (0 means no colour, that is a shade of grey between black and white; 100 means intense colour).
• Also sometimes called the "purity" by analogy to the colourimetric quantities excitation purity.

Brightness (or Value): the brightness of the colour.

• Ranges from 0 to 100% (0 is always black; depending on the saturation, 100 may be white or a more or less saturated colour).

HSL

Hue: the colour type (such as red, blue, or yellow).

• Ranges from 0 to 360° in most applications (each value corresponds to one colour : 0 is red, 45 is a shade of orange and 55 is a shade of yellow).

Saturation: variation of the colour depending on the lightness.

• Ranges from 0 to 100% (from the centre of the black & white axis).

Lightness (also Luminance or Luminosity or Intensity).

• Ranges from 0 to 100% (from black to white).

HSL is similar to HSB. The main difference is that HSL is symmetrical to lightness and darkness. This means that:

• In HSL, the Saturation component always goes from fully saturated colour to the equivalent grey (in HSB, with B at maximum, it goes from saturated colour to white).
• In HSL, the Lightness always spans the entire range from black through the chosen hue to white (in HSB, the B component only goes half that way, from black to the chosen hue).

Here a handy tool that will help pick any colour that you want from the desktop screen and get the colour notation in almost all the systems.

Colour Wheel tool system online. You can upload your image and select custom colour scheme here.

Online Colour Chooser - You can choose the colour.

Create Palette from Image Colour Pallete is created will all colours in an Image.

Colour Explorer - Analyse the colours. You can match two colours.

Colour Blender - You can get the blend for given colour.

Here an online converter.