<color>

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.

Kiểu dữ liệu <color> trong CSS đại diện cho một màu sắc. Một <color> cũng có thể bao gồm giá trị độ trong suốt alpha-channel, cho biết cách màu sắc nên kết hợp với nền của nó.

Note: Mặc dù các giá trị <color> được xác định chính xác, nhưng giao diện thực tế của chúng có thể biến đổi (đôi khi đáng kể) từ thiết bị này sang thiết bị khác. Điều này là vì hầu hết các thiết bị không được hiệu chỉnh và một số trình duyệt không hỗ trợ hồ sơ màu của thiết bị đầu ra.

Cú pháp

css

/* Màu được đặt tên */
rebeccapurple
aliceblue

/* Thập lục phân RGB */
#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)

/* Màu CSS tương đối */
/* Thay đổi hue HSL */
hsl(from red 240deg s l)
/* Thay đổi kênh alpha HWB */
hwb(from green h w b / 0.5)
/* Thay đổi lightness LCH */
lch(from blue calc(l + 20) c h)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

Một giá trị <color> có thể được chỉ định bằng một trong các phương pháp dưới đây:

Theo từ khóa: <named-color> (như blue hoặc pink), <system-color>, và currentColor.
Theo ký hiệu thập lục phân: <hex-color> (như #ff0000).
Theo <color-function>, với các tham số trong một color space sử dụng ký hiệu hàm:
- Không gian màu sRGB: hsl(), hwb() và rgb().
- Không gian màu CIELAB: lab() và lch().
- Không gian màu Oklab: oklab() và oklch().
- Các không gian màu khác: color(), device-cmyk().
Bằng cách sử dụng cú pháp màu tương đối để xuất màu mới dựa trên màu hiện có. Bất kỳ hàm màu nào ở trên đều có thể nhận màu gốc được đặt trước bởi từ khóa from và theo sau là các định nghĩa giá trị kênh cho màu đầu ra mới.
Bằng cách trộn hai màu: color-mix().
Bằng cách chỉ định màu mà bạn muốn trả về màu tương phản: contrast-color().
Bằng cách chỉ định hai màu, sử dụng màu đầu tiên cho các bộ màu sáng và màu thứ hai cho các bộ màu tối: light-dark().

Từ khóa `currentColor`

Từ khóa currentColor đại diện cho giá trị thuộc tính color của phần tử. Điều này cho phép bạn sử dụng giá trị color trên các thuộc tính không nhận nó theo mặc định.

Nếu currentColor được sử dụng làm giá trị của thuộc tính color, thì thay vào đó nó lấy giá trị từ giá trị được kế thừa của thuộc tính color.

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;
}

Các thành phần màu thiếu

Mỗi thành phần của bất kỳ hàm màu CSS nào - ngoại trừ những hàm sử dụng cú pháp dấu phẩy cũ - có thể được chỉ định là từ khóa none để là một thành phần thiếu.

Việc chỉ định rõ ràng các thành phần thiếu trong nội suy màu hữu ích cho các trường hợp bạn muốn nội suy một số thành phần màu nhưng không phải các thành phần khác. Cho tất cả các mục đích khác, một thành phần thiếu sẽ có giá trị bằng không trong đơn vị thích hợp: 0, 0%, hoặc 0deg. Ví dụ, các màu sau tương đương nhau khi được dùng ngoài nội suy:

css

/* Chúng tương đương */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/* Chúng tương đương */
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);

Nội suy

Nội suy màu xảy ra với gradient, transition và animation.

Khi nội suy các giá trị <color>, chúng trước tiên được chuyển đổi sang một không gian màu nhất định, và sau đó mỗi thành phần của giá trị tính toán được nội suy tuyến tính, với tốc độ nội suy được xác định bởi hàm easing trong transition và animation. Không gian màu nội suy mặc định là Oklab, nhưng có thể được ghi đè thông qua <color-interpolation-method> trong một số ký hiệu hàm liên quan đến màu.

Nội suy với các thành phần thiếu

Nội suy màu trong cùng không gian

Khi nội suy các màu ở đúng không gian màu nội suy, các thành phần thiếu từ một màu được thay thế bằng các giá trị hiện có của các thành phần tương tự từ màu kia. Ví dụ, hai biểu thức sau tương đương:

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: Nếu một thành phần thiếu trong cả hai màu, thành phần này sẽ bị thiếu sau khi nội suy.

Nội suy màu từ các không gian khác nhau: các thành phần tương đồng

Nếu bất kỳ màu nào cần nội suy không ở trong không gian màu nội suy, các thành phần thiếu của nó được chuyển vào màu đã được chuyển đổi dựa trên các thành phần tương đồng của cùng danh mục như được mô tả trong bảng sau:

Danh mục	Các thành phần tương đồng
Reds	`R`, `X`
Greens	`G`, `Y`
Blues	`B`, `Z`
Lightness	`L`
Colorfulness	`C`, `S`
Hue	`H`
a	`a`
b	`b`

Ví dụ:

X (0.2) trong color(xyz 0.2 0.1 0.6) tương đồng với R (50%) trong rgb(50% 70% 30%).
H (0deg) trong hsl(0deg 100% 80%) tương đồng với H (140) trong oklch(80% 0.1 140).

Sử dụng OkLCh làm không gian màu nội suy và hai màu dưới đây làm ví dụ:

css

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

Quy trình tiền xử lý là:

Thay thế các thành phần thiếu trong cả hai màu bằng giá trị bằng không:
css
```
lch(80% 30 0)
color(display-p3 0.7 0.5 0)
```
Chuyển đổi cả hai màu sang không gian màu nội suy:
css
```
oklch(83.915% 0.0902 0.28)
oklch(63.612% 0.1522 78.748)
```
Nếu bất kỳ thành phần nào của màu đã chuyển đổi tương đồng với thành phần thiếu trong màu gốc tương ứng, đặt lại nó là thành phần thiếu:
css
```
oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748)
```
Thay thế bất kỳ thành phần thiếu nào bằng thành phần tương tự từ màu đã chuyển đổi kia:
css
```
oklch(83.915% 0.0902 78.748)
oklch(63.612% 0.1522 78.748)
```

Khả năng tiếp cận

Một số người gặp khó khăn trong việc phân biệt màu sắc. Khuyến nghị WCAG 2.2 khuyến cáo mạnh mẽ không nên sử dụng màu sắc là phương tiện duy nhất để truyền đạt thông tin, hành động hoặc kết quả cụ thể. Xem màu sắc và độ tương phản màu để biết thêm thông tin.

Cú pháp chính thức

<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 ] ]? )  

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

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

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

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

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

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

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<hdr-color()> = 
  color-hdr( [ <color> && <number [0,∞]>? ]#{2} )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<wcag2> = 
  wcag2                                           |
  wcag2( [ <number> | [ aa | aaa ] && large? ] )  

<cmyk-component> = 
  <number>      |
  <percentage>  |
  none          

<alpha-value> = 
  <number>      |
  <percentage>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-rgba-syntax> = 
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )      

<modern-rgba-syntax> = 
  rgba( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

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

<legacy-hsla-syntax> = 
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )  

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

<hue> = 
  <number>  |
  <angle>   

<colorspace-params> = 
  <custom-params>          |
  <predefined-rgb-params>  |
  <xyz-params>             

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+  

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<predefined-rgb> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  rec2100-pq         |
  rec2100-hlg        |
  rec2100-linear

Ví dụ

Khám phá các giá trị màu

Trong ví dụ này, chúng ta cung cấp một <div> và ô nhập văn bản. Nhập một màu hợp lệ vào ô nhập làm cho <div> áp dụng màu đó, cho phép bạn kiểm tra các giá trị màu của mình.

HTML

html

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />

div {
  height: 200px;
  width: 200px;
}

const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "Invalid color value";
  }
});

Kết quả

Tạo màu sRGB bão hòa đầy đủ

Ví dụ này cho thấy các màu sRGB bão hòa đầy đủ trong không gian màu sRGB.

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
  background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
  background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
  background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
  background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
  background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
  background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
  background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
  background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
  background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
  background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
  background-color: hsl(330 100% 50%);
}

Kết quả

Tạo các sắc độ khác nhau của màu đỏ

Ví dụ này cho thấy các màu đỏ với các sắc độ khác nhau trong không gian màu sRGB.

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
  background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
  background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
  background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
  background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 100%);
  border: solid;
}

Kết quả

Tạo màu đỏ với độ bão hòa khác nhau

Ví dụ này cho thấy các màu đỏ với độ bão hòa khác nhau trong không gian màu sRGB.

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
  background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
  background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
  background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
  background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 50%);
}

Kết quả

Thông số kỹ thuật

Specification
CSS Color Module Level 4 # color-syntax

Khả năng tương thích trình duyệt

Xem thêm

opacity: thuộc tính xác định độ trong suốt ở cấp độ phần tử
<hue>: kiểu dữ liệu đại diện cho góc hue của màu
color, background-color, border-color, box-shadow, outline-color, text-shadow: các thuộc tính phổ biến dùng <color>
Hàm color()
Áp dụng màu cho các phần tử HTML bằng CSS
Sử dụng màu tương đối
Các hàm, gradient và hue mới trong màu CSS (Level 4) trên blog MDN (2023)

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content