Difference between revisions of "Web colours"
From Christoph's Personal Wiki
(→External links) |
(→External links) |
||
| (12 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
== Psychology of colours == | == Psychology of colours == | ||
| − | Below is a very brief summary of some of the emotions or feelings associated with | + | Below is a very brief summary of some of the emotions or feelings associated with colour: |
; Red : strength, boldness, excitement, determination, desire, courage | ; Red : strength, boldness, excitement, determination, desire, courage | ||
| Line 9: | Line 9: | ||
; Yellow : attention-grabbing, comfort, liveliness, intellect, happiness, energy | ; Yellow : attention-grabbing, comfort, liveliness, intellect, happiness, energy | ||
; Green : durability, reliability, safety, honesty, optimism, harmony, freshness | ; Green : durability, reliability, safety, honesty, optimism, harmony, freshness | ||
| − | ; Blue : depth, stability, professionalism, loyalty, reliability, | + | ; Blue : depth, stability, professionalism, loyalty, reliability, honour, trust |
; Purple : power, nobility, luxury, mystery, royalty, elegance, magic | ; Purple : power, nobility, luxury, mystery, royalty, elegance, magic | ||
; Grey : conservatism, traditionalism, intelligence, seriousness | ; Grey : conservatism, traditionalism, intelligence, seriousness | ||
| Line 16: | Line 16: | ||
; White : cleanliness, purity, newness, virginity, peace, innocence, simplicity | ; White : cleanliness, purity, newness, virginity, peace, innocence, simplicity | ||
| − | == X11 | + | == X11 colour names == |
{| style="border:1px solid #000;" | {| style="border:1px solid #000;" | ||
|- | |- | ||
| − | ! | + | !colour |
!hexadecimal | !hexadecimal | ||
| − | ! | + | !colour |
!hexadecimal | !hexadecimal | ||
|- | |- | ||
| Line 391: | Line 391: | ||
|} | |} | ||
| − | + | == Web-safe colours == | |
| − | + | ||
| − | == Web-safe | + | |
{| style="border:1px solid #000;" | {| style="border:1px solid #000;" | ||
| Line 665: | Line 663: | ||
|} | |} | ||
| − | == External links == | + | ==External links== |
| − | * [http://www.colorschemer.com Color Schemer] | + | *[[Image:icon_star.gif]][http://www.colorschemes.org/ ColorSchemes.org] — The Canonical List of Online Color Resources for Designers |
| − | * [http://beta.dailycolorscheme.com/ Daily Color Scheme] | + | *[http://www.colr.org/ Colr.org] |
| − | * [http://www.colorjack.com/plugin/ ColorJack - DHTML Color Picker] | + | *[http://www.colorschemer.com Color Schemer] |
| − | * [http://www.colormatch.dk/ ColorMatch] | + | *[http://beta.dailycolorscheme.com/ Daily Color Scheme] |
| − | * [http://www.meyerweb.com/eric/tools/color-blend/ Color Blender] | + | *[http://www.colorjack.com/ ColorJack] / [http://www.colorjack.com/sphere/ ColorJack Sphere] / [http://www.colorjack.com/plugin/ ColorJack - DHTML Color Picker] / [http://www.colorjack.com/sphere/?LoadJack=fu:17,blind:0,mode:0,model:1,maly:1,currMe:191x191,cpu:0.735,cpv:0.265,abu:0.9,abv:0.07358,aeu:0.4719,aev:0.52705 ColorJack] |
| − | * [http://wellstyled.com/tools/colorscheme/index-en.html Color Scheme] | + | *[http://www.colormatch.dk/ ColorMatch] |
| − | * [http://wellstyled.com/tools/colorscheme2/index-en.html Color Scheme Generator 2] | + | *[http://www.meyerweb.com/eric/tools/color-blend/ Color Blender] |
| − | * [http://www.easyrgb.com/index.html Easy RGB] | + | *[http://wellstyled.com/tools/colorscheme/index-en.html Color Scheme] |
| − | * [http://www.defencemechanism.com/color/ ColorToy 2] | + | *[http://wellstyled.com/tools/colorscheme2/index-en.html Color Scheme Generator 2] |
| − | * [http://www.degraeve.com/color-palette/index.php Color Palette Generator] | + | *[http://www.easyrgb.com/index.html Easy RGB] |
| − | * [http://colorblender.com/ Color Blender] | + | *[http://www.defencemechanism.com/color/ ColorToy 2] |
| − | * [http://www.ficml.org/jemimap/style/color/wheel.html 4096 Color Wheel] | + | *[http://www.degraeve.com/color-palette/index.php Color Palette Generator] |
| − | * [http://www.colorwhore.com/ ColorWhore] | + | *[http://colorblender.com/ Color Blender] |
| − | * [http://color.sharewonders.com/ Color Tool 2.0.8 Alpha] | + | *[http://www.ficml.org/jemimap/style/color/wheel.html 4096 Color Wheel] |
| − | * [http://juicystudio.com/services/colourcontrast.php Colour Contrast Analyser] | + | *[http://www.colorwhore.com/ ColorWhore] |
| − | * [http://www.siteprocentral.com/html_color_code.html TML Color Code Combination Chooser] | + | *[http://color.sharewonders.com/ Color Tool 2.0.8 Alpha] |
| − | * [http://web.forret.com/tools/color.asp Color Conversion] | + | *[http://juicystudio.com/services/colourcontrast.php Colour Contrast Analyser] |
| − | * [http://www.somacon.com/p142.php CSS Color Chart] | + | *[http://www.siteprocentral.com/html_color_code.html TML Color Code Combination Chooser] |
| − | * [http://www.colourlovers.com/ COLOURlovers] | + | *[http://web.forret.com/tools/color.asp Color Conversion] |
| − | * [http://kuler.adobe.com/ Adobe Kuler] | + | *[http://www.somacon.com/p142.php CSS Color Chart] |
| − | * [http://en.wikipedia.org/wiki/Color_tool Colour tool] | + | *[http://www.colourlovers.com/ COLOURlovers] |
| − | * [http:// | + | **[http://www.colourlovers.com/blog/2007/06/30/ultimate-html-color-hex-code-list/ Ultimate HTML Color HEX Code List] |
| + | **[http://www.colourlovers.com/blog/2007/06/01/colorful-beauty-in-nature-butterflies/ Butterflies] | ||
| + | **[http://www.colourlovers.com/blog/2007/07/24/32-common-color-names-for-easy-reference/ 32+ Common Color Names for Easy Reference] | ||
| + | **[http://www.colourlovers.com/blog/2007/09/02/the-muller-formula-or-predictable-color-preferences/ The Müller Formula (or: Predictable Color Preferences)] | ||
| + | **[http://www.colourlovers.com/blog/2008/03/20/winners-photo-color-inspiration-contest/ WINNERS: Photo Color Inspiration Contest] | ||
| + | *[http://www.steeldolphin.com/color_scheme.html Steel Dolphin - Color Scheme] | ||
| + | *[http://kuler.adobe.com/ Adobe Kuler] | ||
| + | *[http://en.wikipedia.org/wiki/Color_tool Colour tool] | ||
| + | *[http://www.personal.psu.edu/cab38/ColorBrewer/ColorBrewer.html ColorBrewer] | ||
| + | *[http://www.childoflight.org/mcc/colorcodeA.html Marrianne's Colorcodes] | ||
| + | *[[wikipedia:Web colours]] | ||
[[Category:World Wide Web]] | [[Category:World Wide Web]] | ||
Latest revision as of 02:27, 25 March 2008
Web colours.
Psychology of colours
Below is a very brief summary of some of the emotions or feelings associated with colour:
- Red
- strength, boldness, excitement, determination, desire, courage
- Orange
- enthusiasm, cheerfulness, affordability, stimulation, creativity
- Yellow
- attention-grabbing, comfort, liveliness, intellect, happiness, energy
- Green
- durability, reliability, safety, honesty, optimism, harmony, freshness
- Blue
- depth, stability, professionalism, loyalty, reliability, honour, trust
- Purple
- power, nobility, luxury, mystery, royalty, elegance, magic
- Grey
- conservatism, traditionalism, intelligence, seriousness
- Brown
- endurance, relaxing, confident, casual, reassuring, earthy
- Black
- elegance, sophistication, formality, strength, mystery
- White
- cleanliness, purity, newness, virginity, peace, innocence, simplicity
X11 colour names
| colour | hexadecimal | colour | hexadecimal |
|---|---|---|---|
| indianred | #cd5c5c | darksalmon | #e9967a |
| lightcoral | #f08080 | salmon | #fa8072 |
| orangered | #ff4500 | red | #ff0000 |
| crimson | #dc143c | firebrick | #b22222 |
| darkred | #8b0000 | mediumvioletred | #c71585 |
| pink | #ffc0cb | lightpink | #ffb6c1 |
| hotpink | #ff69b4 | deeppink | #ff1493 |
| palevioletred | #db7093 | darkkhaki | #bdb76b |
| khaki | #f0e68c | palegoldenrod | #eee8aa |
| lightgoldenrodyellow | #fafad2 | lightyellow | #ffffe0 |
| lemonchiffon | #fffacd | yellow | #ffff00 |
| gold | #ffd700 | papayawhip | #ffefd5 |
| moccasin | #ffe4b5 | peachpuff | #ffdab9 |
| cyan | #00ffff | aqua | #00ffff |
| aquamarine | #7fffd4 | turquoise | #40e0d0 |
| mediumturquoise | #48d1cc | darkturquoise | #00ced1 |
| cadetblue | #5f9ea0 | slategray | #708090 |
| lightcyan | #e0ffff | paleturquoise | #afeeee |
| powderblue | #b0e0e6 | lightsteelblue | #b0c4de |
| steelblue | #4682b4 | lightblue | #add8e6 |
| skyblue | #87ceeb | lightskyblue | #87cefa |
| deepskyblue | #00bfff | cornflowerblue | #6495ed |
| royalblue | #4169e1 | mediumslateblue | #7b68ee |
| dodgerblue | #1e90ff | blue | #0000ff |
| mediumblue | #0000cd | darkblue | #00008b |
| navy | #000080 | midnightblue | #191970 |
| lightsalmon | #ffa07a | orange | #ffa500 |
| darkorange | #ff8c00 | coral | #ff7f50 |
| tomato | #ff6347 | orangered | #ff4500 |
| aquamarine | #7fffd4 | mediumspringgreen | #00fa9a |
| springgreen | #00ff7f | palegreen | #98fb98 |
| greenyellow | #adff2f | chartreuse | #7fff00 |
| lawngreen | #7cfc00 | lime | #00ff00 |
| lightgreen | #90ee90 | yellowgreen | #9acd32 |
| limegreen | #32cd32 | mediumseagreen | #3cb371 |
| darkseagreen | #8fbc8f | forestgreen | #228b22 |
| seagreen | #2e8b57 | green | #008000 |
| olivedrab | #6b8e23 | olive | #808000 |
| darkolivegreen | #556b2f | darkgreen | #006400 |
| mediumaquamarine | #66cdaa | turquoise | #40e0d0 |
| lightseagreen | #20b2aa | darkcyan | #008b8b |
| teal | #008080 | lavender | #e6e6fa |
| thistle | #d8bfd8 | plum | #dda0dd |
| violet | #ee82ee | fuchsia | #ff00ff |
| magenta | #ff00ff | orchid | #da70d6 |
| mediumorchid | #ba55d3 | darkorchid | #9932cc |
| blueviolet | #8a2be2 | darkviolet | #9400d3 |
| mediumpurple | #9370db | slateblue | #6a5acd |
| purple | #800080 | darkmagenta | #8b008b |
| darkslateblue | #483d8b | indigo | #4b0082 |
| honeydew | #f0fff0 | mintcream | #f5fffa |
| azure | #f0ffff | aliceblue | #f0f8ff |
| ghostwhite | #f8f8ff | whitesmoke | #f5f5f5 |
| lavenderblush | #fff0f5 | mistyrose | #ffe4e1 |
| antiquewhite | #faebd7 | seashell | #fff5ee |
| snow | #fffafa | white | #ffffff |
| beige | #f5f5dc | linen | #faf0e6 |
| oldlace | #fdf5e6 | floralwhite | #fffaf0 |
| ivory | #fffff0 | gainsboro | #dcdcdc |
| lightgrey | #d3d3d3 | silver | #c0c0c0 |
| darkgray | #a9a9a9 | gray | #808080 |
| dimgray | #696969 | darkslategray | #2f4f4f |
| lightslategray | #778899 | slategray | #708090 |
| cornsilk | #fff8dc | blanchedalmond | #ffebcd |
| bisque | #ffe4c4 | navajowhite | #ffdead |
| wheat | #f5deb3 | sandybrown | #f4a460 |
| goldenrod | #daa520 | darkgoldenrod | #b8860b |
| peru | #cd853f | chocolate | #d2691e |
| maroon | #800000 | saddlebrown | #8b4513 |
| brown | #a52a2a | sienna | #a0522d |
| darkred | #8b0000 | burlywood | #deb887 |
| tan | #d2b48c | rosybrown | #bc8f8f |
| black | #000000 |
Web-safe colours
| digit | hexadecimal | decimal |
|---|---|---|
| 0 | 00 | 0 |
| 3 | 33 | 51 |
| 6 | 66 | 102 |
| 9 | 99 | 153 |
| C or (12) | CC | 204 |
| F or (15) | FF | 255 |
The following table shows all of the "web-safe" colours, underlining the really-safe colours. The lack of gamma correction means that the six desired intensities 0%, 20%, 40%, 60%, 80%, and 100% are displayed as 0%, 2%, 10%, 28%, 57%, and 100% on a standard 2.5 gamma CRT or LCD, making most colours very dark. The intensities at the low end of the range are nearly indistinguishable from each other:
| 000 | 300 | 600 | 900 | C00 | F00 | 003 | 303 | 603 | 903 | C03 | F03 |
| 006 | 306 | 606 | 906 | C06 | F06 | 009 | 309 | 609 | 909 | C09 | F09 |
| 00C | 30C | 60C | 90C | C0C | F0C | 00F | 30F | 60F | 90F | C0F | F0F |
| 030 | 330 | 630 | 930 | C30 | F30 | 033 | 333 | 633 | 933 | C33 | F33 |
| 036 | 336 | 636 | 936 | C36 | F36 | 039 | 339 | 639 | 939 | C39 | F39 |
| 03C | 33C | 63C | 93C | C3C | F3C | 03F | 33F | 63F | 93F | C3F | F3F |
| 060 | 360 | 660 | 960 | C60 | F60 | 063 | 363 | 663 | 963 | C63 | F63 |
| 066 | 366 | 666 | 966 | C66 | F66 | 069 | 369 | 669 | 969 | C69 | F69 |
| 06C | 36C | 66C | 96C | C6C | F6C | 06F | 36F | 66F | 96F | C6F | F6F |
| 090 | 390 | 690 | 990 | C90 | F90 | 093 | 393 | 693 | 993 | C93 | F93 |
| 096 | 396 | 696 | 996 | C96 | F96 | 099 | 399 | 699 | 999 | C99 | F99 |
| 09C | 39C | 69C | 99C | C9C | F9C | 09F | 39F | 69F | 99F | C9F | F9F |
| 0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 | 0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
| 0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 | 0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
| 0CC | 3CC | 6CC | 9CC | CCC | FCC | 0CF | 3CF | 6CF | 9CF | CCF | FCF |
| 0F0 | 3F0 | 6F0 | 9F0 | CF0 | FF0 | 0F3 | 3F3 | 6F3 | 9F3 | CF3 | FF3 |
| 0F6 | 3F6 | 6F6 | 9F6 | CF6 | FF6 | 0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
| 0FC | 3FC | 6FC | 9FC | CFC | FFC | 0FF | 3FF | 6FF | 9FF | CFF | FFF |
External links
ColorSchemes.org — The Canonical List of Online Color Resources for Designers- Colr.org
- Color Schemer
- Daily Color Scheme
- ColorJack / ColorJack Sphere / ColorJack - DHTML Color Picker / ColorJack
- ColorMatch
- Color Blender
- Color Scheme
- Color Scheme Generator 2
- Easy RGB
- ColorToy 2
- Color Palette Generator
- Color Blender
- 4096 Color Wheel
- ColorWhore
- Color Tool 2.0.8 Alpha
- Colour Contrast Analyser
- TML Color Code Combination Chooser
- Color Conversion
- CSS Color Chart
- COLOURlovers
- Steel Dolphin - Color Scheme
- Adobe Kuler
- Colour tool
- ColorBrewer
- Marrianne's Colorcodes
- wikipedia:Web colours
