search

Hướng dẫn what css function is called for rgb colors? - hàm css nào được gọi cho màu rgb?

1 năms trước
Trả lời: 0
Lượt xem: 138

Ký hiệu chức năng 

<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>
1 thể hiện một màu theo các thành phần màu đỏ, xanh lá cây và xanh lam của nó. Một thành phần alpha tùy chọn thể hiện độ trong suốt của màu.
<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>
1 functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.

Show

Thử nó

Lưu ý: Màu sắc CSS Cấp 4 đã thực hiện một số thay đổi đối với 

<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>
1. Trong các trình duyệt hỗ trợ tiêu chuẩn 
<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>
3 là bí danh cho 
<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>
1, họ chấp nhận các tham số tương tự và hoạt động theo cùng một cách. CSS Colors Level 4 made some changes to 
<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>
1. In browsers that support the standard 
<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>
3 is an alias for 
<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>
1, they accept the same parameters and behave the same way.

Thông số kỹ thuật cấp 4 cũng cho phép phân tách không gian ngoài các giá trị được phân tách bằng dấu phẩy.

Cú pháp

rgb(255, 255, 255) /* white */
rgb(255, 255, 255,.5) /* white with 50% opacity */
rgb(255 255 255) /* CSS Colors 4 space-separated values */
rgb(255 255 255 / .5); /* white with 50% opacity, using CSS Colors 4 space-separated values */

Giá trị

Ký hiệu chức năng: 

<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>
5

<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>
6 (màu đỏ), 
<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>
7 (màu xanh lá cây) và 
<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>
8 (màu xanh) có thể là 
<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>
9S hoặc 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
0s, trong đó số 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
1 tương ứng với 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2. 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
3 (alpha) có thể là 
<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>
9 giữa 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
5 và 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
6 hoặc 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
0, trong đó số 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
6 tương ứng với 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
 color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
 <number> |
 <percentage>
<hue> = 
 <number> |
 <angle>
<colorspace-params> = 
 <predefined-rgb-params> |
 <xyz-params>
<predefined-rgb-params> = 
 <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
 <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
 srgb |
 srgb-linear |
 display-p3 |
 a98-rgb |
 prophoto-rgb |
 rec2020
<xyz-space> = 
 xyz |
 xyz-d50 |
 xyz-d65
2 (độ mờ hoàn toàn).

Ký hiệu chức năng: 
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
0

Màu CSS Cấp 4 bổ sung hỗ trợ cho các giá trị phân tách không gian trong ký hiệu chức năng.

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Kiểu dữ liệu 

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
1 CSS đại diện cho một màu. A 
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
1 cũng có thể bao gồm giá trị độ trong suốt kênh alpha, cho biết làm thế nào màu nên tổng hợp với nền của nó.
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
1 CSS data type represents a color. A 
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
1 may also include an alpha-channel transparency value, indicating how the color should composite with its background.

A 

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
1 có thể được xác định theo bất kỳ cách nào sau đây:

  • Sử dụng từ khóa (chẳng hạn như 
    <div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
    4 hoặc 
    <div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
    5). Tất cả các từ khóa hiện có chỉ định một màu trong không gian màu SRGB.
  • Sử dụng hệ tọa độ khối RGB (thông qua các ký hiệu chức năng #-hexadecimal hoặc 
    <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>
    1 và 
    <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>
    3). Chúng luôn chỉ định một màu trong không gian màu SRGB.
  • Sử dụng hệ thống tọa độ hình trụ HSL (thông qua các ký hiệu chức năng 
    <div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
    8 và 
    <div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
    9). Chúng luôn chỉ định một màu trong không gian màu SRGB.
  • Sử dụng hệ thống tọa độ hình trụ HWB (thông qua ký hiệu chức năng 
    div {
  width: 100%;
  height: 200px;
}
    0). Chúng luôn chỉ định một màu trong không gian màu SRGB.
  • Sử dụng hệ tọa độ hình trụ LCH, thông qua ký hiệu chức năng 
    div {
  width: 100%;
  height: 200px;
}
    1. Điều này có thể chỉ định bất kỳ màu có thể nhìn thấy.
  • Sử dụng hệ tọa độ phòng thí nghiệm, thông qua ký hiệu chức năng 
    div {
  width: 100%;
  height: 200px;
}
    2. Điều này có thể chỉ định bất kỳ màu có thể nhìn thấy.
  • Sử dụng ký hiệu chức năng 
    div {
  width: 100%;
  height: 200px;
}
    3, để chỉ định màu trong nhiều không gian màu được xác định trước hoặc tùy chỉnh.

