导航|地址|刷新
<color> CSS type - CSS | MDN

!doctype html>
Skip to main content

Skip to search



MDN





HTML

HTML: Markup language

HTML reference
Elements

Global attributes

Attributes

See all…
HTML guides
Responsive images

HTML cheatsheet

Date & time formats

See all…
Markup languages
SVG

MathML

XML




CSS

CSS: Styling language

CSS reference
Properties

Selectors

At-rules

Values

See all…
CSS guides
Box model

Animations

Flexbox

Colors

See all…
Layout cookbook
Column layouts

Centering an element

Card component

See all…




JavaScriptJS

JavaScript: Scripting language

JS reference
Standard built-in objects

Expressions & operators

Statements & declarations

Functions

See all…
JS guides
Control flow & error handing

Loops and iteration

Working with objects

Using classes

See all…




Web APIs

Web APIs: Programming interfaces

Web API reference
File system API

Fetch API

Geolocation API

HTML DOM API

Push API

Service worker API

See all…
Web API guides
Using the Web animation API

Using the Fetch API

Working with the History API

Using the Web speech API

Using web workers




All

All web technology

Technologies
Accessibility

HTTP

URI

Web extensions

WebAssembly

WebDriver

See all…
Topics
Media

Performance

Privacy

Security

Progressive web apps




Learn

Learn web development

Frontend developer course
Getting started modules

Core modules

MDN Curriculum

Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module

CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module




Tools

Discover our tools


Playground

HTTP Observatory

Border-image generator

Border-radius generator

Box-shadow generator

Color format converter

Color mixer

Shape generator




About

Get to know MDN better


About MDN

Advertise with us

Community

MDN on GitHub




Blog





Toggle sidebar
Web

CSS

Reference

Values

<color>

Theme

OS default

Light

Dark



English (US)

Remember language Learn more

Deutsch

English (US)

Español

Français

日本語

한국어

Português (do Brasil)

Русский

中文 (简体)







<color> CSS type

Baseline Widely available *




This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Learn more

See full compatibility

?>

The <color>CSSdata type represents a color. A <color> may also include an alpha-channeltransparency value, indicating how the color should composite with its background.


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.




In this article

Syntax

Interpolation

Accessibility

Formal syntax

Examples

Specifications

Browser compatibility

See also



Syntax


css
/* Named colors */ rebeccapurple aliceblue /* RGB Hexadecimal */ #f09 #ff0099 /* RGB (Red, Green, Blue) */ rgb(255 0 153) rgb(255 0 153 / 80%) /* HSL (Hue, Saturation, Lightness) */ hsl(150 30% 60%) hsl(150 30% 60% / 80%) /* HWB (Hue, Whiteness, Blackness) */ hwb(12 50% 0%) hwb(194 0% 0% / 0.5) /* Lab (Lightness, A-axis, B-axis) */ lab(50% 40 59.5) lab(50% 40 59.5 / 0.5) /* LCH (Lightness, Chroma, Hue) */ lch(52.2% 72.2 50) lch(52.2% 72.2 50 / 0.5) /* Oklab (Lightness, A-axis, B-axis) */ oklab(59% 0.1 0.1) oklab(59% 0.1 0.1 / 0.5) /* OkLCh (Lightness, Chroma, Hue) */ oklch(60% 0.15 50) oklch(60% 0.15 50 / 0.5) /* Relative CSS colors */ /* HSL hue change */ hsl(from red 240deg s l) /* HWB alpha channel change */ hwb(from green h w b / 0.5) /* LCH lightness change */ lch(from blue calc(l + 20) c h) /* light-dark */ light-dark(white, black) light-dark(rgb(255 255 255), rgb(0 0 0))

A <color> value can be specified using one of the methods listed below:

By keywords: <named-color> (such as blue or pink), <system-color>, and currentColor.

