Hướng dẫn what is a css color? - màu css là gì?

Cú pháp

Kiểu dữ liệu

 = 
    |
  currentcolor           |
           
 = 
                  |
    |
                |
  transparent
 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
  
 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )
 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  color(  [ / [  | none ] ]? )
 = 
        |
  
 = 
    |
     |
  none
 = 
    |
  
 = 
   [  |  | none ]{3}
 = 
   [  |  | none ]{3}
 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
 = 
  xyz      |
  xyz-d50  |
  xyz-d65

Lưu ý: Mặc dù các giá trị ____1010 đượ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

 = 
    |
  currentcolor           |
           
 = 
                  |
    |
                |
  transparent
 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
  
 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )



 = 
 hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
 hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
 lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
 lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
 oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
 oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
 color(  [ / [  | none ] ]? )
 = 
  |
 
 = 
  |
  |
 none
 = 
  |
 
 = 
  [  |  | none ]{3}
 = 
  [  |  | none ]{3}
 = 
 srgb |
 srgb-linear |
 display-p3 |
 a98-rgb |
 prophoto-rgb |
 rec2020
 = 
 xyz |
 xyz-d50 |
 xyz-d65

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>div>
<hr />
<label for="color">Enter a valid color value:label>
<input type="text" id="color" />

 = 
    |
  currentcolor           |
           
 = 
                  |
    |
                |
  transparent
 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
  
 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )
 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  color(  [ / [  | none ] ]? )
 = 
        |
  
 = 
    |
     |
  none
 = 
    |
  
 = 
   [  |  | none ]{3}
 = 
   [  |  | none ]{3}
 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
 = 
  xyz      |
  xyz-d50  |
  xyz-d65

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

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

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

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

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

Nếu

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

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

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

<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ả thập lục phân (tiền tố với các ký hiệu

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

 = 
    |
  currentcolor           |
           
 = 
                  |
    |
                |
  transparent
 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
  
 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )
 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  color(  [ / [  | none ] ]? )
 = 
        |
  
 = 
    |
     |
  none
 = 
    |
  
 = 
   [  |  | none ]{3}
 = 
   [  |  | none ]{3}
 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
 = 
  xyz      |
  xyz-d50  |
  xyz-d65

 = 
    |
  currentcolor           |
           
 = 
                  |
    |
                |
  transparent
 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
  
 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )
 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  color(  [ / [  | none ] ]? )
 = 
        |
  
 = 
    |
     |
  none
 = 
    |
  
 = 
   [  |  | none ]{3}
 = 
   [  |  | none ]{3}
 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
 = 
  xyz      |
  xyz-d50  |
  xyz-d65

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

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

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

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

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

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

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

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

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

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

/* 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%)

/* 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%)

/* 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%)

/* 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%)

/* 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%)

 = 
    |
  currentcolor           |
           
 = 
                  |
    |
                |
  transparent
 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
  
 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )
 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  color(  [ / [  | none ] ]? )
 = 
        |
  
 = 
    |
     |
  none
 = 
    |
  
 = 
   [  |  | none ]{3}
 = 
   [  |  | none ]{3}
 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
 = 
  xyz      |
  xyz-d50  |
  xyz-d65

 = 
    |
  currentcolor           |
           
 = 
                  |
    |
                |
  transparent
 = 
      |
     |
      |
     |
      |
      |
      |
    |
    |
  
 = 
  rgb( [  | none ]{3} [ / [  | none ] ]? )  |
  rgb( [  | none ]{3} [ / [  | none ] ]? )
 = 
  hsl( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  hwb( [  | none ] [  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  lab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  lch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  oklab( [  |  | none ] [  |  | none ] [  |  | none ] [ / [  | none ] ]? )
 = 
  oklch( [  |  | none ] [  |  | none ] [  | none ] [ / [  | none ] ]? )
 = 
  color(  [ / [  | none ] ]? )
 = 
        |
  
 = 
    |
     |
  none
 = 
    |
  
 = 
   [  |  | none ]{3}
 = 
   [  |  | none ]{3}
 = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020
 = 
  xyz      |
  xyz-d50  |
  xyz-d65

/* 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%)