Cú pháp

Kiểu dữ liệu 

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
1 được chỉ định bằng một trong các tùy chọn được liệt kê dưới đây.

Lưu ý: Mặc dù các giá trị 

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
1 được xác định chính xác, nhưng ngoại hình thực tế của chúng có thể thay đổi (đôi khi đáng kể) từ thiết bị này sang thiết bị khác. Điều này là do 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ợ cấu hình màu của thiết bị đầu ra. Although 
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
1 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.

Màu sắc được đặt tên

Màu sắc được đặt tên là các định danh không nhạy cảm trường hợp đại diện cho một màu cụ thể, chẳng hạn như 

div {
  width: 100%;
  height: 200px;
}
6, 
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
4, 
div {
  width: 100%;
  height: 200px;
}
8 hoặc 
div {
  width: 100%;
  height: 200px;
}
9. Mặc dù các tên ít nhiều mô tả màu sắc tương ứng của chúng, nhưng về cơ bản chúng là nhân tạo, không có lý do nghiêm ngặt đằng sau các tên được sử dụng.

Danh sách đầy đủ các từ khóa như vậy có sẵn ở đây.

Từ khóa hiện tại

Từ khóa 

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

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

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});
0 đại diện cho giá trị của thuộc tính 
const inputElem = document.querySelector('input');
const divElem = document.querySelector('div');

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

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});
1 của một phần tử. Điều này cho phép bạn sử dụng giá trị 
const inputElem = document.querySelector('input');
const divElem = document.querySelector('div');

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

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});
1 trên các thuộc tính không nhận được theo mặc định.

Nếu 

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

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

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});
0 được sử dụng làm giá trị của thuộc tính 
const inputElem = document.querySelector('input');
const divElem = document.querySelector('div');

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

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});
1, thay vào đó, nó lấy giá trị của nó từ giá trị di truyền của thuộc tính 
const inputElem = document.querySelector('input');
const divElem = document.querySelector('div');

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

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});
1.

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

Mô hình màu RGB

Mô hình màu RGB xác định một màu nhất định trong không gian màu SRGB theo các thành phần màu đỏ, xanh lá cây và xanh dương của nó. Một thành phần alpha tùy chọn thể hiện độ trong suốt của màu.

Màu sắc RGB có thể được thể hiện thông qua cả hai hình lục giác (tiền tố với các ký hiệu 

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

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

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});
6) và chức năng (
<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>
1, 
<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>
3).

Ký hiệu thập lục phân: 
const inputElem = document.querySelector('input');
const divElem = document.querySelector('div');

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

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});
9 hoặc ____60

<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>
6 (màu đỏ), 
<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>
7 (màu xanh lá cây), 
<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>
8 (màu xanh lam) và 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
3 (alpha) là các ký tự hexadecimal (0 Nott9, A, F). 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
3 là tùy chọn. Ví dụ, 
/* 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)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* ERROR! Don't mix numbers 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, .5)
rgb(255, 0, 153, 0.5)
rgb(255, 0, 153, 100%)

/* Whitespace syntax */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* Functional syntax with floats value */
rgb(255, 0, 153.6, 1)
rgb(2.55e2, 0e0, 1.53e2, 1e2%)
6 tương đương với 
/* 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)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* ERROR! Don't mix numbers 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, .5)
rgb(255, 0, 153, 0.5)
rgb(255, 0, 153, 100%)

/* Whitespace syntax */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* Functional syntax with floats value */
rgb(255, 0, 153.6, 1)
rgb(2.55e2, 0e0, 1.53e2, 1e2%)
7. Ký hiệu ba chữ số (
/* 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)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* ERROR! Don't mix numbers 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, .5)
rgb(255, 0, 153, 0.5)
rgb(255, 0, 153, 100%)

/* Whitespace syntax */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* Functional syntax with floats value */
rgb(255, 0, 153.6, 1)
rgb(2.55e2, 0e0, 1.53e2, 1e2%)
8) là phiên bản ngắn hơn của dạng sáu chữ số (
/* 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)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* ERROR! Don't mix numbers 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, .5)
rgb(255, 0, 153, 0.5)
rgb(255, 0, 153, 100%)

/* Whitespace syntax */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* Functional syntax with floats value */
rgb(255, 0, 153.6, 1)
rgb(2.55e2, 0e0, 1.53e2, 1e2%)
9). Ví dụ, 
/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */
#3a3f                    /* full opaque green */
#33aa3300                /*   0% opaque green */
#33aa3380                /*  50% opaque green */

