The <color>
CSS data type represents a color in the sRGB color space. A <color>
may also include an alpha-channel transparency value, indicating how the color should composite with its background.
A <color>
can be defined in any of the following ways:
blue
or transparent
)rgb()
and rgba()
functional notations)hsl()
and hsla()
functional notations)Note: This article describes the <color>
data type in detail. To learn more about using color in HTML, see Applying color to HTML elements using CSS.
The <color>
data type is specified using one of the options listed below.
Note: Although <color>
values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices' color profiles.
Color keywords are case-insensitive identifiers that represent a specific color, such as red
, blue
, black
, or lightseagreen
. Although the names more or less describes their respective colors, they are essentially artificial, without a strict rationale behind the names used.
There are a few caveats to consider when using color keywords:
aqua
/ cyan
fuchsia
/ magenta
darkgray
/ darkgrey
darkslategray
/ darkslategrey
dimgray
/ dimgrey
lightgray
/ lightgrey
lightslategray
/ lightslategrey
gray
/ grey
slategray
/ slategrey
Note: The list of accepted keywords has undergone many changes during the evolution of CSS:
orange
keyword.rebeccapurple
keyword to honor web pioneer Eric Meyer.Specification | RGB equivalent | Keyword | RGB hex value | Live keyword |
---|---|---|---|---|
CSS Level 1 | black | #000000 | ||
silver | #c0c0c0 | |||
gray | #808080 | |||
white | #ffffff | |||
maroon | #800000 | |||
red | #ff0000 | |||
purple | #800080 | |||
fuchsia | #ff00ff | |||
green | #008000 | |||
lime | #00ff00 | |||
olive | #808000 | |||
yellow | #ffff00 | |||
navy | #000080 | |||
blue | #0000ff | |||
teal | #008080 | |||
aqua | #00ffff | |||
CSS Level 2 (Revision 1) | orange | #ffa500 | ||
CSS Color Module Level 3 | aliceblue | #f0f8ff | ||
antiquewhite | #faebd7 | |||
aquamarine | #7fffd4 | |||
azure | #f0ffff | |||
beige | #f5f5dc | |||
bisque | #ffe4c4 | |||
blanchedalmond | #ffebcd | |||
blueviolet | #8a2be2 | |||
brown | #a52a2a | |||
burlywood | #deb887 | |||
cadetblue | #5f9ea0 | |||
chartreuse | #7fff00 | |||
chocolate | #d2691e | |||
coral | #ff7f50 | |||
cornflowerblue | #6495ed | |||
cornsilk | #fff8dc | |||
crimson | #dc143c | |||
cyan (synonym of aqua ) | #00ffff | |||
darkblue | #00008b | |||
darkcyan | #008b8b | |||
darkgoldenrod | #b8860b | |||
darkgray | #a9a9a9 | |||
darkgreen | #006400 | |||
darkgrey | #a9a9a9 | |||
darkkhaki | #bdb76b | |||
darkmagenta | #8b008b | |||
darkolivegreen | #556b2f | |||
darkorange | #ff8c00 | |||
darkorchid | #9932cc | |||
darkred | #8b0000 | |||
darksalmon | #e9967a | |||
darkseagreen | #8fbc8f | |||
darkslateblue | #483d8b | |||
darkslategray | #2f4f4f | |||
darkslategrey | #2f4f4f | |||
darkturquoise | #00ced1 | |||
darkviolet | #9400d3 | |||
deeppink | #ff1493 | |||
deepskyblue | #00bfff | |||
dimgray | #696969 | |||
dimgrey | #696969 | |||
dodgerblue | #1e90ff | |||
firebrick | #b22222 | |||
floralwhite | #fffaf0 | |||
forestgreen | #228b22 | |||
gainsboro | #dcdcdc | |||
ghostwhite | #f8f8ff | |||
gold | #ffd700 | |||
goldenrod | #daa520 | |||
greenyellow | #adff2f | |||
grey | #808080 | |||
honeydew | #f0fff0 | |||
hotpink | #ff69b4 | |||
indianred | #cd5c5c | |||
indigo | #4b0082 | |||
ivory | #fffff0 | |||
khaki | #f0e68c | |||
lavender | #e6e6fa | |||
lavenderblush | #fff0f5 | |||
lawngreen | #7cfc00 | |||
lemonchiffon | #fffacd | |||
lightblue | #add8e6 | |||
lightcoral | #f08080 | |||
lightcyan | #e0ffff | |||
lightgoldenrodyellow | #fafad2 | |||
lightgray | #d3d3d3 | |||
lightgreen | #90ee90 | |||
lightgrey | #d3d3d3 | |||
lightpink | #ffb6c1 | |||
lightsalmon | #ffa07a | |||
lightseagreen | #20b2aa | |||
lightskyblue | #87cefa | |||
lightslategray | #778899 | |||
lightslategrey | #778899 | |||
lightsteelblue | #b0c4de | |||
lightyellow | #ffffe0 | |||
limegreen | #32cd32 | |||
linen | #faf0e6 | |||
magenta (synonym of fuchsia ) | #ff00ff | |||
mediumaquamarine | #66cdaa | |||
mediumblue | #0000cd | |||
mediumorchid | #ba55d3 | |||
mediumpurple | #9370db | |||
mediumseagreen | #3cb371 | |||
mediumslateblue | #7b68ee | |||
mediumspringgreen | #00fa9a | |||
mediumturquoise | #48d1cc | |||
mediumvioletred | #c71585 | |||
midnightblue | #191970 | |||
mintcream | #f5fffa | |||
mistyrose | #ffe4e1 | |||
moccasin | #ffe4b5 | |||
navajowhite | #ffdead | |||
oldlace | #fdf5e6 | |||
olivedrab | #6b8e23 | |||
orangered | #ff4500 | |||
orchid | #da70d6 | |||
palegoldenrod | #eee8aa | |||
palegreen | #98fb98 | |||
paleturquoise | #afeeee | |||
palevioletred | #db7093 | |||
papayawhip | #ffefd5 | |||
peachpuff | #ffdab9 | |||
peru | #cd853f | |||
pink | #ffc0cb | |||
plum | #dda0dd | |||
powderblue | #b0e0e6 | |||
rosybrown | #bc8f8f | |||
royalblue | #4169e1 | |||
saddlebrown | #8b4513 | |||
salmon | #fa8072 | |||
sandybrown | #f4a460 | |||
seagreen | #2e8b57 | |||
seashell | #fff5ee | |||
sienna | #a0522d | |||
skyblue | #87ceeb | |||
slateblue | #6a5acd | |||
slategray | #708090 | |||
slategrey | #708090 | |||
snow | #fffafa | |||
springgreen | #00ff7f | |||
steelblue | #4682b4 | |||
tan | #d2b48c | |||
thistle | #d8bfd8 | |||
tomato | #ff6347 | |||
turquoise | #40e0d0 | |||
violet | #ee82ee | |||
wheat | #f5deb3 | |||
whitesmoke | #f5f5f5 | |||
yellowgreen | #9acd32 | |||
CSS Color Module Level 4 | rebeccapurple | #663399 |
transparent
keywordThe transparent
keyword represents a fully transparent color. This makes the background behind the colored item completely visible. Technically, transparent
is a shortcut for rgba(0,0,0,0)
.
Compatibility note: To prevent unexpected behavior, such as in a <gradient>
, the current CSS spec states that transparent
should be calculated in the alpha-premultiplied color space. However, be aware that older browsers may treat it as black with an alpha value of 0
.
Historical note: transparent
wasn't a true color in CSS Level 2 (Revision 1). It was a special keyword that could be used instead of a regular <color>
value on two CSS properties: background
and border
. It was essentially added to allow developers to override an inherited solid color. With the advent of alpha channels in CSS Colors Level 3, transparent
was redefined as a true color. It can now be used wherever a <color>
value can be used.
currentColor
keywordThe currentColor
keyword represents the value of an element's color
property. This lets you use the color
value on properties that do not receive it by default.
If currentColor
is used as the value of the color
property, it instead takes its value from the inherited value of the color
property.
<div style="color:blue; border: 1px dashed currentColor;"> The color of this text is blue. <div style="background:currentColor; height:9px;"></div> This block is surrounded by a blue border. </div>
The RGB color model defines a given color according to its red, green, and blue components. An optional alpha component represents the color's transparency.
RGB colors can be expressed through both hexadecimal (prefixed with #
) and functional (rgb()
, rgba()
) notations.
Note: As of CSS Colors Level 4, rgba()
is an alias for rgb()
. In browsers that implement the Level 4 standard, they accept the same parameters and behave the same way.
#RRGGBB[AA]
R
(red), G
(green), B
(blue), and A
(alpha) are hexadecimal characters (0-9, A-F). A
is optional. For example, #ff0000
is equivalent to #ff0000ff
.#RGB[A]
R
(red), G
(green), B
(blue), and A
(alpha) are hexadecimal characters (0-9, A-F). A
is optional. The three-digit notation (#RGB
) is a shorter version of the six-digit form (#RRGGBB
). For example, #f09
is the same color as #ff0099
. Likewise, the four-digit RGB notation (#RGBA
) is a shorter version of the eight-digit form (#RRGGBBAA
). For example, #0f38
is the same color as #00ff3388
.rgb(R, G, B[, A])
or rgba(R, G, B, A)
R
(red), G
(green), and B
(blue) can be either <integer>
s or <percentage>
s, where the number 255
corresponds to 100%
. A
(alpha) can be a <number>
between 0
and 1
, or a <percentage>
, where the number 1
corresponds to 100%
(full opacity).rgb(R G B[ / A])
or rgba(R G B / A)
This example shows the many ways in which a single color can be created with the various RGB color syntaxes.
/* These syntax variations all specify the same color: a fully opaque hot pink. */ /* Hexadecimal syntax */ #f09 #F09 #ff0099 #FF0099 /* Functional syntax */ rgb(255,0,153) rgb(255, 0, 153) rgb(255, 0, 153.0) /* ERROR! Don't use fractions. */ rgb(100%,0%,60%) rgb(100%, 0%, 60%) rgb(100%, 0, 60%) /* ERROR! Don't mix integers and percentages. */ rgb(255 0 153) /* Hexadecimal syntax with alpha value */ #f09f #F09F #ff0099ff #FF0099FF /* Functional syntax with alpha value */ rgb(255, 0, 153, 1) rgb(255, 0, 153, 100%) /* Functional syntax with space-separated values */ rgb(255 0 153) rgb(255 0 153) /* Functional syntax with floats value */ rgb(255, 0, 153.6, 1) rgb(1e2, .5e1, .5e0, +.25e2%)
/* Hexadecimal syntax */ #3a30 /* 0% opaque green */ #3A3F /* full opaque green */ #33aa3300 /* 0% opaque green */ #33AA3388 /* 50% opaque green */ /* Functional syntax */ rgba(51, 170, 51, .1) /* 10% opaque green */ rgba(51, 170, 51, .4) /* 40% opaque green */ rgba(51, 170, 51, .7) /* 70% opaque green */ rgba(51, 170, 51, 1) /* full opaque green */ /* Functional syntax with space-separated values (Note: rgba() can be used as an alias here, with same behavior) */ rgb(51 170 51 / .4) /* 40% opaque green */ rgb(51 170 51 / 40%) /* 40% opaque green */ /* Functional syntax with floats value */ rgba(255, 0, 153.6, 1) rgba(1e2, .5e1, .5e0, +.25e2%)
The HSL color model defines a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
Many designers find HSL more intuitive than RGB, since it allows hue, saturation, and lightness to each be adjusted independently. HSL can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue).
HSL colors are expressed through the functional hsl()
and hsla()
notations.
Note: As of CSS Colors Level 4, hsla()
is an alias for hsl()
. In browsers that implement the Level 4 standard, they accept the same parameters and behave the same way.
hsl(H, S, L[, A])
or hsla(H, S, L, A)
H
(hue)is an <angle>
of the color circle given in deg
s, rad
s, grad
s, or turn
s in CSS Color Module Level 4. When written as a unitless <number>
, it is interpreted as degrees, as specified in CSS Color Module Level 3. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an <angle>
, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.S
(saturation) and L
(lightness) are percentages. 100%
saturation is completely saturated, while 0%
is completely unsaturated (gray). 100%
lightness is white, 0%
lightness is black, and 50%
lightness is “normal.”A
(alpha) can be a <number>
between 0
and 1
, or a <percentage>
, where the number 1
corresponds to 100%
(full opacity).hsl(H S L[ / A])
or hsla(H S L / A)
/* These examples all specify the same color: a lavender. */ hsl(270,60%,70%) hsl(270, 60%, 70%) hsl(270 60% 70%) hsl(270deg, 60%, 70%) hsl(4.71239rad, 60%, 70%) hsl(.75turn, 60%, 70%) /* These examples all specify the same color: a lavender that is 15% opaque. */ hsl(270, 60%, 50%, .15) hsl(270, 60%, 50%, 15%) hsl(270 60% 50% / .15) hsl(270 60% 50% / 15%)
Notation | Description | Live |
---|---|---|
hsl(0, 100%, 50%) | red | |
hsl(30, 100%, 50%) | orange | |
hsl(60, 100%, 50%) | yellow | |
hsl(90, 100%, 50%) | lime green | |
hsl(120, 100%, 50%) | green | |
hsl(150, 100%, 50%) | blue-green | |
hsl(180, 100%, 50%) | cyan | |
hsl(210, 100%, 50%) | sky blue | |
hsl(240, 100%, 50%) | blue | |
hsl(270, 100%, 50%) | purple | |
hsl(300, 100%, 50%) | magenta | |
hsl(330, 100%, 50%) | pink | |
hsl(360, 100%, 50%) | red |
Notation | Description | Live |
---|---|---|
hsl(120, 100%, 0%) | black | |
hsl(120, 100%, 20%) | ||
hsl(120, 100%, 40%) | ||
hsl(120, 100%, 60%) | ||
hsl(120, 100%, 80%) | ||
hsl(120, 100%, 100%) | white |
Notation | Description | Live |
---|---|---|
hsl(120, 100%, 50%) | green | |
hsl(120, 80%, 50%) | ||
hsl(120, 60%, 50%) | ||
hsl(120, 40%, 50%) | ||
hsl(120, 20%, 50%) | ||
hsl(120, 0%, 50%) | gray |
hsla(240, 100%, 50%, .05) /* 5% opaque blue */ hsla(240, 100%, 50%, .4) /* 40% opaque blue */ hsla(240, 100%, 50%, .7) /* 70% opaque blue */ hsla(240, 100%, 50%, 1) /* full opaque blue */ /* Whitespace syntax */ hsla(240 100% 50% / .05) /* 5% opaque blue */ /* Percentage value for alpha */ hsla(240 100% 50% / 5%) /* 5% opaque blue */
Not all system colors are supported on all systems. for use on public web pages.
CaptionText
as foreground color.ButtonText
foreground color.ButtonFace
or ThreeDFace
background color.ActiveCaption
background color.HighlightText
foreground color.Highlight
background color.InactiveCaptionText
foreground color.InactiveCaption
background color.InfoText
foreground color.InfoBackground
background color.MenuText
or -moz-MenuBarText
foreground color.Menu
background color.ButtonText
foreground color.WindowText
foreground color.Window
background color.ThreeDFace
or ButtonFace
when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText
foreground color.-moz-ButtonHoverFace background
color.-moz-CellHighlightText
foreground color. See also -moz-html-CellHighlight
.-moz-CellHighlight background
color. See also -moz-html-CellHighlightText
.-moz-ComboboxText
foreground color. In versions prior to 1.9.2, use -moz-Field
instead.-moz-Combobox
background color. In versions prior to 1.9.2, use -moz-FieldText
instead.-moz-DialogText
foreground color.-moz-Dialog
background color.-moz-FieldText
foreground color. In Gecko versions prior to 1.9, use -moz-Field
. See also -moz-OddTreeRow
.-moz-FieldText
foreground color.-moz-Field
, -moz-EvenTreeRow
, or -moz-OddTreeRow
background color.<select>
s. Should be used with the -moz-html-CellHighlightText
foreground color. Prior to Gecko 1.9, use -moz-CellHighlight
.<select>
s. Should be used with the -moz-html-CellHighlight
background color. Prior to Gecko 1.9, use -moz-CellHighlightText
.Highlight
. Should be used with the -moz-MenuHoverText
or -moz-MenuBarHoverText
foreground color.HighlightText
. Should be used with the -moz-MenuHover
background color.MenuText
. Should be used on top of Menu
background.-moz-MenuHoverText
. Should be used on top of -moz-MenuHover
background.-moz-FieldText
foreground color. In Gecko versions prior to 1.9, use -moz-Field
. See also -moz-EvenTreeRow
.-moz-appearance
: -moz-win-communications-toolbox;
.-moz-appearance
: -moz-win-media-toolbox
.In animations and gradients, <color>
values are interpolated on each of their red, green, and blue components. Each component is interpolated as a real, floating-point number. Note that interpolation of colors happens in the alpha-premultiplied sRGBA color space to prevent unexpected gray colors from appearing. In animations, the interpolation's speed is determined by the timing function.
Some people have difficulty distinguishing colors. The WCAG 2.0 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See Color and color contrast for more information.
Specification | Status | Comment |
---|---|---|
CSS Color Module Level 4 The definition of '<color>' in that specification. | Working Draft | Adds rebeccapurple , four- (#RGBA ) and eight-digit (#RRGGBBAA ) hexadecimal notations, rgba() and hsla() as aliases of rgb() and hsl() (both with identical parameter syntax), space-separated function parameters as an alternative to commas, percentages for alpha values, and angles for the hue component in hsl() colors. |
CSS Color Module Level 3 The definition of '<color>' in that specification. | Recommendation | Deprecates system colors. Adds SVG colors and rgba() , hsl() , and hsla() functional notations. |
CSS Level 2 (Revision 1) The definition of '<color>' in that specification. | Recommendation | Adds the orange keyword and system colors. |
CSS Level 1 The definition of '<color>' in that specification. | Recommendation | Initial definition. Includes 16 basic color keywords. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | Yes | Yes | Yes |
Keyword color values | 1 | 12 | 1 | 3
|
3.5 | 1 |
RGB hexadecimal notation (#RRGGBB , #RGB ) |
1 | 12 | 1 | 3 | 3.5 | 1 |
RGB functional notation (rgb() ) |
1 | 12 | 1 | 4 | 3.5 | 1 |
HSL color values (hsl() ) |
1 | 12 | 1 | 9 | 9.5 | 3.1 |
Alpha color values (rgba() , hsla() ) |
1 | 12 | 3 | 9 | 10 | 3.1 |
currentcolor |
1 | ? | 1.5 | 9 | 9.5 | 4 |
transparent |
1 | ? | 3 | 9 | 10 | 3.1 |
rebeccapurple |
38 | ? | 33 | 11 | 25 | Yes |
RGBA hexadecimal notation (#RRGGBBAA , #RGBA ) |
62
|
No | 49 | ? | 39
|
9.1 |
Space-separated functional color notations | 65 | ? | 52 | ? | 52 | ? |
Allow floats in rgb() and rgba()
|
66 | ? | 52 | ? | 53 | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | 18 | 12 | 4 | Yes | Yes | Yes |
Keyword color values | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
RGB hexadecimal notation (#RRGGBB , #RGB ) |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
RGB functional notation (rgb() ) |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
HSL color values (hsl() ) |
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
Alpha color values (rgba() , hsla() ) |
Yes | Yes | Yes | 4 | Yes | Yes | Yes |
currentcolor |
? | ? | ? | ? | ? | ? | ? |
transparent |
? | ? | ? | ? | ? | ? | ? |
rebeccapurple |
Yes | ? | ? | 33 | ? | 8 | ? |
RGBA hexadecimal notation (#RRGGBBAA , #RGBA ) |
? | ? | No | ? | No | ? | ? |
Space-separated functional color notations | 65 | 65 | ? | 52 | 52 | ? | ? |
Allow floats in rgb() and rgba()
|
66 | 66 | ? | 52 | 53 | ? | ? |
opacity
property lets you define transparency at the element level.color
, background-color
, border-color
, box-shadow
, outline-color
, text-shadow
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/currentcolor