This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

<color>

Summary

The <color> CSS data type allows for various ways of specifying a color, some of which also specify opacity.

Syntax

Several different ways are available to specify simple color values:

  • Keyword values specify common color names such as yellow, black, or transparent. (See the table below.)

  • Hexadecimal values specify opaque colors in the range of #000000 (black) to #ffffff (white), where each pair of characters correspond to red, green, and blue.

  • An rgb() function specifies red, green and blue values either as integers between 0 and 255 (corresponding to the hex values above), or as percentages. For example, rgb(256,0,0) and rgb(100%,0%,0%) both correspond to red.

  • An hsl() function specifies hue, saturation, and luminance values. Hue values are specified as an angle within the color wheel relative to red’, and numeric values default to degrees. Saturation specifies vividness as a percentage, with****0%specifying various shades of gray. Luminence specifies brightness, with0%and100% corresponding to black and white, and 50% appearing as a more vivid hue. For example, hsl(0%,100%,50%) also corresponds to red.

The following variations on the above allow you to incorporate an alpha channel specifying transparencies:

  • An rgba() function specifies red, green and blue values as described above, along with opacity expressed in decimal terms between 0 and 1. For example, rgba(100%,0%,0%,0.5) specifies a semi-transparent red, which would appear as pink if layered over a white background.

  • An hsla() function specifies hue, saturation, and luminance as described above, but with an additional alpha channel. For example, hsla(0%,100%,50%,0.5) specifies the same semi-transparent red as the rgba() example above.

The recently introduced transparent color name specifies a full transparency.

Color Keywords

.

