17 Fresh Web Tools for Working with Colors

Flat UI Color Picker is a great visual display of colours

HTML Color Codes

Why You Should Avoid Vibrating Color Combinations

25 Brilliant Uses of Colorful Spectrums in Web Design | Design Shack

9 places to get inspiration for your website's color palette - The Next Web

BootSwatchr.com

216 Most Popular Web Safe Colours

BrandColors — a collection of major brand color codes

Browse Palettes :: COLOURlovers

cColor Blender

Why Facebook is Blue

Colllor - Color palette the right way

Color — Method of Action 

Color Survey Results | xkcd

color.hailpixel.com · Swatch you doing?

ColorBrewer Intro - Selecting Good Color Schemes for Maps

colorjoe by bebraw

ColoRotate: Home

Colorsublime

Colour Contrast Check - snook.ca

Colours

Colours In Cultures

daylerees/colour-schemes · GitHub

Design for Hackers: Why Monet Never Used Black, & Why You Shouldn’t Either

Design Seeds®: For All Who Love Color

Designing for the Web: Resolution and Size » Web Design » Design Festival

Finding the Right Color Palettes for Data Visualizations — Graphiq Engineering — Medium

Flickr Flow / Fernanda Viegas & Martin Wattenberg

Free For All: Art Box Photoshop Swatches | CreativePro.com

Free For All: Photoshop Brushes, Fonts, and Image Tools | CreativePro.com

Hex Color

How do colors affect purchases? Infographic

How to Choose Colors Everyone Likes | CreativePro.com

How to Get a Professional Look With Color

Pretty IP - By Strange

RGB Colorspace Atlas, A Cubed Book Depicting Every Color Imaginable

slayeroffice | tools | color palette creator v1.6.1

The Code Side Of Color | Smashing Coding

The crayola-fication of the world: How we gave colors names, and it messed with our brains (part II) | Empirical Zeal

The Psychology of Color » Color » Design Festival

Web Blog / All 120 Crayon Names, Color Codes and Fun Facts by COLOURlovers :: COLOURlovers

What the Color?

Why Is Facebook Blue? The Science Behind Colors In Marketing | Fast Company | Business + Innovation

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.

Cohesive Colour Schemes

  1. Find the colors you want.  Don't worry about cohesion yet.
  2. Pick a color you want to tint everything towards (like yellow for energy)
  3. Overlay the colors with this tint and play with the blending mode and opacity til you get something to work with.
  4. Tada!  Cohesive color scheme created.

 

Read this article for more rules on creating website colour schemes.

Here is a site with Found Color Schemes.

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

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.

This page contains information I gathered and thought were very useful. See more notes on design.

Just to let you know, this page was last updated Monday, Dec 04 23