/* Functional syntax */
rgba(51, 170, 51, 0.1)    /*  10% opaque green */
rgba(51, 170, 51, 0.4)    /*  40% opaque green */
rgba(51, 170, 51, 0.7)    /*  70% opaque green */
rgba(51, 170, 51,   1)    /* full opaque green */

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */
rgba(51 170 51 / 40%)    /*  40% opaque green */

/* Functional syntax with floats value */
rgba(51,    170,   51.6,  1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)
0 có cùng màu với 
/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */
#3a3f                    /* full opaque green */
#33aa3300                /*   0% opaque green */
#33aa3380                /*  50% opaque green */

/* Functional syntax */
rgba(51, 170, 51, 0.1)    /*  10% opaque green */
rgba(51, 170, 51, 0.4)    /*  40% opaque green */
rgba(51, 170, 51, 0.7)    /*  70% opaque green */
rgba(51, 170, 51,   1)    /* full opaque green */

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */
rgba(51 170 51 / 40%)    /*  40% opaque green */

/* Functional syntax with floats value */
rgba(51,    170,   51.6,  1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)
1. Tương tự như vậy, ký hiệu RGB gồm bốn chữ số (
/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */
#3a3f                    /* full opaque green */
#33aa3300                /*   0% opaque green */
#33aa3380                /*  50% opaque green */

/* Functional syntax */
rgba(51, 170, 51, 0.1)    /*  10% opaque green */
rgba(51, 170, 51, 0.4)    /*  40% opaque green */
rgba(51, 170, 51, 0.7)    /*  70% opaque green */
rgba(51, 170, 51,   1)    /* full opaque green */

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */
rgba(51 170 51 / 40%)    /*  40% opaque green */

/* Functional syntax with floats value */
rgba(51,    170,   51.6,  1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)
2) là phiên bản ngắn hơn của dạng tám chữ số (
/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */
#3a3f                    /* full opaque green */
#33aa3300                /*   0% opaque green */
#33aa3380                /*  50% opaque green */

/* Functional syntax */
rgba(51, 170, 51, 0.1)    /*  10% opaque green */
rgba(51, 170, 51, 0.4)    /*  40% opaque green */
rgba(51, 170, 51, 0.7)    /*  70% opaque green */
rgba(51, 170, 51,   1)    /* full opaque green */

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */
rgba(51 170 51 / 40%)    /*  40% opaque green */

/* Functional syntax with floats value */
rgba(51,    170,   51.6,  1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)
3). Ví dụ, 
/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */
#3a3f                    /* full opaque green */
#33aa3300                /*   0% opaque green */
#33aa3380                /*  50% opaque green */

/* Functional syntax */
rgba(51, 170, 51, 0.1)    /*  10% opaque green */
rgba(51, 170, 51, 0.4)    /*  40% opaque green */
rgba(51, 170, 51, 0.7)    /*  70% opaque green */
rgba(51, 170, 51,   1)    /* full opaque green */

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */
rgba(51 170 51 / 40%)    /*  40% opaque green */

/* Functional syntax with floats value */
rgba(51,    170,   51.6,  1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)
4 có cùng màu với 
/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */
#3a3f                    /* full opaque green */
#33aa3300                /*   0% opaque green */
#33aa3380                /*  50% opaque green */

/* Functional syntax */
rgba(51, 170, 51, 0.1)    /*  10% opaque green */
rgba(51, 170, 51, 0.4)    /*  40% opaque green */
rgba(51, 170, 51, 0.7)    /*  70% opaque green */
rgba(51, 170, 51,   1)    /* full opaque green */

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */
rgba(51 170 51 / 40%)    /*  40% opaque green */

/* Functional syntax with floats value */
rgba(51,    170,   51.6,  1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)
5.