Example Name Hex RGB HSL
Example
aliceblue #f0f8ff rgb(94%,97%,100%) hsl(208,100%,97%)
Non-visible-example
antiquewhite #faebd7 rgb(98%,92%,84%) hsl(34,78%,91%)
Non-visible-example
aqua #00ffff rgb(0%,100%,100%) hsl(180,100%,50%)
Non-visible-example
aquamarine #7fffd4 rgb(50%,100%,83%) hsl(160,100%,75%)
Non-visible-example
azure #f0ffff rgb(94%,100%,100%) hsl(180,100%,97%)
Non-visible-example
beige #f5f5dc rgb(96%,96%,86%) hsl(60,56%,91%)
Non-visible-example
bisque #ffe4c4 rgb(100%,89%,77%) hsl(33,100%,88%)
Non-visible-example
black #000000 rgb(0%,0%,0%) hsl(0,0%,0%)
Non-visible-example
blanchedalmond #ffebcd rgb(100%,92%,80%) hsl(36,100%,90%)
Non-visible-example
blue #0000ff rgb(0%,0%,100%) hsl(240,100%,50%)
Non-visible-example
blueviolet #8a2be2 rgb(54%,17%,89%) hsl(271,76%,53%)
Non-visible-example
brown #a52a2a rgb(65%,16%,16%) hsl(0,59%,41%)
Non-visible-example
burlywood #deb887 rgb(87%,72%,53%) hsl(34,57%,70%)
Non-visible-example
cadetblue #5f9ea0 rgb(37%,62%,63%) hsl(182,25%,50%)
Non-visible-example
chartreuse #7fff00 rgb(50%,100%,0%) hsl(90,100%,50%)
Non-visible-example
chocolate #d2691e rgb(82%,41%,12%) hsl(25,75%,47%)
Non-visible-example
coral #ff7f50 rgb(100%,50%,31%) hsl(16,100%,66%)
Non-visible-example
cornflowerblue #6495ed rgb(39%,58%,93%) hsl(219,79%,66%)
Non-visible-example
cornsilk #fff8dc rgb(100%,97%,86%) hsl(48,100%,93%)
Non-visible-example
crimson #dc143c rgb(86%,8%,24%) hsl(348,83%,47%)
Non-visible-example
cyan #00ffff rgb(0%,100%,100%) hsl(180,100%,50%)
Non-visible-example
darkblue #00008b rgb(0%,0%,55%) hsl(240,100%,27%)
Non-visible-example
darkcyan #008b8b rgb(0%,55%,55%) hsl(180,100%,27%)
Non-visible-example
darkgoldenrod #b8860b rgb(72%,53%,4%) hsl(43,89%,38%)
Non-visible-example
darkgray #a9a9a9 rgb(66%,66%,66%) hsl(0,0%,66%)
Non-visible-example
darkgreen #006400 rgb(0%,39%,0%) hsl(120,100%,20%)
Non-visible-example
darkgrey #a9a9a9 rgb(66%,66%,66%) hsl(0,0%,66%)
Non-visible-example
darkkhaki #bdb76b rgb(74%,72%,42%) hsl(56,38%,58%)
Non-visible-example
darkmagenta #8b008b rgb(55%,0%,55%) hsl(300,100%,27%)
Non-visible-example
darkolivegreen #556b2f rgb(33%,42%,18%) hsl(82,39%,30%)
Non-visible-example
darkorange #ff8c00 rgb(100%,55%,0%) hsl(33,100%,50%)
Non-visible-example
darkorchid #9932cc rgb(60%,20%,80%) hsl(280,61%,50%)
Non-visible-example
darkred #8b0000 rgb(55%,0%,0%) hsl(0,100%,27%)
Non-visible-example
darksalmon #e9967a rgb(91%,59%,48%) hsl(15,72%,70%)
Non-visible-example
darkseagreen #8fbc8f rgb(56%,74%,56%) hsl(120,25%,65%)
Non-visible-example
darkslateblue #483d8b rgb(28%,24%,55%) hsl(248,39%,39%)
Non-visible-example
darkslategray #2f4f4f rgb(18%,31%,31%) hsl(180,25%,25%)
Non-visible-example
darkslategrey #2f4f4f rgb(18%,31%,31%) hsl(180,25%,25%)
Non-visible-example
darkturquoise #00ced1 rgb(0%,81%,82%) hsl(181,100%,41%)
Non-visible-example
darkviolet #9400d3 rgb(58%,0%,83%) hsl(282,100%,41%)
Non-visible-example
deeppink #ff1493 rgb(100%,8%,58%) hsl(328,100%,54%)
Non-visible-example
deepskyblue #00bfff rgb(0%,75%,100%) hsl(195,100%,50%)
Non-visible-example
dimgray #696969 rgb(41%,41%,41%) hsl(0,0%,41%)
Non-visible-example
dimgrey #696969 rgb(41%,41%,41%) hsl(0,0%,41%)
Non-visible-example
dodgerblue #1e90ff rgb(12%,56%,100%) hsl(210,100%,56%)
Non-visible-example
firebrick #b22222 rgb(70%,13%,13%) hsl(0,68%,42%)
Non-visible-example
floralwhite #fffaf0 rgb(100%,98%,94%) hsl(40,100%,97%)
Non-visible-example
forestgreen #228b22 rgb(13%,55%,13%) hsl(120,61%,34%)
Non-visible-example
fuchsia #ff00ff rgb(100%,0%,100%) hsl(300,100%,50%)
Non-visible-example
gainsboro #dcdcdc rgb(86%,86%,86%) hsl(0,0%,86%)
Non-visible-example
ghostwhite #f8f8ff rgb(97%,97%,100%) hsl(240,100%,99%)
Non-visible-example
gold #ffd700 rgb(100%,84%,0%) hsl(51,100%,50%)
Non-visible-example
goldenrod #daa520 rgb(85%,65%,13%) hsl(43,74%,49%)
Non-visible-example
gray #808080 rgb(50%,50%,50%) hsl(0,0%,50%)
Non-visible-example
green #008000 rgb(0%,50%,0%) hsl(120,100%,25%)
Non-visible-example
greenyellow #adff2f rgb(68%,100%,18%) hsl(84,100%,59%)
Non-visible-example
grey #808080 rgb(50%,50%,50%) hsl(0,0%,50%)
Non-visible-example
honeydew #f0fff0 rgb(94%,100%,94%) hsl(120,100%,97%)
Non-visible-example
hotpink #ff69b4 rgb(100%,41%,71%) hsl(330,100%,71%)
Non-visible-example
indianred #cd5c5c rgb(80%,36%,36%) hsl(0,53%,58%)
Non-visible-example
indigo #4b0082 rgb(29%,0%,51%) hsl(275,100%,25%)
Non-visible-example
ivory #fffff0 rgb(100%,100%,94%) hsl(60,100%,97%)
Non-visible-example
khaki #f0e68c rgb(94%,90%,55%) hsl(54,77%,75%)
Non-visible-example
lavender #e6e6fa rgb(90%,90%,98%) hsl(240,67%,94%)
Non-visible-example
lavenderblush #fff0f5 rgb(100%,94%,96%) hsl(340,100%,97%)
Non-visible-example
lawngreen #7cfc00 rgb(49%,99%,0%) hsl(90,100%,49%)
Non-visible-example
lemonchiffon #fffacd rgb(100%,98%,80%) hsl(54,100%,90%)
Non-visible-example
lightblue #add8e6 rgb(68%,85%,90%) hsl(195,53%,79%)
Non-visible-example
lightcoral #f08080 rgb(94%,50%,50%) hsl(0,79%,72%)
Non-visible-example
lightcyan #e0ffff rgb(88%,100%,100%) hsl(180,100%,94%)
Non-visible-example
lightgoldenrodyellow #fafad2 rgb(98%,98%,82%) hsl(60,80%,90%)
Non-visible-example
lightgray #d3d3d3 rgb(83%,83%,83%) hsl(0,0%,83%)
Non-visible-example
lightgreen #90ee90 rgb(56%,93%,56%) hsl(120,73%,75%)
Non-visible-example
lightgrey #d3d3d3 rgb(83%,83%,83%) hsl(0,0%,83%)
Non-visible-example
lightpink #ffb6c1 rgb(100%,71%,76%) hsl(351,100%,86%)
Non-visible-example
lightsalmon #ffa07a rgb(100%,63%,48%) hsl(17,100%,74%)
Non-visible-example
lightseagreen #20b2aa rgb(13%,70%,67%) hsl(177,70%,41%)
Non-visible-example
lightskyblue #87cefa rgb(53%,81%,98%) hsl(203,92%,75%)
Non-visible-example
lightslategray #778899 rgb(47%,53%,60%) hsl(210,14%,53%)
Non-visible-example
lightslategrey #778899 rgb(47%,53%,60%) hsl(210,14%,53%)
Non-visible-example
lightsteelblue #b0c4de rgb(69%,77%,87%) hsl(214,41%,78%)
Non-visible-example
lightyellow #ffffe0 rgb(100%,100%,88%) hsl(60,100%,94%)
Non-visible-example
lime #00ff00 rgb(0%,100%,0%) hsl(120,100%,50%)
Non-visible-example
limegreen #32cd32 rgb(20%,80%,20%) hsl(120,61%,50%)
Non-visible-example
linen #faf0e6 rgb(98%,94%,90%) hsl(30,67%,94%)
Non-visible-example
magenta #ff00ff rgb(100%,0%,100%) hsl(300,100%,50%)
Non-visible-example
maroon #800000 rgb(50%,0%,0%) hsl(0,100%,25%)
Non-visible-example
mediumaquamarine #66cdaa rgb(40%,80%,67%) hsl(160,51%,60%)
Non-visible-example
mediumblue #0000cd rgb(0%,0%,80%) hsl(240,100%,40%)
Non-visible-example
mediumorchid #ba55d3 rgb(73%,33%,83%) hsl(288,59%,58%)
Non-visible-example
mediumpurple #9370db rgb(58%,44%,86%) hsl(260,60%,65%)
Non-visible-example
mediumseagreen #3cb371 rgb(24%,70%,44%) hsl(147,50%,47%)
Non-visible-example
mediumslateblue #7b68ee rgb(48%,41%,93%) hsl(249,80%,67%)
Non-visible-example
mediumspringgreen #00fa9a rgb(0%,98%,60%) hsl(157,100%,49%)
Non-visible-example
mediumturquoise #48d1cc rgb(28%,82%,80%) hsl(178,60%,55%)
Non-visible-example
mediumvioletred #c71585 rgb(78%,8%,52%) hsl(322,81%,43%)
Non-visible-example
midnightblue #191970 rgb(10%,10%,44%) hsl(240,64%,27%)
Non-visible-example
mintcream #f5fffa rgb(96%,100%,98%) hsl(150,100%,98%)
Non-visible-example
mistyrose #ffe4e1 rgb(100%,89%,88%) hsl(6,100%,94%)
Non-visible-example
moccasin #ffe4b5 rgb(100%,89%,71%) hsl(38,100%,85%)
Non-visible-example
navajowhite #ffdead rgb(100%,87%,68%) hsl(36,100%,84%)
Non-visible-example
navy #000080 rgb(0%,0%,50%) hsl(240,100%,25%)
Non-visible-example
oldlace #fdf5e6 rgb(99%,96%,90%) hsl(39,85%,95%)
Non-visible-example
olive #808000 rgb(50%,50%,0%) hsl(60,100%,25%)
Non-visible-example
olivedrab #6b8e23 rgb(42%,56%,14%) hsl(80,60%,35%)
Non-visible-example
orange #ffa500 rgb(100%,65%,0%) hsl(39,100%,50%)
Non-visible-example
orangered #ff4500 rgb(100%,27%,0%) hsl(16,100%,50%)
Non-visible-example
orchid #da70d6 rgb(85%,44%,84%) hsl(302,59%,65%)
Non-visible-example
palegoldenrod #eee8aa rgb(93%,91%,67%) hsl(55,67%,80%)
Non-visible-example
palegreen #98fb98 rgb(60%,98%,60%) hsl(120,93%,79%)
Non-visible-example
paleturquoise #afeeee rgb(69%,93%,93%) hsl(180,65%,81%)
Non-visible-example
palevioletred #db7093 rgb(86%,44%,58%) hsl(340,60%,65%)
Non-visible-example
papayawhip #ffefd5 rgb(100%,94%,84%) hsl(37,100%,92%)
Non-visible-example
peachpuff #ffdab9 rgb(100%,85%,73%) hsl(28,100%,86%)
Non-visible-example
peru #cd853f rgb(80%,52%,25%) hsl(30,59%,53%)
Non-visible-example
pink #ffc0cb rgb(100%,75%,80%) hsl(350,100%,88%)
Non-visible-example
plum #dda0dd rgb(87%,63%,87%) hsl(300,47%,75%)
Non-visible-example
powderblue #b0e0e6 rgb(69%,88%,90%) hsl(187,52%,80%)
Non-visible-example
purple #800080 rgb(50%,0%,50%) hsl(300,100%,25%)
Non-visible-example
red #ff0000 rgb(100%,0%,0%) hsl(0,100%,50%)
Non-visible-example
rosybrown #bc8f8f rgb(74%,56%,56%) hsl(0,25%,65%)
Non-visible-example
royalblue #4169e1 rgb(25%,41%,88%) hsl(225,73%,57%)
Non-visible-example
saddlebrown #8b4513 rgb(55%,27%,7%) hsl(25,76%,31%)
Non-visible-example
salmon #fa8072 rgb(98%,50%,45%) hsl(6,93%,71%)
Non-visible-example
sandybrown #f4a460 rgb(96%,64%,38%) hsl(28,87%,67%)
Non-visible-example
seagreen #2e8b57 rgb(18%,55%,34%) hsl(146,50%,36%)
Non-visible-example
seashell #fff5ee rgb(100%,96%,93%) hsl(25,100%,97%)
Non-visible-example
sienna #a0522d rgb(63%,32%,18%) hsl(19,56%,40%)
Non-visible-example
silver #c0c0c0 rgb(75%,75%,75%) hsl(0,0%,75%)
Non-visible-example
skyblue #87ceeb rgb(53%,81%,92%) hsl(197,71%,73%)
Non-visible-example
slateblue #6a5acd rgb(42%,35%,80%) hsl(248,53%,58%)
Non-visible-example
slategray #708090 rgb(44%,50%,56%) hsl(210,13%,50%)
Non-visible-example
slategrey #708090 rgb(44%,50%,56%) hsl(210,13%,50%)
Non-visible-example
snow #fffafa rgb(100%,98%,98%) hsl(0,100%,99%)
Non-visible-example
springgreen #00ff7f rgb(0%,100%,50%) hsl(150,100%,50%)
Non-visible-example
steelblue #4682b4 rgb(27%,51%,71%) hsl(207,44%,49%)
Non-visible-example
tan #d2b48c rgb(82%,71%,55%) hsl(34,44%,69%)
Non-visible-example
teal #008080 rgb(0%,50%,50%) hsl(180,100%,25%)
Non-visible-example
thistle #d8bfd8 rgb(85%,75%,85%) hsl(300,24%,80%)
Non-visible-example
tomato #ff6347 rgb(100%,39%,28%) hsl(9,100%,64%)
Non-visible-example
turquoise #40e0d0 rgb(25%,88%,82%) hsl(174,72%,56%)
Non-visible-example
violet #ee82ee rgb(93%,51%,93%) hsl(300,76%,72%)
Non-visible-example
wheat #f5deb3 rgb(96%,87%,70%) hsl(39,77%,83%)
Non-visible-example
white #ffffff rgb(100%,100%,100%) hsl(0,0%,100%)
Non-visible-example
whitesmoke #f5f5f5 rgb(96%,96%,96%) hsl(0,0%,96%)
Non-visible-example
yellow #ffff00 rgb(100%,100%,0%) hsl(60,100%,50%)
Non-visible-example
yellowgreen #9acd32 rgb(60%,80%,20%) hsl(80,61%,50%)

Examples

aside {
    color: white;              /* white letterforms */
    text-shadow: 0 0 4px red;  /* red backlight effect */
    text-shadow: 0 0 4px rgb(100%, 0%, 0%);  /* same */
    background-color: #777777; /* gray background */
}
.semitrans {
    /* elements behind this show through */
    background-color: rgba(50%, 50%, 50%, 0.5);
}

Related specifications

CSS Values and Units Module Level 3
Candidate Recommendation
CSS Color Module Level 3
Recommendation
CSS 2.1
Recommendation

See also

Other articles