By hexadecimal notations: <hex-color> (such as #ff0000).

By <color-function>, with parameters in a color space using functional notations:
sRGB color space: hsl(), hwb(), and rgb().

CIELAB color space: lab() and lch().

Oklab color space: oklab() and oklch().

Other color spaces: color(), device-cmyk().


By using relative color syntax to output a new color based on an existing color. Any of the above color functions can take an origin color preceded by the from keyword and followed by definitions of the channel values for the new output color.

By mixing two colors: color-mix().

By specifying a color that you want a contrasting color returned for: contrast-color().

By specifying two colors, using the first for light color-schemes and the second for dark color-schemes: light-dark().



currentColor keyword

The 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.


html
<div class="container"> The color of this text is blue. <div class="child"></div> This block is surrounded by a blue border. </div>


css
.container { color: blue; border: 1px dashed currentColor; } .child { background: currentColor; height: 9px; }







Missing color components

Each component of any CSS color functions - except for those using the legacy comma-separated syntax - can be specified as the keyword none to be a missing component.

Explicitly specifying missing components in color interpolation is useful for cases where you would like to interpolate some color components but not others. For all other purposes, a missing component will effectively have a zero value in an appropriate unit: 0, 0%, or 0deg. For example, the following colors are equivalent when used outside of interpolation:


css
/* These are equivalent */ color: oklab(50% none -0.25); color: oklab(50% 0 -0.25); /* These are equivalent */ background-color: hsl(none 100% 50%); background-color: hsl(0deg 100% 50%);



Interpolation

Color interpolation happens with gradients, transitions, and animations.

When interpolating <color> values, they are first converted to a given color space, and then each component of the computed values are interpolated linearly, with interpolation's speed being determined by the easing function in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through <color-interpolation-method> in some color-related functional notations.



Interpolation with missing components

Interpolating colors in the same space

When interpolating colors that are exactly in the interpolation color space, missing components from one color are replaced with existing values of the same components from the other color. For example, the following two expressions are equivalent:


css
color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30)) color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))


Note: If a component is missing from both colors, this component will be missing after the interpolation.


Interpolating colors from different spaces: analogous components

If any color to be interpolated is not in the interpolation color space, its missing components are transferred into the converted color based on analogous components of the same category as described in the following table:

Category	Analogous components
Reds	R, X
Greens	G, Y
Blues	B, Z
Lightness	L
Colorfulness	C, S
Hue	H
a	a
b	b

For example:

X (0.2) in color(xyz 0.2 0.1 0.6) is analogous to R (50%) in rgb(50% 70% 30%).

H (0deg) in hsl(0deg 100% 80%) is analogous to H (140) in oklch(80% 0.1 140).

Using OkLCh as the interpolation color space and the two colors below as an example:


css
lch(80% 30 none) color(display-p3 0.7 0.5 none)

The preprocessing procedure is:


Replace the missing components in both colors with a zero value:


css
lch(80% 30 0) color(display-p3 0.7 0.5 0)



Convert both colors into the interpolation color space:


css
oklch(83.915% 0.0902 0.28) oklch(63.612% 0.1522 78.748)



If any component of the converted colors is analogous to a missing component in the corresponding original color, reset it as a missing component:


css
oklch(83.915% 0.0902 none) oklch(63.612% 0.1522 78.748)



Replace any missing component with the same component from the other converted color:


css
oklch(83.915% 0.0902 78.748) oklch(63.612% 0.1522 78.748)




Accessibility

Some people have difficulty distinguishing colors. The WCAG 2.2 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.



Formal syntax
<color> =
<color-base>|
currentColor|
<system-color>|
<contrast-color()>|
<device-cmyk()>|
<light-dark-color>

<color-base> =
<hex-color>|
<color-function>|
<named-color>|
<color-mix()>|
transparent

<system-color> =
AccentColor|
AccentColorText|
ActiveText|
ButtonBorder|
ButtonFace|
ButtonText|
Canvas|
CanvasText|
Field|
FieldText|
GrayText|
Highlight|
HighlightText|
LinkText|
Mark|
MarkText|
SelectedItem|
SelectedItemText|
VisitedText|
<deprecated-color>