<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>
1 hoặc 
<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>
3: 
/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */
#3a3f                    /* full opaque green */
#33aa3300                /*   0% opaque green */
#33aa3380                /*  50% opaque green */

/* Functional syntax */
rgba(51, 170, 51, 0.1)    /*  10% opaque green */
rgba(51, 170, 51, 0.4)    /*  40% opaque green */
rgba(51, 170, 51, 0.7)    /*  70% opaque green */
rgba(51, 170, 51,   1)    /* full opaque green */

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */
rgba(51 170 51 / 40%)    /*  40% opaque green */

/* Functional syntax with floats value */
rgba(51,    170,   51.6,  1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)
8 hoặc 
/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */
#3a3f                    /* full opaque green */
#33aa3300                /*   0% opaque green */
#33aa3380                /*  50% opaque green */

/* Functional syntax */
rgba(51, 170, 51, 0.1)    /*  10% opaque green */
rgba(51, 170, 51, 0.4)    /*  40% opaque green */
rgba(51, 170, 51, 0.7)    /*  70% opaque green */
rgba(51, 170, 51,   1)    /* full opaque green */

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */
rgba(51 170 51 / 40%)    /*  40% opaque green */

/* Functional syntax with floats value */
rgba(51,    170,   51.6,  1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)
9

<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>
6 (màu đỏ), 
<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>
7 (màu xanh lá cây) và 
<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>
8 (màu xanh) có thể là 
<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>
9S hoặc 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
0s, trong đó số 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
1 tương ứng với 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2. 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
3 (alpha) có thể là 
<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>
9 giữa 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
5 và 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
 rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
 rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
 hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
 hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
 lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
 lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
 oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
 oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
 color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
 <number> |
 <percentage>
<hue> = 
 <number> |
 <angle>
<colorspace-params> = 
 <predefined-rgb-params> |
 <xyz-params>
<predefined-rgb-params> = 
 <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
 <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
 srgb |
 srgb-linear |
 display-p3 |
 a98-rgb |
 prophoto-rgb |
 rec2020
<xyz-space> = 
 xyz |
 xyz-d50 |
 xyz-d65
6 hoặc 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
0, trong đó số 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
6 tương ứng với 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2 (độ mờ hoàn toàn).

Mô hình màu HSL

Mô hình màu HSL xác định một màu nhất định trong không gian màu SRGB theo màu sắc, độ bão hòa và các thành phần độ sáng của nó. Một thành phần alpha tùy chọn thể hiện độ trong suốt của màu.

