<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)
andrgb(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 thergba()
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