<contrast-color()> =
contrast-color([[<color>&&[tbd-fg|tbd-bg]&&<target-contrast>?]|[<color>&&[tbd-fg|tbd-bg]&&<target-contrast> , <color>#]])

<device-cmyk()> =
<legacy-device-cmyk-syntax>|
<modern-device-cmyk-syntax>

<light-dark-color> =
light-dark(<color> , <color>)

<color-function> =
<rgb()>|
<rgba()>|
<hsl()>|
<hsla()>|
<hwb()>|
<lab()>|
<lch()>|
<oklab()>|
<oklch()>|
<ictcp()>|
<jzazbz()>|
<jzczhz()>|
<alpha()>|
<color()>|
<hdr-color()>

<named-color> =
aliceblue|
antiquewhite|
aqua|
aquamarine|
azure|
beige|
bisque|
black|
blanchedalmond|
blue|
blueviolet|
brown|
burlywood|
cadetblue|
chartreuse|
chocolate|
coral|
cornflowerblue|
cornsilk|
crimson|
cyan|
darkblue|
darkcyan|
darkgoldenrod|
darkgray|
darkgreen|
darkgrey|
darkkhaki|
darkmagenta|
darkolivegreen|
darkorange|
darkorchid|
darkred|
darksalmon|
darkseagreen|
darkslateblue|
darkslategray|
darkslategrey|
darkturquoise|
darkviolet|
deeppink|
deepskyblue|
dimgray|
dimgrey|
dodgerblue|
firebrick|
floralwhite|
forestgreen|
fuchsia|
gainsboro|
ghostwhite|
gold|
goldenrod|
gray|
green|
greenyellow|
grey|
honeydew|
hotpink|
indianred|
indigo|
ivory|
khaki|
lavender|
lavenderblush|
lawngreen|
lemonchiffon|
lightblue|
lightcoral|
lightcyan|
lightgoldenrodyellow|
lightgray|
lightgreen|
lightgrey|
lightpink|
lightsalmon|
lightseagreen|
lightskyblue|
lightslategray|
lightslategrey|
lightsteelblue|
lightyellow|
lime|
limegreen|
linen|
magenta|
maroon|
mediumaquamarine|
mediumblue|
mediumorchid|
mediumpurple|
mediumseagreen|
mediumslateblue|
mediumspringgreen|
mediumturquoise|
mediumvioletred|
midnightblue|
mintcream|
mistyrose|
moccasin|
navajowhite|
navy|
oldlace|
olive|
olivedrab|
orange|
orangered|
orchid|
palegoldenrod|
palegreen|
paleturquoise|
palevioletred|
papayawhip|
peachpuff|
peru|
pink|
plum|
powderblue|
purple|
rebeccapurple|
red|
rosybrown|
royalblue|
saddlebrown|
salmon|
sandybrown|
seagreen|
seashell|
sienna|
silver|
skyblue|
slateblue|
slategray|
slategrey|
snow|
springgreen|
steelblue|
tan|
teal|
thistle|
tomato|
turquoise|
violet|
wheat|
white|
whitesmoke|
yellow|
yellowgreen|
transparent

<color-mix()> =
color-mix(<color-interpolation-method>? , [<color>&&<percentage [0,100]>?]#)

<deprecated-color> =
ActiveBorder|
ActiveCaption|
AppWorkspace|
Background|
ButtonHighlight|
ButtonShadow|
CaptionText|
InactiveBorder|
InactiveCaption|
InactiveCaptionText|
InfoBackground|
InfoText|
Menu|
MenuText|
Scrollbar|
ThreeDDarkShadow|
ThreeDFace|
ThreeDHighlight|
ThreeDLightShadow|
ThreeDShadow|
Window|
WindowFrame|
WindowText

<target-contrast> =
<wcag2>

<legacy-device-cmyk-syntax> =
device-cmyk(<number>#{4})

<modern-device-cmyk-syntax> =
device-cmyk(<cmyk-component>{4}[ / [<alpha-value>|none]]?)

<rgb()> =
<legacy-rgb-syntax>|
<modern-rgb-syntax>

<rgba()> =
<legacy-rgba-syntax>|
<modern-rgba-syntax>

<hsl()> =
<legacy-hsl-syntax>|
<modern-hsl-syntax>

<hsla()> =
<legacy-hsla-syntax>|
<modern-hsla-syntax>

<hwb()> =
hwb([from<color>]?[<hue>|none][<percentage>|<number>|none][<percentage>|<number>|none][ / [<alpha-value>|none]]?)

<lab()> =
lab([from<color>]?[<percentage>|<number>|none][<percentage>|<number>|none][<percentage>|<number>|none][ / [<alpha-value>|none]]?)

<lch()> =
lch([from<color>]?[<percentage>|<number>|none][<percentage>|<number>|none][<hue>|none][ / [<alpha-value>|none]]
…(内容过长已截断)

------
导航页 打开网址