3 cách để chỉ định màu sắc trong html là gì?

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

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

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>

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>

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>

Đị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 để 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>

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>

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

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

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

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

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

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>

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

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

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 để tìm hiểu về mối quan hệ giữa các phần tử 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%)

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

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

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

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

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

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 trái và 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)

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

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

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

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

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

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

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 cách sử dụng phần tử

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

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

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

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ư

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

Xem Màu được đặt tên để biết thêm thông tin về từ khóa màu

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ự

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

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 _______38_______8, thành phần màu lục là _______38_______9 và thành phần màu lam là _______48_______0

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

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

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

Chỉ định một màu có thành phần màu đỏ là số thập lục phân _______38_______8, thành phần màu xanh lá cây là ____38_______9 và thành phần màu xanh dương là _______48_______0

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

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

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

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

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

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

Ký hiệu chức năng RGB (Đỏ/Xanh lá cây/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à

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

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

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

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

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

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

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

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

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 theo bất kỳ đơn vị

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

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 {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
  text-align: left;
}

th {
  background-color: hsl(0, 0%, 75%);
}

<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ị của màu sắc, nó được coi là độ (

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

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

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

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 thành phần—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 thành phần. 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

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

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

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

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

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

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>

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

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

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

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