17 Fresh Web Tools for Working with Colors
Flat UI Color Picker is a great visual display of colours
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
216 Most Popular Web Safe Colours
BrandColors — a collection of major brand color codes
Browse Palettes :: COLOURlovers
Colllor - Color palette the right way
Color — Method of Action
color.hailpixel.com · Swatch you doing?
ColorBrewer Intro - Selecting Good Color Schemes for Maps
Colour Contrast Check - snook.ca
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
How do colors affect purchases? Infographic
How to Choose Colors Everyone Likes | CreativePro.com
How to Get a Professional Look With Color
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 Psychology of Color » Color » Design Festival
Web Blog / All 120 Crayon Names, Color Codes and Fun Facts by COLOURlovers :: COLOURlovers
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)
Cohesive Colour Schemes
- Find the colors you want. Don't worry about cohesion yet.
- Pick a color you want to tint everything towards (like yellow for energy)
- Overlay the colors with this tint and play with the blending mode and opacity til you get something to work with.
- 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
30 Flat Design Color Palettes That Just Work - StumbleUpon
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 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
Coolors - The super fast color schemes generator!
How I Work with Color — Medium
How Well Do You Actually See The Color Blue
Material Design Color Palette Generator - Material Palette
Snazzy Maps - Free Styles for Google Maps
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
Understanding Color Psychology for Impactful Web Design - Designmodo
Why the Right Color Palette Matters for Your Brand | AddThis Blog
Colour
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 Wednesday, Oct 04 23