search

Sử dụng css để tạo đường viền màu vàng, dày 1 pixel, bao quanh tất cả các đoạn văn.

Ngày đăng: 22/12/2022
Trả lời: 0
Lượt xem: 160

Việc sử dụng màu sắc là một hình thức biểu hiện cơ bản của con người. Trẻ em thử nghiệm với màu sắc trước khi chúng có sự khéo léo để vẽ. Có lẽ đó là lý do tại sao màu sắc là một trong những điều đầu tiên mọi người thường muốn thử nghiệm khi học cách phát triển trang web. Với CSS, có rất nhiều cách để thêm màu sắc vào các phần tử HTML của bạn để tạo ra giao diện bạn muốn

Show

Chúng ta sẽ đề cập đến hầu hết những điều bạn cần biết khi sử dụng màu sắc, bao gồm dấu , và cách thực sự. Chúng ta cũng sẽ xem xét làm thế nào để

Sau đó, chúng ta sẽ kết thúc mọi thứ bằng một cuộc thảo luận ngắn gọn về cách. cách chọn màu phù hợp, ghi nhớ nhu cầu của những người có khả năng thị giác khác nhau

Ở cấp độ phần tử, mọi thứ trong HTML đều có thể được áp dụng màu cho nó. Thay vào đó, hãy xem xét mọi thứ theo các loại nội dung được vẽ trong các phần tử, chẳng hạn như văn bản và đường viền, v.v. Đối với mỗi loại, chúng ta sẽ thấy một danh sách các thuộc tính CSS áp dụng màu cho chúng

Ở cấp độ cơ bản, thuộc tính 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
1 xác định màu nền trước của nội dung phần tử HTML và thuộc tính 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
2 xác định màu nền của phần tử. Chúng có thể được sử dụng trên bất kỳ yếu tố nào

Bất cứ khi nào một phần tử được hiển thị, các thuộc tính này được sử dụng để xác định màu của văn bản, nền của văn bản và mọi trang trí trên văn bản

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
1

