From rgb to html colors

RGB to Color Name Mapping (Triplet and Hex)

The color table has been roughly divided up into shades. Select one of these: Black; Blue; Brown; Gray; Green; Orange; Red; Violet; White; Yellow; to jump to that division.

Other sections show the HTML behind the BG/FG color samples on this page, info about printing this page in color, the problem with metallic colors, credits, and some other sources of information.

HTML behind the BG/FG color samples

The «BG/FG color sample» is made by changing both the background and foreground colors. The background is changed with

You will see a solid block of color in the samples shown if your browser supports both markups; or just «### SAMPLE ###» in color if just one is supported. (Almost all support both now.)

Description of Columns

Color Name	Names of colors as given in the various sources I used to create this table. See «Credits» below. In some cases the sources contradict.
Credits	See «Credits» below.
R;G;B Dec	The decimal version of the triplet describing this color.
RGB Hex	The hexidemical version of the triplet describing this color.
CSS HEX	The «short» or «abbreviated» version of the hex triplet used with Cascading Style Sheets (CSS).
BG/FG color sample	See HTML behind the BG/FG color samples above.

The Problem with Metallic Colors

Several times folks have written asking what the codes are for a metallic color, such as gold, silver, or copper. It is my understanding that these tones cannot be depicted with an RGB code because they are not composed of a single basic color: Several different shades are mingled to produce a shiny-metal look. The mingling of shades requires the use of a GIF, JPG or other image; it could be used as a background. If my understanding of this is a misunderstanding then I’d greatly apprecate enlightment.

Here are some attempts to make a metal color with just RGB, as depected at Netscape at http://home1.netscape.com/home/bg/colorindex.html

These metallics are, IMHO, lame. Anyone who happens to have samples of metalic looking GIFs that I might use for an example here are urged to email me.

A potential chrome metallic is http://isd.cme.nist.gov/graphics/backgrounds/chrome.gif, but unfortunately the image doesn’t wrap properly (the edges show when used as a background).

Another metalic http://www.space.net.au/~jooste/art/others/backgrounds/ripplechrome.gif also falls short of my expectations but it wraps perfectly and looks cool. (So I’m using it as my screen background 🙂

My exact idea of good metallic rendering is found at http://userpages.nkn.net/userpages-3d/chrome-icons.gif. Unfortunately this image is of the word «Icon» spelled out in chrome, so it cannot be used as a background.

Another metalic example is this «brushed aluminum»; the same site also has unconvincing examples of «grey aluminum» and «corrugated metal».

Other Resources

• Whatcolor Displays R;G;B for the pixel under mouse cursor; displays corresponding names when known (about 1/2 of those shown above). Intended for use by partially or totally color blind people, it is invaluable for matching colors to images when making HTML documents. Shareware, I think a real bargan $8.00 registration. http://www.hikarun.com/e/. (verified links 13-Aug-2001) —>
• Defining Colours is a great explanation of how RGB and other color models work. It also has more info about what specific colors’ names work with what browsers and CSS2. Also explains the difference between RGB and HSL color spaces.
• RGB Hex Triplet Color Chart Many of my co-workers have this very concise 200+ colors with R;G;B chart on the wall behind their monitor. Also very useful FG/BG/LINKs color calculator and other useful stuff from Douglas Jacobson at http://homepage.mac.com/jakesan/DHP. (Fixed as per Daehn.Dawn@mayo.edu 13-Aug-2001) —> (verified links 13-Aug-2001) —>
• Color Composing MachineClick-and-see interface, cranks out actual HTML for background, text, and links that you can cut ‘n paste into your hand-edited documents. Other useful stuff, too. http://www.two4u.com/color/ [Broken as of 19-May-2006] (verified links 13-Aug-2001) —>
• The Mother of All HTML Color Charts is great if my list doesn’t have enough (!) for you.
• Printable PDF RGB Cheat Sheet abbreviated from my HTML version by Chris Dibble of Albert, Canada.
• Jo Owl’s Page of Color Display will let you plug an RGB in and show you the actual color. Also has a chart of 0-999 RGB values used in .WIF files.

Printing This Page in Color

The default settings of some browsers is to not print background colors or images, which means the color sample column will just contain «SAMPLE» printed over and over again. You can turn on the background color/image printing as follows:

Firefox:	Click through File→PageSetup→Format & Options, then check «Print Background (colors & images)«.
Netscape Navigator:	Same as for Firefox.
MS Internet Explorer	Click through Tools→Internet Options→Advanced, then scroll down (about half the list) to «Printing» and check «Print background colors and images«.
Safari:	Click through File→Print→Copies & Pages→Safari, then check «Print Backgrounds» box. Unfortunately there is a bug in Safari (at least in 2.0.4) and «Print Backgrounds» doesn’t do anything. A work-around is to File→Print→Save as PDF, then open the PDF and print it.

Please see this website for hints for browsers not mentioned here. If all else fails please email me, I’ll see if I can find a way or maybe even change how the samples are presented.

There is a version of this document without the background image at http://web.njit.edu/~walsh/rgb_nobg.

Credits

This is a composite of several color name sources, which are indicated by letters in the «Credits» column of the table as follows:

Credit	Source
X	Denotes colors named in MIT’s Xconsortum red/green/blue (RGB) color specifications, Xconsortum version 10.41, 1994. On some versions of Unix or Linux this is located at /usr/X11R6/lib/X11/rgb.txt
N	Denotes colors named in Netscape’s beta 1.1 «Colors» table located at http://wp.netscape.com/home/bg/colorindex.html. The document seems to contain some odd errors, such as «Hunter Green» and «Green Yellow» definded as shades of red/orange, I’ve filtered these out.
M	Denotes colors named in Microsoft documents [not yet complete]
V	VGA colors. According to http://www.w3.org/MarkUp/Guide/Style: «These 16 colors are defined in HTML 3.2 and 4.01 and correspond to the basic VGA set on PCs. Most browsers accept a wider set of color names but use of these is not recommended.» Unfortunatly this advice has been flummoxed by differences between the Xconsortum, Netscape, and Microsoft uses: Not all all have documented the use of what color is provided, or the documentation disagrees about what color is presented. For instance, «green» and «lime» above have different values!
F	The colors of the Free Speech flag, which I have taken the liberty of naming Free Speech < Green , Aquamarine , Magenta , Blue , Gray , Red >as of 10-May-2007. The flag does not contain red for some reason, so please also see the colors swatch provided by Tim Jarrett in his JarretHouseNorth blog.
[none]	Unnamed colors provided for use of the CSS shortcut example (Please inform me if this color is named someplace.)

Some duplicate and contradictory cases exist because of the multiple sources. When sources provided only decimal or hex values, I computed the missing values. The first version of this document was in 1995 or 1996. Thanks to Kenji Mikasa Kenji Mikasa Kenji Mikasa for the idea of using BG/FG samples in 1996.

Gray vs Grey

Here is not only a spelling issue, but the reason why you should always use RGB color numbers instead of names in your HTML and CSS documents: Except for headings in this document the distinction of spelling «gray» or «grey» comes from the sources shown in the credits» section above. Ordinarily, gray is an American color, and grey is an English colour. However it is also possible but not wise to use the color names (yes, the strings) in your HTML to control the colors displayed by the browser instead of using the numbers as shown in samples above.

You should see yellow letters on black background.

Will show yellow letters on black background on almost every browser, but

You should see plum letters on black background.

Will show plum letters on black background only on Netscape browser. Non-Netscape browswers might show black-on-black if they don’t understand «plum» and default to font=black.

Likewise, an older version of the Xorg rgb.txt version lists both «grey» and «gray» spellings, but I imagine different internationalizations of Internet Explorer and other browsers might or might not know both spellings.

Worse yet, I should point out that the colors shown with «X» as the credits above, are associated with the X Window System (aka X11 or X) used with most Unix-like computer systems. These colors can be specified by the name strings wherever a color is specified in X11 (configurations, resources, command lines, etc). While a few browsers might understand some of the colors, I think in general they will not, and so you best best is always to specifiy the color by number in HTML.

Todo

The following were already suggested or are otherwise already in the works. Fold in Xorg: rgb.txt,v 1.3, which includes «grey» colors and possibly other missing spellings. Fix broken external links to metalic color samples. Arrange colors more logically, probably based on numeric hues. Research Microsoft documenation to include colors understood by Internet Exploder.

Copyright and Copy policy

• This document is Copyright © 1996, 1999, 2001, 2004, 2005, 2006, 2007, 2008, 2010 by Kevin J. Walsh, all rights are reserved.
• The master copy of this document resides at http://web.njit.edu/~walsh/rgb.html
• This document can be copied with or without modification provided that you indicate that it came from http://web.njit.edu/~walsh and that it is «Copyright © 2010 Kevin J. Walsh».
• Please do let me know if you find any errorrs or inaccuracies.

Источник

RGB Color Codes Chart

Hover with cursor on color to get the hex and decimal color codes below:

RGB color space

RGB color space or RGB color system, constructs all the colors from the combination of the Red, Green and Blue colors.

The red, green and blue use 8 bits each, which have integer values from 0 to 255. This makes 256*256*256=16777216 possible colors.

Each pixel in the LED monitor displays colors this way, by combination of red, green and blue LEDs (light emitting diodes).

When the red pixel is set to 0, the LED is turned off. When the red pixel is set to 255, the LED is turned fully on.

Any value between them sets the LED to partial light emission.

RGB color format & calculation

RGB code has 24 bits format (bits 0..23):

RED[7:0]								GREEN[7:0]								BLUE[7:0]
23	16	15	8	7	0

RGB = (R*65536)+(G*256)+B , (when R is RED, G is GREEN and B is BLUE)

Calculation examples

White RGB Color

White RGB code = 255*65536+255*256+255 = #FFFFFF

Blue RGB Color

Blue RGB code = 0*65536+0*256+255 = #0000FF

Red RGB Color

Red RGB code = 255*65536+0*256+0 = #FF0000

Green RGB Color

Green RGB code = 0*65536+255*256+0 = #00FF00

Gray RGB Color

Gray RGB code = 128*65536+128*256+128 = #808080

Yellow RGB Color

Yellow RGB code = 255*65536+255*256+0 = #FFFF00

RGB color table

See also

• RGB to hex converter
• RGB to HSV converter
• RGB to HSL converter
• RGB to CMYK converter
• Color conversions
• Color wheel chart
• Screen color tester
• HTML color codes
• HTML character codes
• ASCII table
• Unicode characters
• Web safe colors
• Yellow color
• Gold color

Источник