A Simple Web Developer's Guide to Color and Practical Color Theory for People Who Code
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
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 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
Why Is Facebook Blue? The Science Behind Colors In Marketing | Fast Company | Business + Innovation
Colours and Their Meaning
- 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
- 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
- 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
- bright, gets attention - used for warnings
- warm, playful, happy, inviting and stimulating
- can indicate sickness
- 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
- newness, regeneration life, growth, health
- energy, faith, money (not universal)
- most restful colour to the human eye
- contentment, harmony, freshness, caring, moral and sensitive
- sustenance, smplificy, comfort, quality
- credibility, neatural, stability, harmony, renewal, history
- most often used in confectionary
- passion and purity, romance
- strength, determination, power, formailty
- top of the line, class, mysterious
- few logos are basic black
- suggests evil and darkness
- 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.
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 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 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
Luminosity Colour Contrast Ratio Analyser
Color Contrast Check
- 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 Saturday, Jun 03 23