Màu được sử dụng khi vẽ văn bản và bất kỳ màu nào (chẳng hạn như thêm các đường gạch dưới hoặc gạch trên, các đường gạch ngang, v.v.

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
2

Màu nền của văn bản

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
5

Định cấu hình hiệu ứng đổ bóng để áp dụng cho văn bản. Trong số các tùy chọn cho bóng là màu cơ bản của bóng (sau đó được làm mờ và hòa trộn với nền dựa trên các tham số khác). Xem trong Kiểu dáng phông chữ và văn bản cơ bản để tìm hiểu thêm

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
6

Theo mặc định, trang trí văn bản (chẳng hạn như gạch chân, gạch ngang, v.v. ) sử dụng thuộc tính 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
1 làm màu của chúng. Tuy nhiên, bạn có thể ghi đè hành vi đó và sử dụng màu khác cho chúng bằng thuộc tính 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
6

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
9

Màu được sử dụng khi vẽ các ký hiệu nhấn mạnh liền kề với mỗi ký tự trong văn bản. Cái này được dùng chủ yếu khi vẽ chữ cho các ngôn ngữ Đông Á

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

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

Màu được sử dụng khi vẽ dấu mũ (đôi khi được gọi là con trỏ nhập văn bản) trong phần tử. Điều này chỉ hữu ích trong các phần tử có thể chỉnh sửa, chẳng hạn như 

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

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

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
2 hoặc các phần tử có thuộc tính HTML được đặt

Mỗi phần tử là một hộp có một số loại nội dung và có nền và đường viền ngoài bất kỳ nội dung nào mà hộp có thể có

Xem phần này để biết danh sách các thuộc tính CSS mà bạn có thể sử dụng để đặt màu cho đường viền của hộp

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
2

Màu nền để sử dụng trong các khu vực của phần tử không có nội dung nền trước

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

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

Màu dùng để kẻ đường phân cách các cột trong văn bản

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

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

Màu được sử dụng khi vẽ đường viền xung quanh bên ngoài phần tử. Đường viền này khác với đường viền ở chỗ nó không dành khoảng trống cho nó trong tài liệu (vì vậy nó có thể chồng lên nội dung khác). Nó thường được sử dụng làm chỉ báo tiêu điểm, để hiển thị phần tử nào sẽ nhận các sự kiện đầu vào

Bất kỳ phần tử nào cũng có thể có đường viền được vẽ xung quanh nó. Đường viền phần tử cơ bản là một đường được vẽ xung quanh các cạnh của nội dung phần tử. Xem trong Mô hình hộp để tìm hiểu về mối quan hệ giữa các thành phần và đường viền của chúng và bài viết Tạo kiểu đường viền bằng CSS để tìm hiểu thêm về cách áp dụng kiểu cho đường viền

Bạn có thể sử dụng thuộc tính tốc ký 

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

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
7, thuộc tính này cho phép bạn định cấu hình mọi thứ về đường viền trong một lần chụp (bao gồm các đặc điểm không có màu của đường viền, chẳng hạn như chiều rộng, kiểu của đường viền (nét liền, nét đứt, v.v. ), và kể từ đó trở đi

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

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

Chỉ định một màu duy nhất để sử dụng cho mọi cạnh của đường viền của phần tử

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

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
9, 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
80, 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
81 và 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
82

Cho phép bạn đặt màu cho cạnh tương ứng của đường viền phần tử

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
83 và 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
84

Với những thứ này, bạn có thể đặt màu được sử dụng để vẽ các đường viền gần nhất với phần đầu và phần cuối của khối mà đường viền bao quanh. Ở chế độ viết từ trái sang phải (chẳng hạn như cách viết tiếng Anh), đường viền bắt đầu khối là cạnh trên và phần cuối của khối là cạnh dưới. Điều này khác với bắt đầu và kết thúc nội tuyến, là các cạnh bên trái và bên phải (tương ứng với vị trí bắt đầu và kết thúc của mỗi dòng văn bản trong hộp)

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
85 và 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
86

Những thứ này cho phép bạn tô màu các cạnh của đường viền gần nhất với phần đầu và phần cuối của dòng văn bản trong hộp. Mặt này sẽ khác nhau tùy thuộc vào các thuộc tính 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
87, 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
88 và 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
89, thường (nhưng không phải luôn luôn) được sử dụng để điều chỉnh hướng văn bản dựa trên ngôn ngữ được hiển thị. Ví dụ: nếu văn bản của hộp được hiển thị từ phải sang trái, thì 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
85 được áp dụng cho bên phải của đường viền

CSS không phải là công nghệ web duy nhất hỗ trợ màu sắc. Có những công nghệ đồ họa có sẵn trên web cũng hỗ trợ màu sắc

API nền HTML

Cho phép bạn vẽ đồ họa bitmap 2D trong phần tử 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
91. Xem hướng dẫn Canvas của chúng tôi để tìm hiểu thêm

SVG (Đồ họa véc tơ có thể mở rộng)

Cho phép bạn vẽ hình ảnh bằng các lệnh vẽ các hình dạng, mẫu và đường cụ thể để tạo ra hình ảnh. Các lệnh SVG được định dạng dưới dạng XML và có thể được nhúng trực tiếp vào trang web hoặc có thể được đặt trong trang bằng phần tử 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
92, giống như bất kỳ loại hình ảnh nào khác

WebGL

Thư viện đồ họa web là API dựa trên OpenGL ES để vẽ đồ họa 2D và 3D hiệu suất cao trên Web. Xem hướng dẫn WebGL của chúng tôi để tìm hiểu thêm

Để thể hiện một màu trong CSS, bạn phải tìm cách dịch khái niệm tương tự về "màu" thành dạng kỹ thuật số mà máy tính có thể sử dụng. Điều này thường được thực hiện bằng cách chia nhỏ màu thành các thành phần, chẳng hạn như bao nhiêu phần trăm của mỗi bộ màu cơ bản để trộn với nhau hoặc độ sáng để tạo màu. Như vậy, có một số cách bạn có thể mô tả màu sắc trong CSS

Để thảo luận chi tiết hơn về từng loại giá trị màu, hãy xem tài liệu tham khảo cho đơn vị CSS 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
93

Một tập hợp các tên màu tiêu chuẩn đã được xác định, cho phép bạn sử dụng các từ khóa này thay vì các biểu thị màu bằng số nếu bạn chọn làm như vậy và có một từ khóa đại diện cho màu chính xác mà bạn muốn sử dụng. Từ khóa màu sắc bao gồm các màu cơ bản và màu phụ tiêu chuẩn (chẳng hạn như 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
94, 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
95 hoặc 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
96), sắc thái của màu xám (từ 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
97 đến 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
98, bao gồm các màu như 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
99 và 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
80) và nhiều màu pha trộn khác bao gồm 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
81, 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
82 và

Xem trong 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
93 để biết danh sách tất cả các từ khóa màu có sẵn

Có ba cách để thể hiện màu RGB trong CSS

Ký hiệu chuỗi thập lục phân

Ký hiệu chuỗi thập lục phân biểu thị một màu sử dụng các chữ số thập lục phân để biểu thị từng thành phần màu (đỏ, lục và lam). Nó cũng có thể bao gồm một thành phần thứ tư. kênh alpha (hoặc độ mờ). Mỗi thành phần màu có thể được biểu thị dưới dạng số từ 0 đến 255 (0x00 và 0xFF) hoặc, tùy chọn, dưới dạng số từ 0 đến 15 (0x0 và 0xF). Tất cả các thành phần phải được chỉ định sử dụng cùng một số chữ số. Nếu bạn sử dụng ký hiệu một chữ số, màu cuối cùng được tính bằng cách sử dụng hai lần chữ số của mỗi thành phần;

Một màu trong ký hiệu chuỗi thập lục phân luôn bắt đầu bằng ký tự 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
87. Sau đó đến các chữ số thập lục phân của mã màu. Chuỗi không phân biệt chữ hoa chữ thường

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
88

Chỉ định một màu hoàn toàn trong suốt có thành phần màu đỏ là số thập lục phân 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
89, thành phần màu lục là 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
80 và thành phần màu lam là 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
81

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
82

Chỉ định một màu có thành phần màu đỏ là số thập lục phân 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
89, thành phần màu lục là 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
80 và thành phần màu lam là 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
81. Kênh alpha được chỉ định bởi 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
86; 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
87

Chỉ định một màu có thành phần màu đỏ là số thập lục phân 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
89, thành phần màu lục là 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
80 và thành phần màu lam là 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
81

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
91

Chỉ định một màu có thành phần màu đỏ là số thập lục phân 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
89, thành phần màu lục là 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
80 và thành phần màu lam là 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
81. Kênh alpha được chỉ định bởi 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
86;

Ví dụ: bạn có thể biểu thị màu mờ đục là xanh lam sáng như 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
96 hoặc 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
97. Để làm mờ 25%, bạn có thể sử dụng 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
98 hoặc 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
99

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

Ký hiệu chức năng RGB (Đỏ/Xanh lục/Xanh lam), giống như ký hiệu chuỗi thập lục phân, biểu thị các màu bằng cách sử dụng các thành phần đỏ, lục và lam của chúng (cũng như, tùy chọn, thành phần kênh alpha cho độ mờ). Tuy nhiên, thay vì sử dụng một chuỗi, màu được xác định bằng hàm CSS. Hàm này chấp nhận các giá trị của các thành phần màu đỏ, lục và lam làm tham số đầu vào và tham số thứ tư tùy chọn, giá trị cho kênh alpha

Các giá trị pháp lý cho từng tham số này là

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
94, 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
92 và 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
95

Mỗi giá trị phải là một giá trị 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
94 trong khoảng từ 0 đến 255 (đã bao gồm) hoặc một giá trị 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
95 từ 0% đến 100%

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
96

Kênh alpha là một số trong khoảng từ 0. 0 (hoàn toàn trong suốt) và 1. 0 (đục hoàn toàn). Bạn cũng có thể chỉ định tỷ lệ phần trăm trong đó 0% giống như 0. 0 và 100% giống như 1. 0

Ví dụ: màu đỏ tươi mờ đục 50% có thể được biểu thị dưới dạng 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
97 hoặc 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
98

Các nhà thiết kế và nghệ sĩ thường thích làm việc bằng phương pháp màu HSL (Hue/Saturation/Luminosity). Trên web, màu HSL được thể hiện bằng ký hiệu chức năng HSL. Hàm CSS 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
99 rất giống với hàm 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
90 trong cách sử dụng khác

Sơ đồ dưới đây cho thấy một hình trụ màu HSL. Hue xác định màu thực tế dựa trên vị trí dọc theo bánh xe màu hình tròn biểu thị các màu của quang phổ nhìn thấy được. Độ bão hòa là tỷ lệ phần trăm của khoảng cách giữa việc có một màu xám và có lượng màu tối đa có thể có của màu sắc đã cho. Khi giá trị của độ chói (hoặc độ sáng) tăng lên, màu sẽ chuyển từ tối nhất có thể sang sáng nhất có thể (từ đen sang trắng). Hình ảnh lịch sự của người dùng SharkD trên Wikipedia, được phân phối theo CC BY-SA 3. 0 giấy phép

Sử dụng css để tạo đường viền màu vàng, dày 1 pixel, bao quanh tất cả các đoạn văn.

Giá trị của thành phần màu sắc (H) của màu HSL là một góc từ màu đỏ xung quanh qua màu vàng, xanh lá cây, lục lam, xanh lam và đỏ tươi (kết thúc trở lại màu đỏ một lần nữa ở 360°) xác định màu cơ bản là gì. Giá trị có thể được chỉ định trong bất kỳ đơn vị 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
81 nào được hỗ trợ bởi CSS, bao gồm độ (
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
82), radian (_______783), độ dốc (
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
84) hoặc lượt (
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
85). Nhưng điều này không kiểm soát mức độ sống động hay buồn tẻ, hoặc màu sắc sáng hay tối như thế nào

Thành phần bão hòa (S) của màu xác định tỷ lệ phần trăm của màu cuối cùng bao gồm sắc độ đã chỉ định. Phần còn lại được xác định bởi mức xám được cung cấp bởi thành phần độ chói (L)

Hãy nghĩ về nó giống như tạo ra màu sơn hoàn hảo

  1. Bạn bắt đầu với lớp sơn nền có cường độ tối đa có thể cho một màu nhất định, chẳng hạn như màu xanh đậm nhất có thể được thể hiện trên màn hình của người dùng. Đây là thành phần hue (H). một giá trị đại diện cho góc xung quanh bánh xe màu cho màu sắc sống động mà chúng tôi muốn sử dụng làm cơ sở của mình
  2. Sau đó, chọn một loại sơn thang độ xám tương ứng với mức độ sáng mà bạn muốn màu sắc; . Bạn muốn nó rất sáng và gần như trắng, hoặc rất tối và gần với màu đen, hoặc ở đâu đó ở giữa? . Ở giữa các giá trị là một vùng màu xám theo nghĩa đen
  3. Bây giờ bạn đã có một màu sơn xám và một màu sống động hoàn hảo, bạn cần trộn chúng lại với nhau. Thành phần bão hòa (S) của màu cho biết tỷ lệ phần trăm của màu cuối cùng sẽ bao gồm màu sống động hoàn hảo đó. Phần còn lại của màu cuối cùng được tạo thành từ sơn xám thể hiện độ bão hòa

Bạn cũng có thể tùy chọn bao gồm một kênh alpha để làm cho màu mờ hơn 100%

Dưới đây là một số màu mẫu trong ký hiệu HSL

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
3

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

Ghi chú. Khi bạn bỏ qua đơn vị màu sắc, nó được coi là độ (

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
82)

Giống như ký hiệu hàm HSL ở trên, hàm hwb() sử dụng cùng một giá trị sắc độ. Nhưng thay vì độ sáng và độ bão hòa, bạn chỉ định giá trị độ trắng và độ đen theo tỷ lệ phần trăm. Các giá trị không được phân tách bằng dấu phẩy và có thể bao gồm một giá trị alpha tùy chọn (trước giá trị này phải có dấu gạch chéo lên 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
87)

Dưới đây là một số ví dụ về việc sử dụng ký hiệu HWB

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

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

Bây giờ bạn đã biết những thuộc tính CSS nào tồn tại cho phép bạn áp dụng màu sắc cho các phần tử và các định dạng bạn có thể sử dụng để mô tả màu sắc, bạn có thể kết hợp chúng lại với nhau để bắt đầu sử dụng màu sắc. Như bạn có thể đã thấy từ danh sách bên dưới, có rất nhiều thứ bạn có thể tô màu bằng CSS. Hãy nhìn vào điều này từ hai phía. sử dụng màu trong biểu định kiểu, đồng thời thêm và thay đổi màu bằng mã JavaScript để thay đổi kiểu của các phần tử

Cách dễ nhất để áp dụng màu cho các phần tử—và cách bạn thường làm—là chỉ định các màu trong CSS được sử dụng khi hiển thị các phần tử. Mặc dù chúng tôi sẽ không sử dụng mọi thuộc tính được đề cập trước đây, nhưng chúng tôi sẽ xem xét một vài ví dụ. Khái niệm này giống nhau ở bất cứ nơi nào bạn sử dụng màu sắc

Hãy xem một ví dụ, bắt đầu bằng cách xem kết quả mà chúng ta đang cố gắng đạt được

HTML

HTML chịu trách nhiệm tạo ví dụ trên được hiển thị ở đây

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
8

Điều này khá đơn giản, sử dụng một 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
88 làm lớp bao quanh nội dung, bao gồm hai 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
88 khác, mỗi cái được tạo kiểu khác nhau với một đoạn duy nhất (
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
00) trong mỗi hộp

Điều kỳ diệu xảy ra, như thường lệ, trong CSS, nơi chúng ta sẽ áp dụng các màu xác định bố cục cho HTML ở trên

CSS

Chúng ta sẽ xem CSS để tạo các kết quả ở trên từng phần một, vì vậy chúng ta có thể xem lại từng phần thú vị

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
9

Lớp 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
01 được sử dụng để gán kiểu cho 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
88 bao quanh tất cả nội dung khác của chúng tôi. Điều này thiết lập kích thước của vùng chứa bằng cách sử dụng 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
03 và 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
04 cũng như 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
05 và 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
06 của nó

Quan tâm hơn đến cuộc thảo luận của chúng tôi ở đây là việc sử dụng thuộc tính 

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

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
7 để thiết lập đường viền xung quanh cạnh bên ngoài của phần tử. Đường viền này là một đường liền nét, rộng 6 pixel, có màu 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
08

Hai hộp màu của chúng ta chia sẻ một số thuộc tính chung, vì vậy tiếp theo chúng ta thiết lập một lớp, 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
09, định nghĩa các thuộc tính được chia sẻ đó

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
8

Tóm lại, 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
09 thiết lập kích thước của mỗi hộp, cũng như cấu hình của phông chữ được sử dụng bên trong. Chúng tôi cũng tận dụng CSS Flexbox để dễ dàng căn giữa nội dung của từng hộp. Chúng tôi bật chế độ 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
11 bằng cách sử dụng 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
12 và đặt cả 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
13 và 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
14 thành 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
15. Sau đó, chúng ta có thể tạo một lớp cho mỗi trong hai hộp xác định các thuộc tính khác nhau giữa hai hộp

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
8

Lớp 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
16—được sử dụng khéo léo để tạo kiểu cho hộp ở bên trái—làm nổi hộp ở bên trái, sau đó thiết lập màu sắc

  • Màu nền của hộp được đặt bằng cách thay đổi giá trị của thuộc tính CSS 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    2 thành 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    18
  • Một phác thảo được xác định cho hộp. Không giống như 
    /* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
    7 được sử dụng phổ biến hơn, 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    20 hoàn toàn không ảnh hưởng đến bố cục; . Đường viền này là một đường liền màu đỏ đậm, dày hai pixel. Lưu ý việc sử dụng từ khóa 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    22 khi chỉ định màu
  • Lưu ý rằng chúng tôi không đặt màu văn bản một cách rõ ràng. Điều đó có nghĩa là giá trị của 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    1 sẽ được kế thừa từ phần tử chứa gần nhất xác định nó. Theo mặc định, đó là màu đen

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
9

Ghi chú. Khi bạn cố gắng hiển thị nó trong Safari, nó sẽ không hiển thị đúng cách. Bởi vì Safari không hỗ trợ 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
24

Cuối cùng, lớp 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
25 mô tả các thuộc tính duy nhất của hộp được vẽ bên phải. Nó được định cấu hình để thả hộp sang bên phải để nó xuất hiện bên cạnh hộp trước đó. Sau đó, các màu sau được thiết lập

  • <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    2 được đặt bằng cách sử dụng giá trị HSL được chỉ định bằng cách sử dụng 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    27. Đây là một màu tím trung bình
  • <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    20 của hộp được sử dụng để xác định rằng hộp phải được đặt trong một đường đứt nét dày bốn pixel có màu tím đậm hơn một chút (
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    29)
  • Màu nền trước (văn bản) được chỉ định bằng cách đặt thuộc tính 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    1 thành 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    31. Đây là một trong nhiều cách để chỉ định màu trắng
  • Chúng tôi thêm một đường lượn sóng màu xanh lá cây dưới văn bản với 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    32
  • Cuối cùng, một chút bóng được thêm vào văn bản bằng cách sử dụng 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    5. Tham số 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    1 của nó được đặt thành 
    <table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
    97

Có nhiều tình huống trong đó trang web của bạn có thể cần cho phép người dùng chọn màu. Có lẽ bạn có giao diện người dùng có thể tùy chỉnh hoặc bạn đang triển khai ứng dụng vẽ. Có thể bạn có văn bản có thể chỉnh sửa và cần cho phép người dùng chọn màu văn bản. Hoặc có lẽ ứng dụng của bạn cho phép người dùng gán màu cho các thư mục hoặc mục. Mặc dù trong lịch sử, việc triển khai bộ chọn màu của riêng bạn là cần thiết, HTML hiện cung cấp hỗ trợ cho các trình duyệt để cung cấp một bộ chọn màu cho bạn sử dụng thông qua phần tử 

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

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
1, bằng cách sử dụng 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
37 làm giá trị của thuộc tính của nó

Phần tử 

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

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)
1 chỉ đại diện cho một màu ở phần trên

Hãy xem một ví dụ đơn giản, trong đó người dùng có thể chọn một màu. Khi người dùng điều chỉnh màu, đường viền xung quanh ví dụ sẽ thay đổi để phản ánh màu mới. Sau khi hoàn thành và chọn màu cuối cùng, giá trị của bộ chọn màu được hiển thị

Ghi chú. Trên macOS, bạn cho biết rằng bạn đã hoàn tất lựa chọn màu bằng cách đóng cửa sổ bộ chọn màu

HTML

HTML ở đây tạo một hộp chứa điều khiển bộ chọn màu (có nhãn được tạo bằng phần tử 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
40) và phần tử đoạn văn trống (
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
00) mà chúng tôi sẽ xuất một số văn bản từ mã JavaScript của mình vào đó

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
9

CSS

CSS thiết lập kích thước cho hộp và một số kiểu dáng cơ bản cho giao diện. Đường viền cũng được thiết lập với chiều rộng 2 pixel và màu đường viền

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
8

JavaScript

Tập lệnh ở đây xử lý tác vụ cập nhật màu bắt đầu của đường viền để khớp với giá trị của bộ chọn màu. Sau đó, hai trình xử lý sự kiện được thêm vào để xử lý đầu vào từ phần tử 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
42

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
0

Sự kiện 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
43 được gửi mỗi khi giá trị của phần tử thay đổi; . Mỗi khi sự kiện này đến, chúng tôi đặt màu đường viền của hộp khớp với giá trị hiện tại của bộ chọn màu

Sự kiện 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
44 được nhận khi giá trị của bộ chọn màu được hoàn thành. Chúng tôi phản hồi bằng cách đặt nội dung của phần tử 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
00 có ID 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
46 thành một chuỗi mô tả màu được chọn cuối cùng

Đưa ra lựa chọn đúng đắn khi chọn màu khi thiết kế trang web có thể là một quá trình khó khăn, đặc biệt nếu bạn không có nền tảng vững chắc về nghệ thuật, thiết kế hoặc ít nhất là lý thuyết màu cơ bản. Lựa chọn sai màu có thể khiến trang web của bạn không hấp dẫn hoặc thậm chí tệ hơn là khiến nội dung không thể đọc được do các vấn đề về độ tương phản hoặc xung đột màu sắc. Tệ hơn nữa, nếu sử dụng sai màu có thể khiến nội dung của bạn hoàn toàn không thể sử dụng được đối với những người có vấn đề về thị lực nhất định, đặc biệt là mù màu

Để có được màu sắc phù hợp có thể khó khăn, đặc biệt là nếu không được đào tạo về nghệ thuật hoặc thiết kế. May mắn thay, có những công cụ có thể giúp bạn. Mặc dù họ không thể thay thế việc có một nhà thiết kế giỏi giúp bạn đưa ra những quyết định này, nhưng họ chắc chắn có thể giúp bạn bắt đầu

Màu cơ bản

Bước đầu tiên là chọn màu cơ bản của bạn. Đây là màu theo một cách nào đó xác định trang web của bạn hoặc chủ đề của trang web. Giống như chúng ta liên kết màu xanh lục với nước giải khát Mountain Dew và người ta có thể nghĩ về màu xanh lam trong mối quan hệ với bầu trời hoặc đại dương, chọn một màu cơ bản thích hợp để đại diện cho trang web của bạn là một nơi tốt để bắt đầu. Có rất nhiều cách để chọn một màu cơ bản;

  • Màu được liên kết tự nhiên với chủ đề nội dung của bạn, chẳng hạn như màu hiện có được xác định với sản phẩm hoặc ý tưởng hoặc màu đại diện cho cảm xúc mà bạn muốn truyền tải
  • Một màu xuất phát từ hình ảnh liên quan đến nội dung của bạn. Nếu bạn đang tạo một trang web về một mặt hàng hoặc sản phẩm nhất định, hãy chọn một màu hiện diện trên mặt hàng đó
  • Duyệt các trang web cho phép bạn xem nhiều bảng màu và hình ảnh hiện có để tìm cảm hứng

Khi cố gắng quyết định màu cơ bản, bạn có thể thấy rằng tiện ích mở rộng trình duyệt cho phép bạn chọn màu từ nội dung web có thể đặc biệt tiện dụng. Một số trong số này thậm chí còn được thiết kế đặc biệt để hỗ trợ loại công việc này. Ví dụ: trang web ColorZilla cung cấp tiện ích mở rộng (Chrome/Firefox) cung cấp công cụ ống nhỏ giọt để chọn màu từ trang web. Nó cũng có thể lấy giá trị trung bình của màu sắc của pixel trong các vùng có kích thước khác nhau hoặc thậm chí một vùng được chọn của trang

Ghi chú. Lợi thế của việc lấy màu trung bình có thể là thường thì những gì trông giống như một màu đơn sắc thực sự là một số lượng màu liên quan khác nhau đáng ngạc nhiên, tất cả được sử dụng đồng bộ, pha trộn để tạo ra hiệu ứng mong muốn. Chỉ chọn một trong những pixel này có thể dẫn đến việc có một màu trông rất lạc lõng

Làm mới bảng màu

Khi bạn đã quyết định màu cơ bản của mình, có rất nhiều công cụ trực tuyến có thể giúp bạn xây dựng bảng màu phù hợp để sử dụng cùng với màu cơ bản bằng cách áp dụng lý thuyết màu cho màu cơ bản của bạn để xác định các màu được thêm vào phù hợp. Nhiều công cụ trong số này cũng hỗ trợ xem các màu được lọc để bạn có thể thấy chúng trông như thế nào đối với những người bị mù màu khác nhau. Xem giải thích ngắn gọn về lý do tại sao điều này quan trọng

Một vài ví dụ (tất cả đều miễn phí sử dụng vào thời điểm danh sách này được sửa đổi lần cuối)

  • Công cụ chọn màu của MDN
  • Paletton
  • Bánh xe màu trực tuyến Adobe Color CC

Khi thiết kế bảng màu của bạn, hãy nhớ rằng ngoài các màu mà các công cụ này thường tạo ra, bạn cũng có thể cần thêm một số màu trung tính cốt lõi như trắng (hoặc gần trắng), đen (hoặc gần đen),

Ghi chú. Thông thường, tốt hơn hết là bạn nên sử dụng số lượng màu nhỏ nhất có thể. Bằng cách sử dụng màu để làm nổi bật thay vì thêm màu vào mọi thứ trên trang, bạn giữ cho nội dung của mình dễ đọc và màu sắc bạn sử dụng có tác động nhiều hơn

Đánh giá đầy đủ về lý thuyết màu sắc nằm ngoài phạm vi của bài viết này, nhưng có rất nhiều bài viết về lý thuyết màu sắc, cũng như các khóa học bạn có thể tìm thấy ở các trường phổ thông và đại học lân cận. Một vài tài nguyên hữu ích về lý thuyết màu sắc

Khoa học màu sắc (Học viện Khan liên kết với Pixar)

Một khóa học trực tuyến giới thiệu các khái niệm như màu sắc là gì, cách cảm nhận màu sắc và cách sử dụng màu sắc để thể hiện ý tưởng. Được trình bày bởi các nghệ sĩ và nhà thiết kế của Pixar

Lý thuyết màu sắc trên Wikipedia

Wikipedia về lý thuyết màu sắc, có rất nhiều thông tin tuyệt vời từ góc độ kỹ thuật. Nó không thực sự là một tài nguyên để giúp bạn trong quá trình lựa chọn màu sắc, nhưng vẫn chứa đầy thông tin hữu ích

Có một số cách màu sắc có thể là một vấn đề tiếp cận. Việc sử dụng màu sắc không đúng cách hoặc bất cẩn có thể dẫn đến một trang web hoặc ứng dụng mà một tỷ lệ phần trăm đối tượng mục tiêu của bạn không thể sử dụng đầy đủ, dẫn đến mất lưu lượng truy cập, mất việc kinh doanh và thậm chí có thể gặp sự cố về quan hệ công chúng. Vì vậy, điều quan trọng là phải xem xét việc sử dụng màu sắc của bạn một cách cẩn thận

Bạn nên làm ít nhất nghiên cứu cơ bản về bệnh mù màu. Có một số loại; . Ngoài ra còn có những người khác, từ không có khả năng phân biệt sự khác biệt giữa các màu nhất định đến hoàn toàn không có khả năng nhìn thấy màu sắc.

Ghi chú. Quy tắc quan trọng nhất. không bao giờ sử dụng màu sắc như là cách duy nhất để biết điều gì đó. Ví dụ: nếu bạn biểu thị thành công hay thất bại của một hoạt động bằng cách thay đổi màu của hình từ trắng sang xanh lục để thành công và đỏ cho thất bại, người dùng bị mù màu đỏ-lục sẽ không thể sử dụng trang web của bạn đúng cách. Thay vào đó, có thể sử dụng cả văn bản và màu sắc cùng nhau để mọi người có thể hiểu điều gì đang xảy ra

Để biết thêm thông tin về bệnh mù màu, hãy xem các bài viết sau

  • medlineplus. Mù màu (Viện Y tế Quốc gia Hoa Kỳ)
  • Học viện nhãn khoa Hoa Kỳ. Mù màu là gì?
  • Mù màu & Thiết kế web (Khả năng sử dụng. chính phủ. Bộ Y tế và Dịch vụ Nhân sinh Hoa Kỳ)

Hãy xem xét một ví dụ nhanh về việc chọn một bảng màu thích hợp cho một trang web. Hãy tưởng tượng rằng bạn đang xây dựng một trang web cho một trò chơi mới diễn ra trên hành tinh sao Hỏa. Vì vậy, hãy tìm kiếm trên Google các bức ảnh về sao Hỏa. Có rất nhiều ví dụ hay về màu sắc của sao Hỏa. Chúng tôi cẩn thận tránh các mô hình và ảnh từ phim. Và chúng tôi quyết định sử dụng một bức ảnh được chụp bởi một trong những tàu đổ bộ sao Hỏa mà nhân loại đã đậu trên bề mặt trong vài thập kỷ qua, vì trò chơi diễn ra trên bề mặt hành tinh. Chúng tôi sử dụng công cụ chọn màu để chọn một mẫu màu mà chúng tôi chọn

Sử dụng công cụ ống nhỏ mắt, chúng tôi xác định màu mà chúng tôi thích và xác định rằng màu được đề cập là 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
47, đây là màu đỏ cam rỉ sét thích hợp rất đặc trưng của bề mặt sao Hỏa

Sau khi chọn màu cơ bản, chúng ta cần xây dựng bảng màu của mình. Chúng tôi quyết định sử dụng Paletton để tạo ra các màu khác mà chúng tôi cần. Khi mở Paletton, chúng ta thấy

Sử dụng css để tạo đường viền màu vàng, dày 1 pixel, bao quanh tất cả các đoạn văn.

Tiếp theo, chúng tôi nhập mã hex của màu (

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
48) vào ô "Base RGB" ở góc dưới cùng bên trái của công cụ

Sử dụng css để tạo đường viền màu vàng, dày 1 pixel, bao quanh tất cả các đoạn văn.

Bây giờ chúng ta thấy một bảng màu đơn sắc dựa trên màu chúng ta đã chọn từ ảnh sao Hỏa. Nếu bạn cần nhiều màu liên quan vì lý do nào đó, thì đó có thể là những màu tốt. Nhưng những gì chúng tôi thực sự muốn là một màu nhấn. Một cái gì đó sẽ bật dọc theo màu cơ bản. Để tìm thấy điều đó, chúng tôi nhấp vào nút chuyển đổi "thêm bổ sung" bên dưới menu cho phép bạn chọn loại bảng màu (hiện tại là "Đơn sắc"). Paletton tính toán một màu nhấn thích hợp;

Sử dụng css để tạo đường viền màu vàng, dày 1 pixel, bao quanh tất cả các đoạn văn.

Nếu bạn không hài lòng với màu được đề xuất cho mình, bạn có thể thay đổi cách phối màu để xem liệu bạn có tìm thấy màu nào mình thích hơn không. Ví dụ: nếu chúng tôi không thích màu xanh lục lam được đề xuất, chúng tôi có thể nhấp vào biểu tượng phối màu Bộ ba, biểu tượng này sẽ hiển thị cho chúng tôi như sau

Sử dụng css để tạo đường viền màu vàng, dày 1 pixel, bao quanh tất cả các đoạn văn.

Màu xanh xám ở trên cùng bên phải trông khá đẹp. Nhấp vào nó, chúng tôi thấy rằng đó là 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
50. Màu đó sẽ được sử dụng làm màu nhấn, được sử dụng một cách tiết kiệm để làm nổi bật mọi thứ, chẳng hạn như trong tiêu đề hoặc làm nổi bật các tab hoặc các chỉ báo khác trên trang web

Sử dụng css để tạo đường viền màu vàng, dày 1 pixel, bao quanh tất cả các đoạn văn.

Bây giờ chúng tôi có màu cơ bản và điểm nhấn của chúng tôi. Trên hết, chúng tôi có một vài sắc thái bổ sung cho mỗi màu, chỉ trong trường hợp chúng tôi cần chúng cho độ dốc và những thứ tương tự. Màu sắc sau đó có thể được xuất ra ở một số định dạng để bạn có thể sử dụng chúng

Khi đã có những màu này, chắc hẳn bạn vẫn sẽ cần chọn những gam màu trung tính phù hợp. Thực hành thiết kế phổ biến là cố gắng tìm điểm thích hợp nơi có độ tương phản vừa đủ để văn bản rõ nét và dễ đọc nhưng không đủ độ tương phản để trở nên khó chịu cho mắt. Bằng cách này hay cách khác, rất dễ đi quá xa, vì vậy hãy đảm bảo nhận phản hồi về màu sắc của bạn sau khi bạn đã chọn chúng và có sẵn các ví dụ về chúng đang được sử dụng. Nếu độ tương phản quá thấp, văn bản của bạn sẽ có xu hướng bị xóa bởi nền, khiến nó không thể đọc được, nhưng nếu độ tương phản của bạn quá cao, người dùng có thể thấy trang web của bạn sặc sỡ và khó nhìn.

Những gì có vẻ tốt trên màn hình có thể trông rất khác trên giấy. Ngoài ra, mực có thể đắt và nếu người dùng đang in trang của bạn, họ không nhất thiết cần tất cả các hình nền và những thứ như vậy sẽ sử dụng hết mực quý giá của họ khi tất cả những gì quan trọng là chính văn bản. Theo mặc định, hầu hết các trình duyệt đều xóa hình nền khi in tài liệu

Nếu màu nền và hình ảnh của bạn đã được chọn cẩn thận và/hoặc rất quan trọng đối với tính hữu dụng của nội dung, bạn có thể sử dụng thuộc tính CSS 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
51 để báo cho trình duyệt biết rằng nó không nên điều chỉnh hình thức của nội dung

Giá trị mặc định của 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
51, 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
53, cho biết rằng trình duyệt được phép thực hiện các thay đổi về giao diện khi xét thấy cần thiết để cố gắng tối ưu hóa mức độ dễ đọc và/hoặc tính kinh tế khi in của nội dung, dựa trên loại thiết bị đầu ra mà tài liệu đang được vẽ

Bạn có thể đặt 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
51 thành 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
55 để cho trình duyệt biết rằng phần tử hoặc các phần tử mà bạn sử dụng nó được thiết kế đặc biệt để hoạt động tốt nhất với màu sắc và hình ảnh nguyên trạng. Với bộ này, trình duyệt sẽ không can thiệp vào giao diện của phần tử và sẽ vẽ phần tử đó theo chỉ định của CSS của bạn

Ghi chú. Tuy nhiên, không có gì đảm bảo rằng 

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
56 sẽ dẫn đến CSS của bạn được sử dụng chính xác như đã cho. Nếu trình duyệt cung cấp tùy chọn người dùng để thay đổi đầu ra (chẳng hạn như hộp kiểm "không in nền" trong hộp thoại in), thì điều đó sẽ ghi đè giá trị của 
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>
51

Lệnh HTML nào được sử dụng để đặt kích thước của hình ảnh thành chiều rộng 250 pixel và chiều cao 400 pixel?

Thuộc tính height được sử dụng để đặt chiều cao của hình ảnh theo pixel. Thuộc tính chiều rộng

Làm cách nào để tạo đường viền trong HTML?

Có thể áp dụng đường viền cho hầu hết các phần tử HTML trong phần nội dung. Để tạo đường viền xung quanh một phần tử, tất cả những gì bạn cần là kiểu đường viền . Các giá trị có thể là solid , dotted , dashed , double , Groove , ridge , inset và outset.

programming css

Bài Viết Liên Quan

Vệ sinh chuồng trại cần thực hiện như thế nào năm 2024
Vệ sinh chuồng trại cần thực hiện như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào
60 lê văn thiêm nhân chính hà nội năm 2024
60 lê văn thiêm nhân chính hà nội năm 2024

mẹo hay
Giải bài 4 sgk toán 9 tập 1 trang 69 năm 2024
Giải bài 4 sgk toán 9 tập 1 trang 69 năm 2024

mẹo hay
Fix lỗi không vào được messenger trên iphone năm 2024
Fix lỗi không vào được messenger trên iphone năm 2024

mẹo hay Công Nghệ Iphone
Lỗi không đánh được tiếng việt trong google chrome năm 2024
Lỗi không đánh được tiếng việt trong google chrome năm 2024

mẹo hay Công Nghệ Google
Lỗi không tìm thấy máy khác trong mạng lan năm 2024
Lỗi không tìm thấy máy khác trong mạng lan năm 2024

mẹo hay Công Nghệ Máy
Lỗi application blocked by java security trên windows 10 năm 2024
Lỗi application blocked by java security trên windows 10 năm 2024

mẹo hay
Câu chuyện ngọn đuốc sống lê văn tám năm 2024
Câu chuyện ngọn đuốc sống lê văn tám năm 2024

mẹo hay
Máy tính hay bị tự khởi động là lỗi gì năm 2024
Máy tính hay bị tự khởi động là lỗi gì năm 2024

mẹo hay Công Nghệ Máy tính Máy
Thời tiết tết nguyên đán 2023 ở thanh hóa năm 2024
Thời tiết tết nguyên đán 2023 ở thanh hóa năm 2024

mẹo hay
Hàng hóa tiền tệ thị trường lớp 11 ngắn gọn năm 2024
Hàng hóa tiền tệ thị trường lớp 11 ngắn gọn năm 2024

mẹo hay Học Tốt Trường lớp Cryto Thị trường
Bài tập trắc nghiệm so too either neither năm 2024
Bài tập trắc nghiệm so too either neither năm 2024

mẹo hay Khỏe Đẹp Bài tập
Nên mua điện thoại nào tầm 6 triệu năm 2024
Nên mua điện thoại nào tầm 6 triệu năm 2024

mẹo hay
An toàn hóa chất theo thoong tư 31 năm 2024
An toàn hóa chất theo thoong tư 31 năm 2024

mẹo hay
Giá vé máy bay từ thanh hóa đi sài gòn năm 2024
Giá vé máy bay từ thanh hóa đi sài gòn năm 2024

mẹo hay Công Nghệ Máy Cryto Giá
Áo dài phan hải 57 lê văn hưu năm 2024
Áo dài phan hải 57 lê văn hưu năm 2024

mẹo hay
Giải bài tập toán lớp 6 tập 2 trang 21 năm 2024
Giải bài tập toán lớp 6 tập 2 trang 21 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Quyết toán dự án hoàn thành là gì năm 2024
Quyết toán dự án hoàn thành là gì năm 2024

mẹo hay Hỏi Đáp Là gì
Binh luan bài tập 2 trag 172 hóa 11 năm 2024
Binh luan bài tập 2 trag 172 hóa 11 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Bài tập toán 8 tập 2 trang 17 năm 2024
Bài tập toán 8 tập 2 trang 17 năm 2024

mẹo hay Khỏe Đẹp Bài tập

Quảng Cáo

Có thể bạn quan tâm

Bài 4 trang 118 sgk hóa 11 nang cao năm 2024
1 ngày trước . bởi OverturnedJenny
Authoring work 4 bị lỗi ko add được file mp4 năm 2024
1 ngày trước . bởi IrrevocableCheck-in
Enterogermina là men tiêu hóa hay men vi sinh năm 2024
1 ngày trước . bởi SlidingLigament
Phân chia tài sản khi ly hôn như thế nào năm 2024
1 ngày trước . bởi InsensitiveClimber
Các bài thơ trong sách ngữ văn 11 tập 2 năm 2024
1 ngày trước . bởi ImpracticalBullion
Bài văn số 6 văn 8 đề 2 năm 2024
1 ngày trước . bởi FearlessYoungster
Cá câu 5 đề toán thi vào lớp 10 năm 2024
1 ngày trước . bởi SturdyContents
Sửa lỗi photoshop 2023 không vào được camera raw năm 2024
1 ngày trước . bởi ExhaustingComplexity
Cách tẩy vết bẩn trên hóa đơn đỏ năm 2024
1 ngày trước . bởi PedagogicalMutation
Bài tập tính khối lượng bit bang go back n năm 2024
1 ngày trước . bởi RelentlessBones

Toplist được quan tâm

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
7 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
7 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
7 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
7 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
7 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
7 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
7 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
7 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
7 tháng trước

Quảng cáo

Xem Nhiều

Quyết định 416 qđ-qld 42 thuốc bhxh ngưng thanh toán năm 2024
1 tuần trước . bởi Cross-leggedEvacuation
Chúng đang tiến hóa và không ngừng đột biến năm 2024
2 ngày trước . bởi RewardingMetaphysics
Chi phí bốc xếp hàng hóa vào container năm 2024
6 ngày trước . bởi MaximumTherapy
Chay xe đạp với đi bộ cái nào tốt hơn năm 2024
1 ngày trước . bởi HornyCylinder
Công thức hóa học của từng loại vitamin năm 2024
4 ngày trước . bởi IncompatibleJenny
Sửa lỗi tự tắt htkk 4.1.6 năm 2024
1 tuần trước . bởi LankyOxygen
Các dạng bài tập nguyên lý thống kê kinh tế năm 2024
1 tuần trước . bởi GivenInterval
Top phong mạch uy tin tại hcm alobacsi năm 2024
1 tuần trước . bởi EstimatedNuisance
Toán ôn tập về biểu đồ lớp 5 năm 2024
2 ngày trước . bởi OutdoorPriesthood

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Xây Nhà Inc.