Colour

Guides

A Simple Web Developer's Guide to Color and Practical Color Theory for People Who Code

CSS Colour Guide

CSS Colours (MDN)

Who Can Use for Color Combinations

Hex Naw Color Accessiblity tool

Giving Colors More Colorful Names

Equating Color and Transparency

Natural colour palettes for UI design

How Hexidecimal works

Hex Color Picker

Playing with Colours

Colours and Their Meaning

Blue:

• trust, loyalty, honesty
• one colour most free of cultural bias worldwide
• not good colour for food as it is perceived as inedible
• dominates seascapes but rarely seen in landscapes

Red

• strongest colour that signfies danger, passion, power, lust, energy, excitment and love
• favored colour for Chinese as it keeps evil away and means long life
• active, competitive, daring, aggressive, and impatient

Purple

• leadership, respect, weath, passion, magic, mysticism, mystery, ceativity, ideas
• hardest colour to mix
• light purple is fun and casual - suggesting springtime
• dark purple is heavy and can be overpowering

Yellow

• bright, gets attention - used for warnings
• warm, playful, happy, inviting and stimulating
• can indicate sickness

Orange

• strong personality, confident, creative, adventurous, cheerful
• grabs your attention
• warmth, fire and flames, adventure, excitment
• orange has the power of red but is less intense

Green

• newness, regeneration life, growth, health
• energy, faith, money (not universal)
• most restful colour to the human eye
• contentment, harmony, freshness, caring, moral and sensitive

Brown

• sustenance, smplificy, comfort, quality
• credibility, neatural, stability, harmony, renewal, history
• Pink
• most often used in confectionary
• passion and purity, romance

Black

• strength, determination, power, formailty
• top of the line, class, mysterious
• few logos are basic black
• suggests evil and darkness

Grey

• really classy, corporate
• like black but less bold

Source: Blue is Hot, Red is Cool: Choosing the Right Colour for Your Logo by David Carter (2001)

More information on colours and their meaning.

Colour Resources

Everything you Need to Know about Color

A Nerd’s Guide to Color on the Web

Online Color Picker - easy tool to grab the colours from a photo

Iris - everything you need to make great colour palettes

10 Color Inspiration Secrets Only Designers Know About – Design School

10 sets of watercolour brushes for Photoshop

100 Brilliant Color Combinations: And How to Apply Them to Your Designs – Design School

25% of the people have a 4th cone and see colors as they are ;p

Coffee is the color

30 Flat Design Color Palettes That Just Work - StumbleUpon

brand-colors

Check My Colours - Analyse the color contrast of your web pages

Coblis — Color Blindness Simulator | Colblindor

Cohesive Colors | A tool for creating more cohesive color schemes.

Color Alchemy with Less: Creating Color Schemes and Palettes

Color Hunt

Color Template

Color Theory for Designers, Part 1: The Meaning of Color - Smashing Magazine

Color Theory For Designers, Part 2: Understanding Concepts And Terminology - Smashing Magazine

Color Wheel - Color Calculator | Sessions College

colorable

ColorFavs

Coolors - The super fast color schemes generator!

Couleurs

Green Honey

Hexwalk

How I Work with Color — Medium

How Well Do You Actually See The Color Blue

HTML Color Codes

Material Design Color Palette Generator - Material Palette

Palettab, For Chrome

PLTTS - Popular

Snazzy Maps - Free Styles for Google Maps

Style tiles

Stylify Me - Online Style Guide Generator

The great RGB guessing challenge

The Psychology of Color in Marketing and Branding

Least common colour on the web

uiGradients - Beautiful coloured gradients

Gradient Generator

Understanding Color Psychology for Impactful Web Design - Designmodo

What colour is it?

Why the Right Color Palette Matters for Your Brand | AddThis Blog

Colour Palette Generator

Colour

Colorful Words

Colour in Web Design

Source:Sitepoint article 'Essential colour checklists for Web design' by Marta Eleniak (april 28, 2003) http://www.sitepoint.com/print/1126

• The main ingredient for legibility is contrast. You can test your legibility by converting your site to monochrome. Use strong contrast between the background colour and the text colour.
• If you need to show a pattern, place it in the center because our eyes work harder to take in patterns on the periphery.
• Important information to the user does not rely on colour alone.
• Avoid using too many colours at the same time, it creates a confusing overall effect.
• Black text on a white background is best.
• Red and green are best used in the centre of the screen and black, white, yellow and blue are best used on the periphery
• Brighter colours are better by interfaces that will be viewed for a long period of time or if designed for older users.
• If you want colours to be easily distinguished from each other, use darker shades of blue, red, and purple and paler shades of green, yellow and orange.
• Colours do not mean the same thing to different people.
• To convey low prices use brighter colours such a yellow
• Beige, blue, burgundy, and dark green give the impression of high quality, solidity and tradition.

Do Not

• Do not use red and green where you need to distinguish between them to understand the content.
• Do not use blue and yellow together when you need to distinguish between them to understand the content.
• Do not use grey text
• Do not use different blues simultaneously
• Do not use fluorescent colours.
• Do not pair extremes of wavelength (opposite ends of colour chart) like red and blue as it induces headaches
• Do not use high chroma colours together like blue and yellow

Color Contrast Tools

Colour Contrast Analyzer

Luminosity Colour Contrast Ratio Analyser

Colour Contrast Visualiser

Color Contrast Check

Colour Tips

• Red in product design suggests competition so leads to haggling, lower bids, or increased bids if a limitation is in place (i.e. limited quantity).
• The correct yellow is important. Avoid yellow clothing - unattractive.
• Yellow lures people to your door. Yellow lures them along - spend less time. Does this work for a checkout?
• Eating more carotenoids gives skin a healthy colour.
• Blue/red paper avoid, use yellow (ex. sticky note) as it triggers thinking.
• Green is a problem colour in vehicles. Yet exposure to green enhances creativity; go view some nature.
• Even a brief and a small amount of green. Green increases intrinsic motivation. Be more creative - use green paper. Sustained exposure to greenery is good.