![]() ![]() ![]() ![]() |
| Topics this page:
|
|
Color Name: | Red | Green | Blue |
![]() | Hex 6: | Hue | Sat. | Lum. |
![]() ![]() ![]() | ||
|
|
|
Amazon | ||
---|---|---|
#F84603 | 248,70,3 | |
#FF9616 | 255,150,22 | |
#FFCB00 | 255,203,0 | |
#003BB2 | 0,59,178 | |
#00FFDC | 0,255,220 |
Google uses bold, primary colors in its corporate logo.
Different cultures have different positive and negative associations with each color:
Color | Positive | Negative |
---|---|---|
Red | energy, power, vigor, leadership, courage, passion, activity, joy, highly visible | danger, evil, anger, blood |
Green | wealth, money, calming, trees, ambition, endurance, healing, calm, generosity, natural, completion | protection, envy, jealousy, immaturity |
Blue | ecurity, trustworthy, stability, loyalty, wisdom, trust, friendliness, preservation, courage, science | sadness, depression, cold, immoral, stai |
Orange | cheerful, passion, pleasure, enthusiasm, fascination, creativity, fun | frivolous, flamboyant, crass, low Class |
Yellow | optimism, childish, freshness, law, education | arrogance, cowardice, illness, betrayal |
Purple | magic, mystery, spirituality, the sub-conscious, creativity, dignity, royalty, | mourning, cruelty, arrogance, conceit |
Black | powerful, mysterious, elegance, sophistication, functionality | death, morbid, plague, aloof |
From ANSI/AAMI (2009) at Elizabeth Allen
Color | Location | Cultural significance |
---|---|---|
Red | United States | Stop (danger) at traffic lights: high priority alert; Christmas when combined with green; love (Valentine's Day) when combined with pink. |
Eastern cultures | With white, signifies joy | China | Symbolizes celebration and luck: used in cultural ceremonies ranging from funerals to weddings |
India | Purity; used in wedding outfits | |
Green | China | Not a good color choice for packaging: green hats mean a man's wife is cheating on him |
France | Not a good color choice for packaging | |
India | The color of Islam | |
Blue | China | Associated with immorality |
Columbia | Associated with soap | |
Hinduism | The color of Krishna | |
Judaism | Holiness | |
Middle East | Protective color | |
Orange | Holland | Color of the Royal Family |
Ireland | Religious significance (Protestant) | |
Yellow | Asia | Sacred, imperial |
Western cultures | Joy or happiness; intermediate-priority alert (caution); continue but caution, stop if possible (traffic lights) |
|
Color Name | r,g,b | Hex 6 | Hex 3 | Sample |
---|---|---|---|---|
*Black (CSS1) 黝 | 0,0,0 | #000000 | #000 |   |
Dark Slate Gray | 49,79,79 | #2f4f4f | - |   |
none | 51,51,51 | #333333 | #333 |   |
none | 102,102,102 | #666666 | #666 |   |
Dim Gray | 105,105,105 | #696969 | - |   |
Slate Gray | 112,138,144 | #708090 | - |   |
Light Slate Gray | 119,136,153 | #778899 | - |   |
"Normal" *Gray (CSS1) | 128,128,128 | #808080 | - |   |
none | 153,153,153 | #999999 | #999 |   |
*Silver (CSS1) | 192,192,192 | #C0C0C0 | - |   |
Light Gray | 211,211,211 | #d3d3d3 | - |   |
Gainsboro | 220,220,220 | #dcdcdc | - |   |
*White (CSS1) | 256,256,256 | #FFFFFF | #FFF |   |
HTML uses "additive" color values specified by the properties of light
emitted from LCD monitors which produce color by electrifying various
gases
.
Black is the absence of light shining, so it's specified with zeros.
White light contains the maximum value of all three colors. This is why some mobile phone users use a black background to preserve battery life.
"Normal" gray has equal amounts of all three primary colors at 50%, represented as decimal 128 (hex 80), which is midway to the maximum 256.
Each 8-bit hex digit can have one of 16 values (from 0 through 9,A,B,C,D,E,F).
So divide a decimal number by 16 for the first hex digit.
Divide the remainder by 16 for the second hex digit.
Alternately, multiply the first hex digit by 255 to convert it to decimal.
RGB coloring is specified in Cascading Style Sheet coding one of several ways:
3-digit hex shortcuts are automatically converted by browsers doubling each digit such that #678 = #667788. Although more compact, they cannot be used to identify colors with non-repeating color values such as #ACD257.
This Gimp tutorial on grayscale describes and compares different techniques on how to turn color photos into grayscale.
Since the maximum value of each hex "FF" is equivalant to decimal value 256, the RGB color space has 256*256*256 or 16,777,216 possible colors, while most humans can distinguish a gamut of about 10 million different colors.
TOOL:
Color Contrast Check
allows users to specify a foreground and a background colour
to determine if there is enough of a difference between them in brightness and contrast
for someone having color deficits or when viewed on a black and white screen.
TOOL: Contrast Ratio Calculator at MSF&W recommends whether use use white or black fonts over typical background colors based on this formula:
Pantone is a proprietary naming system (color space) the company uses to ensure accurate color on a variety of mediums (ink, paint, plastics, etc.). Their fan book has 1,757 numbered swatches of color.
Printing ink on paper use a color model called CMYK for the Cyan, Magenta, Yellow, and blacK pigments that are blended to absorb light reflecting off the media. This is called "subtractive" Image Mode in Photoshop.
The Real Color Wheel (for printers, anyway). "In the sky cyan gets darker through blue."
How to use it to mix paints that truely represents nature.
White dots are colors which, as of 2012, cannot be reproduced. But advances in chemistry over time will change that.
HSV (Hue, Saturation, Value), also call HSB (with B for Brightness).
TOOL: Coolors.com provides a nice color picker web page featuring a HSB slider.
RGB to HSV conversion algorithms are available.
HIE (hue, luminosity, and psychometric saturation)
SIH (Saturation, Intensity, and Hue)
The International Commission on Lighting (abbreviated CIE from its French name Commission Internationale de l'Êclairage) is the body responsible for international recommendations for photometry and colorimetry. In 1931 it defined the CIELAB (CIE L*a*b*) color space where the same distance within the space represent approximately equal color difference. Variables L*, a* and b* are plotted at right angles to one another.
|
% | Decimal | Hex | | | |
---|---|---|---|---|---|
100% | 255 | xFF | *Red #FF0000 | *Lime #00FF00 | *Blue #0000FF |
75% | 192 | xC0 | #C00000 | #00C000 | #0000C0 |
69% | 176 | xB0 | #B00000 | #00B000 | #0000B0 |
60% | 153 | x99 | #990000 | #009900 | #000099 |
50% | 128 | x80 | *Maroon #800000 | *Green #008000 | *Navy #000080 |
25% | 64 | x40 | #400000 | #004000 | #000040 |
20% | 51 | x33 | #330000 | #003300 | #000033 |
The yellowish background on this website is R 255, G 255, B 200 (#ffffc8), which I use because it's supposed to be the most relaxing background for the human eye, according to some random website I've long forgotten about.
Historically, the W3C CSS1 standard assigned only 16 names:
The CSS1 color name "green" is not as saturated as the CSS1 color name "lime".
"Orange" was added in CSS2.1.
147 proprietary color names were introduced with X11, then adopted by only Internet Explorer/Opera, then lately by SVG and CSS3.
Color names of course reflect nature:
|
> From GREEN to BLUE > | |
G
t
R
|
|
Kelly Martin's Colorspace Explorer (Lab colorspace, version 3.04) and Cooperative Color Naming System.
A good rule of thumb is to take your background colour and compute
Y = 0.3R + 0.59G + 0.11B.
If Y exceeds 0.5, use black foreground text, otherwise use white."
Color Scheme Calculator calculates triad, complementary, analogous, and split complementary colours,
plus saturation and lightness variations. Also converts the given colour to RGB and HSL.
The advantage of using HSL is that when you keep the brightness and saturation level constant,
you will select colors that go well with each other.
Bob Power's example.
Freeware Eltima Absolute client program doesn't display HSL in percentage, but it's nonetheless a useful
color scheme generator, color history builder, color scheme management system, and screen color grabber.
Formulas to convert between color space schemes are defined in the book Fundamentals of Interactive Computer Graphics by Foley and van Dam (c 1982, Addison-Wesley).
|
Red | Green | Blue | Bounces | Color Name | Absorbs |
---|---|---|---|---|---|
00 | FF | FF | green and blue | Cyan/Aqua | red |
FF | 00 | FF | red and blue | Magenta Fuchia | green |
FF | FF | 00 | red and green | *Yellow 黄 | blue |
Cyan, magenta, and yellow — abbreviated as "CMY" — are also called "secondary" colors.
Less saturated complementary colors:
Red | Green | Blue | Bounces | Color Name | Absorbs |
---|---|---|---|---|---|
00 | 80 | 80 | green and blue | *Teal | red |
80 | 00 | 80 | red and blue | *Purple 紫 | green |
80 | 80 | 00 | red and green | *Olive | blue |
To obtain the complement to a specific color, merely calculating the remainder from 255 or FF doesn't work for all colors.
It's more reliable to first convert the number to the number of HSL Hue degrees, then add or subtract 180 degrees.
|
![]() ![]() ![]() |
Google's Material Design specification for color style (introduced at the Goolge I/O conference June 2014) offers a palette of 19 color names in its .aco swatch file for Photoshop and .ase file for Illustrator.
BLAH:
Google's Red 500 looks more orange to me.
Hot red / magenta / fuchsia (such as berry and cherry) are missing from the pallette.
In their place are muted greys and brown.
(Guess Google didn't have stereotypical young girls picking favorite colors).
There colors are supposed to all work together (such as this Google I/O track page shown here) ... unless you're at a My Little Pony convention ;).
The darkest color in the series is the 900 series:
TOOL: Click on a color on the pallette at MaterialUp.com presents all ranges of that color. Click on a color code and it is pasted to your clipboard. Clever.
TOOL: Click 2 colors at MaterialPalette.com and a custom set of colors is shown for your download in various formats. Notice their CSS names:
/* Palette generated by Material Palette - materialpalette.com/blue/light-blue */ .dark-primary-color { background: #1976D2; } .default-primary-color { background: #2196F3; } .light-primary-color { background: #BBDEFB; } .text-primary-color { color: #FFFFFF; } .accent-color { background: #03A9F4; } .primary-text-color { color: #212121; } .secondary-text-color { color: #727272; } .divider-color { border-color: #B6B6B6; }
Material Color Samples within the Material Deisng for Bootstrap theme
![]() ![]() ![]() |
|
Android mobile apps uses Hex ARGB (or RGBA) values formatted as #AARRGGBB, where the AA is a hex number representing the Alpha Channel to designate the extent of transparency. To derive this hex value from a opacity percentage, first multiple the percent to 255 and round the result up or down.
TOOL: Input the number and click convert or manually lookup a TOOL: table to convert between Hex and numeric equivalents
A zero returned should have a zero in front of it (padding).
The above makes use of the standard Alpha blending equation:
out = alpha * new + (1 - alpha) * old
HSL Stands for Hue, Saturation, and Luminosity. To specify font color in CSS3 using HSL/HSB:
color: hsl( 84, 60, 44 ); # degrees, percent
"84" in the first parameter above is for "Hue", expressed as the number of degrees of a circle, a non-linear deformation of the RGB color space makse for smooth change in hue values from 0 (red) to 1 (violet). Arranging the range of both RGB and CMY colors in a circle makes opposite colors intuitively easy to identify. A mnemonic for this is “Young Guys Can Be Messy Rascals”.
"60" in the second parameter is the saturation percent, a measure of color "purity" — from 100% brightness down through pastels to near 0% for a light tint. This is selected by the vertical position of the mouse in the GUI.
"44" in the third parameter is the Luminosity / Lightness percent (100% is white, 0% is black, 50% is for "normal"/"pure" color).
HSL is "symmetrical" to lightness and darkness, Unlike the HSV system.
If you like sliders, HTML Color Picker at html-color-codes.info shows RBG and HSV values for each point on the slider.
This system is used by Apple computers and the GIMP graphics program. Macromedia Studio, Paint Shop Pro, Inkscape (starting from version 0.42) are all supporting HSL, as are photospectrometers which measure colors.
This graphic is from a great tutorial on color theory from Thinkful.com
Because HSL has a fixed order, comparisons can be made between years visually, as Vijay P did in his Colours in movie posters 1914-2012.
Some use the word "Brightness" instead of "Luminosity" for "HSB", a color system defined in 1978 by A. R. Smith.
| ![]()
|
![]() ![]() ![]() |
|
![]() ![]() ![]() |
|
![]() ![]() ![]() |
![]() Paletton (previously at WellStyled.com) includes a simulation of what colors look like to those "color blind". (Approximately 8% of men and 0.5% of women are). About 35% of peole over the age of 60 have measurable difficulty discriminating different shades of blue.
|
![]() ![]() ![]() |
|
Type of link | HTML <body> Attribute |
![]() Property |
CSS Class { Property |
Object Model Property |
Java method |
---|---|---|---|---|---|
Background image | BACKGROUND= | . | BACKGROUND-IMAGE: url('x.gif'); | backgroundImage | . |
Background color | BGCOLOR | bgColor | BACKGROUND-COLOR | backgroundColor | setBackground |
Foreground color (of text) | FGCOLOR | fgColor | color: #dda0dd color: rgb(0,0,255) |
. | setColor |
The color of unvisited link text | link= | linkColor | a:link { | ||
The (temporary) color of active link text | Alink= | alinkColor | a:active { | ||
The color of visited link text | Vlink= | vlinkColor | a:visited { | ||
text where mouse hovers | - | - | a:hover { | ||
Border color (also Style and Width) | . | . | border-color border-top-color border-left-color border-right-color |
borderColor borderTopColor borderBottomColor borderLeftColor borderRightColor |
The Java coding to change the color to one of the standard colors using a method from the JDE package java.awt.Color:
Lloyd Dalton shows you Javascript coding for Color select control.
| ![]() ![]() ![]() |
Related:
![]()
| Your first name: Your family name: Your location (city, country): Your Email address: |
Top of Page![]() Thank you! |