Nhiều nhà thiết kế thấy HSL trực quan hơn RGB, vì nó cho phép màu sắc, độ bão hòa và độ nhẹ cho mỗi người được điều chỉnh độc lập. HSL cũng có thể giúp dễ dàng tạo ra một tập hợp các màu phù hợp (chẳng hạn như khi bạn muốn có nhiều sắc thái của một màu sắc). Tuy nhiên, sử dụng HSL để tạo ra các biến thể màu có thể tạo ra kết quả đáng ngạc nhiên, vì nó không đồng nhất về mặt nhận thức. Ví dụ, cả 

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(0.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
4 và 
/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(0.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
5 đều có cùng độ nhẹ, mặc dù cái trước tối hơn nhiều so với cái sau.

Màu sắc HSL được thể hiện thông qua các ký hiệu 

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
8 và 
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
9 chức năng.

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
8 hoặc 
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
9: 
<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>
00 hoặc 
<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>
01

<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>
02 (HUE) là 
<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>
03 của vòng tròn màu được đưa ra trong 
<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>
04S, 
<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>
05S, 
<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>
06S hoặc 
<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>
07S trong đặc tả màu CSS. Khi được viết dưới dạng 
<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>
9, nó được hiểu là độ, như được chỉ định trong đặc tả CSS Color 3. Theo định nghĩa, red = 0deg = 360deg, với các màu khác trải đều xung quanh vòng tròn, vì vậy màu xanh lá cây = 120deg, blue = 240deg, v.v. = 1Turn, v.v.

<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>
10 (bão hòa) và 
<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>
11 (độ sáng) là tỷ lệ phần trăm. 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2 Độ bão hòa hoàn toàn bão hòa, trong khi 
<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>
13 hoàn toàn không bão hòa (màu xám). 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2 Độ nhẹ có màu trắng, độ sáng 
<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>
13 có màu đen và độ sáng 
<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>
16 là "bình thường".saturation is completely saturated, while 
<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>
13 is completely unsaturated (gray). 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2 lightness is white, 
<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>
13 lightness is black, and 
<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>
16 lightness is "normal".

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
3 (alpha) có thể là 
<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>
9 giữa 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
 color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
 <number> |
 <percentage>
<hue> = 
 <number> |
 <angle>
<colorspace-params> = 
 <predefined-rgb-params> |
 <xyz-params>
<predefined-rgb-params> = 
 <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
 <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
 srgb |
 srgb-linear |
 display-p3 |
 a98-rgb |
 prophoto-rgb |
 rec2020
<xyz-space> = 
 xyz |
 xyz-d50 |
 xyz-d65
5 và 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
6 hoặc 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
0, trong đó số 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
6 tương ứng với 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2 (độ mờ hoàn toàn).

Mô hình màu HWB

Tương tự như mô hình màu HSL, mô hình màu HWB xác định một màu nhất định trong không gian màu SRGB theo các thành phần màu sắc, độ trắng và màu đen của nó.

Như với HSL, HWB có thể sử dụng trực quan hơn RGB. Một màu sắc được chỉ định theo cùng một cách, tiếp theo là độ trắng và màu đen, tương ứng, trong các giá trị phần trăm. Hàm này cũng chấp nhận một giá trị alpha.

Lưu ý: Không có hàm 

<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>
24 riêng biệt như có HSL, giá trị alpha là một tham số tùy chọn, nếu nó không được chỉ định giá trị alpha là 1 (hoặc 100%) được sử dụng. Để chỉ định giá trị này, một dấu gạch chéo phía trước (
<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>
25) phải tuân theo giá trị màu đen trước khi giá trị alpha được chỉ định. There is no separate 
<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>
24 function as there is with HSL, the alpha value is an optional parameter, if it is not specified an alpha value of 1 (or 100%) is used. To specify this value a forward slash (
<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>
25) must follow the blackness value before the alpha value is specified.

Màu sắc HWB được thể hiện thông qua ký hiệu 

div {
  width: 100%;
  height: 200px;
}
0 chức năng.

Lưu ý: Hàm HWB không sử dụng dấu phẩy để phân tách các giá trị của nó như với các hàm màu trước đó. The HWB function does not use commas to separate its values as with previous color functions.

div {
  width: 100%;
  height: 200px;
}
0: 
<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>
28

Giống như HSL: 

<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>
02 (HUE) là 
<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>
03 của vòng tròn màu được đưa ra trong 
<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>
04S, 
<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>
05S, 
<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>
06S hoặc 
<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>
07S trong đặc tả màu CSS. Khi được viết dưới dạng 
<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>
9, nó được hiểu là độ, như được chỉ định trong đặc tả CSS Color 3. Theo định nghĩa, red = 0deg = 360deg, với các màu khác trải đều xung quanh vòng tròn, vì vậy màu xanh lá cây = 120deg, blue = 240deg, v.v. = 1Turn, v.v.

<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>
37 (độ trắng) và 
<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>
8 (màu đen) là tỷ lệ phần trăm. Hai màu này trộn lẫn, vì vậy bạn sẽ cần 
<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>
13 độ trắng và màu đen 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2 để tạo ra màu đen. Và ngược lại 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2 độ trắng và màu đen 
<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>
13 cho màu trắng. 
<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>
16 của cả hai giá trị hiển thị một màu xám giữa và bất kỳ biến thể nào khác là một sắc thái của màu sắc được chỉ định.whiteness and 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2 blackness to produce the color black. And vice versa 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
 srgb |
 srgb-linear |
 display-p3 |
 a98-rgb |
 prophoto-rgb |
 rec2020
<xyz-space> = 
 xyz |
 xyz-d50 |
 xyz-d65
2 whiteness and 
<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>
13 blackness for the color white. 
<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>
16 of both values renders a mid-grey and any other variations a shade of the hue specified.

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
3 (alpha), tùy chọn, có thể là 
<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>
9 giữa 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
5 và 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
6 hoặc 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
0, trong đó số 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
6 tương ứng với 
<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65
2 (độ mờ đầy đủ). Khi chỉ định giá trị alpha, nó phải được đi trước với một dấu gạch chéo phía trước (
<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>
25).

Màu sắc hệ thống

Trong chế độ màu bắt buộc (có thể phát hiện với truy vấn phương tiện màu cưỡng bức), hầu hết các màu được giới hạn trong bảng màu do người dùng và trình duyệt xác định. Các màu hệ thống này được phơi bày bởi các từ khóa sau, có thể được sử dụng để đảm bảo rằng phần còn lại của trang tích hợp tốt với bảng màu bị hạn chế. Các giá trị này cũng có thể được sử dụng trong các bối cảnh khác, nhưng không được các trình duyệt hỗ trợ rộng rãi.

Các từ khóa trong danh sách sau đây được xác định bởi mô -đun màu CSS Cấp độ 4 Đặc điểm kỹ thuật: 

<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>
52, 
<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>
53, 
<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>
54, 
<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>
55, 
<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>
56, 
<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>
57, 
<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>
58, ____15, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____1, ____.

Lưu ý: Lưu ý rằng các từ khóa này không nhạy cảm với trường hợp, nhưng được liệt kê ở đây với trường hợp hỗn hợp để đọc. Note that these keywords are case-insensitive, but are listed here with mixed case for readability.

Màu sắc phòng thí nghiệm

CSS Color 4 Giới thiệu màu phòng thí nghiệm. Màu sắc phòng thí nghiệm được chỉ định thông qua ký hiệu chức năng 

div {
  width: 100%;
  height: 200px;
}
2. Chúng không giới hạn trong một không gian màu cụ thể và có thể đại diện cho toàn bộ tầm nhìn của con người.

Mô hình màu LCH

CSS Color 4 Giới thiệu màu LCH. Màu sắc LCH được chỉ định thông qua ký hiệu chức năng 

div {
  width: 100%;
  height: 200px;
}
1. Chúng không giới hạn trong một không gian màu cụ thể và có thể đại diện cho toàn bộ tầm nhìn của con người.

Trong thực tế, LCH là dạng phân cực của phòng thí nghiệm. Nó thân thiện với con người hơn phòng thí nghiệm, vì các thành phần sắc độ và màu sắc của nó chỉ định các phẩm chất của màu sắc mong muốn, trái ngược với sự pha trộn. Nó tương tự như HSL theo cách đó, mặc dù nó đồng nhất về mặt nhận thức hơn nhiều. Không giống như HSL mô tả cả 

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(0.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
5 
/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(0.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
4 là có cùng độ sáng, LCH (và phòng thí nghiệm) quy định chính xác các độ sáng khác nhau đối với chúng: cái trước (màu vàng) có L là 97,6 và sau (màu xanh) một L là 29,6. Do đó, LCH có thể được sử dụng để tạo ra các bảng màu trên các màu hoàn toàn khác nhau, với kết quả có thể dự đoán được. Xin lưu ý rằng màu sắc của LCH không giống như HSL Hue và LCH Chroma không giống như bão hòa HSL, mặc dù chúng có chung một số điểm tương đồng về khái niệm.

màu () màu

CSS Color 4 giới thiệu ký hiệu này. Các màu được chỉ định thông qua hàm 

div {
  width: 100%;
  height: 200px;
}
3 có thể chỉ định màu trong bất kỳ không gian màu được xác định trước, cũng như không gian màu tùy chỉnh, được xác định thông qua quy tắc 
<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>
72.

Nội suy

Trong hình ảnh động và độ dốc, các giá trị 

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
1 được nội suy trên mỗi thành phần màu đỏ, xanh lá cây và xanh dương của chúng. Mỗi thành phần được nội suy là một số điểm nổi thực sự. Lưu ý rằng việc nội suy các màu xảy ra trong không gian màu SRGBA được in alpha để ngăn chặn các màu xám bất ngờ xuất hiện. Trong hình ảnh động, tốc độ của nội suy được xác định bởi hàm thời gian.

Cân nhắc về 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.0 khuyên nên sử dụng màu sắc như là phương tiện duy nhất để truyền tải một thông điệp, 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> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         
<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent
<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>
<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> = 
  <number>      |
  <percentage>
<hue> = 
  <number>  |
  <angle>
<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>
<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

Ví dụ

Người kiểm tra giá trị màu

Trong ví dụ này, chúng tôi cung cấp 

<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>
74 và đầu vào văn bản. Nhập màu hợp lệ vào đầu vào khiến 
<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>
74 áp dụng màu đó, cho phép bạn kiểm tra các giá trị màu của chúng tôi.

HTML

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

CSS

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


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

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

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});

Kết quả

Biến thể cú pháp RGB

Ví dụ này cho thấy nhiều cách trong đó một màu duy nhất có thể được tạo với các cú pháp màu RGB khác nhau.

/* 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)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* ERROR! Don't mix numbers 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, .5)
rgb(255, 0, 153, 0.5)
rgb(255, 0, 153, 100%)

/* Whitespace syntax */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* Functional syntax with floats value */
rgb(255, 0, 153.6, 1)
rgb(2.55e2, 0e0, 1.53e2, 1e2%)

Biến thể minh bạch RGB

/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */
#3a3f                    /* full opaque green */
#33aa3300                /*   0% opaque green */
#33aa3380                /*  50% opaque green */

/* Functional syntax */
rgba(51, 170, 51, 0.1)    /*  10% opaque green */
rgba(51, 170, 51, 0.4)    /*  40% opaque green */
rgba(51, 170, 51, 0.7)    /*  70% opaque green */
rgba(51, 170, 51,   1)    /* full opaque green */

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */
rgba(51 170 51 / 40%)    /*  40% opaque green */

/* Functional syntax with floats value */
rgba(51,    170,   51.6,  1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)

Biến thể cú pháp HSL

/* 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(0.75turn, 60%, 70%)

/* These examples all specify the same color: a lavender that is 15% opaque. */
hsl(270, 60%, 50%, 0.15)
hsl(270, 60%, 50%, 0.15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / 0.15)
hsl(270 60% 50% / 15%)

Biến thể cú pháp HWB

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(0.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

Màu sắc bão hòa hoàn toàn

Màu xanh nhạt và tối hơn

Greens bão hòa và không bão hòa

Biến thể minh bạch HSL

<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>
0

Thông số kỹ thuật

Sự chỉ rõ
Mô-đun màu CSS Cấp 4 # Color-Syntax
# color-syntax

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

  • Thuộc tính 
    <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>
    76 cho phép bạn xác định tính minh bạch ở cấp phần tử.
  • Một số thuộc tính phổ biến sử dụng loại dữ liệu này: 
    const inputElem = document.querySelector('input');
const divElem = document.querySelector('div');

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

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});
    1, 
    <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>
    78, 
    <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>
    79, 
    <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>
    80, 
    <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>
    81, 
    <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>
    82
  • Áp dụng màu cho các phần tử HTML bằng CSS

Hàm màu RGB () là gì?

Giá trị màu RGB chỉ định cường độ tương đối của màu đỏ, xanh lá cây và màu xanh lam để gây ra một màu cụ thể được hiển thị.Giá trị cho bất kỳ đối số nào đối với RGB vượt quá 255 được giả định là 255.specifies the relative intensity of red, green, and blue to cause a specific color to be displayed. The value for any argument to RGB that exceeds 255 is assumed to be 255.

Các mã màu RGB được gọi là gì?

Không gian màu RGB hoặc hệ thống màu RGB, xây dựng tất cả các màu từ sự kết hợp của các màu đỏ, xanh lá cây và xanh dương.Mỗi lần sử dụng 8 bit màu đỏ, xanh lá cây và xanh dương, có các giá trị số nguyên từ 0 đến 255., constructs all the colors from the combination of the Red, Green and Blue colors. The red, green and blue use 8 bits each, which have integer values from 0 to 255.

Màu sắc được gọi trong CSS là gì?

Kiểu dữ liệu CSS là tên của một màu, chẳng hạn như màu đỏ, xanh, đen hoặc lightsreen.Về mặt cú pháp, a là một.Một giá trị có thể được sử dụng ở bất cứ đâu A có thể được sử dụng. CSS data type is the name of a color, such as red , blue , black , or lightseagreen . Syntactically, a is an . A value can be used anywhere a can be used.

Làm thế nào để bạn đại diện cho màu sắc trong CSS?

Cách phổ biến nhất để chỉ định màu sắc trong CSS là sử dụng các giá trị thập lục phân (hoặc hex) của chúng.Các giá trị HEX thực sự chỉ là một cách khác nhau để thể hiện các giá trị RGB.Thay vì sử dụng ba số từ 0 đến 255, bạn sử dụng sáu số thập lục phân.Số Hex có thể là 0-9 và A-F.use their hexadecimal (or hex) values. Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers. Hex numbers can be 0-9 and A-F.

programming css RGB color Rgba CSS Color CSS RGB CSS opacity Background-color CSS Font color CSS RGB Color selector

Bài Viết Liên Quan

Hindu wedding dates 2023
Hindu wedding dates 2023

Hướng dẫn css active tab underline - gạch chân tab hoạt động css
Hướng dẫn css active tab underline - gạch chân tab hoạt động css

Hướng dẫn insert java in html - chèn java vào html
Hướng dẫn insert java in html - chèn java vào html

Hướng dẫn css rotate plus to cross - css xoay cộng để vượt qua
Hướng dẫn css rotate plus to cross - css xoay cộng để vượt qua

Hướng dẫn python current datetime in seconds - ngày giờ hiện tại của python tính bằng giây
Hướng dẫn python current datetime in seconds - ngày giờ hiện tại của python tính bằng giây

Hướng dẫn jdbc mysql jar - jdbc bình mysql
Hướng dẫn jdbc mysql jar - jdbc bình mysql

Hướng dẫn python package in github - gói python trong github
Hướng dẫn python package in github - gói python trong github

Honda crv 2023 đánh giá
Honda crv 2023 đánh giá

Hướng dẫn python dictionary resize - từ điển python thay đổi kích thước
Hướng dẫn python dictionary resize - từ điển python thay đổi kích thước

Hướng dẫn what is time type in mysql? - kiểu thời gian trong mysql là gì?
Hướng dẫn what is time type in mysql? - kiểu thời gian trong mysql là gì?

MỚI CẬP NHẬP

Cách sử lý lỗi tháng trước ngày sau năm 2024
1 phúts trước . bởi DreadfulBroth
Bàn học bị rung thì phải làm thế nào năm 2024
20 phúts trước . bởi NormativeSiding
Các nước thế giới thứ 3 là gì năm 2024
27 phúts trước . bởi HeftyDomination
Ngoc tai to hop yasuo top khac che ganr năm 2024
45 phúts trước . bởi LoftyInfamy
Bài tập giảm đi một số lần nâng cao năm 2024
1 giờs trước . bởi HollowApologise
Iphone 7 quốc tế là gì năm 2024
1 giờs trước . bởi ObedientDeduction
Top-20-bo-phim-hoc-duong-nhat-ban-khong-xem-thi-phi-mot-doi năm 2024
1 giờs trước . bởi OvercomeHonesty
Các dạng bài tập hóa 11 chương 3 năm 2024
1 giờs trước . bởi RevolutionaryIllness
Logo bạn hữu đường xa là gì năm 2024
2 giờs trước . bởi OutstretchedCumin
Toán lớp 5 trang 66 vở bài tập năm 2024
2 giờs trước . bởi SwarthyThoroughfare

Xem Nhiều

Cách bố trí hàng hóa trên các kệ hàng năm 2024
5 ngàys trước . bởi RidiculousBookmark
Câu bạn làm bài tập chưa có chức năng gì năm 2024
2 ngàys trước . bởi Law-abidingMartin
Caâu hỏi trắc nghiệm về văn hóa tổ chức năm 2024
4 ngàys trước . bởi EngravedSchism
Bài tập tự luận unit 12 tiếng anh 8 năm 2024
1 tuầns trước . bởi Ten-yearCross-examination
724 22 lê văn lương.phước kiểng nhà bè năm 2024
6 ngàys trước . bởi AcousticEnthusiasm
Làm thế nào để hết quầng thâm mắt bẩm sinh năm 2024
1 ngàys trước . bởi TransparentSubcommittee
Lỗi file word 2010 bị kẻ ô vuông khi mở năm 2024
11 giờs trước . bởi ElderlyWoodward
An toàn thông tin và hệ thống là gì năm 2024
1 ngàys trước . bởi AppreciableNervousness
Kho chuyển hàng đi quốc tế tiếng anh là gì năm 2024
2 ngàys trước . bởi StrongEmperor
Số điện thoại của lazada là gì năm 2024
4 ngàys trước . bởi ForensicElectricity

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.