🎨
← Quay lại hướng dẫn

HEX vs RGB vs HSL: Bạn nên sử dụng định dạng màu nào?

· Thẻ: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX vs RGB vs HSL: Bạn nên sử dụng định dạng màu nào?

CSS cung cấp nhiều cách để định nghĩa màu sắc, nhưng ba định dạng phổ biến nhất là HEX, RGB và HSL. Mỗi định dạng có những điểm mạnh riêng biệt, và biết khi nào nên dùng từng loại có thể cải thiện đáng kể khả năng bảo trì stylesheet của bạn cũng như khả năng tạo các hệ thống màu động. Hướng dẫn này phân tích từng định dạng để bạn có thể chọn đúng cho mọi tình huống.

Định dạng màu HEX: Tiêu chuẩn của ngành

Màu HEX (thập lục phân) là định dạng được sử dụng rộng rãi nhất trong thiết kế web. Một màu hex được viết dưới dạng # theo sau là sáu chữ số thập lục phân đại diện cho các giá trị đỏ, lục và lam theo thứ tự đó.

#FF5733
  • #FF — Đỏ (255 ở hệ thập phân)
  • #57 — Lục (87 ở hệ thập phân)
  • #33 — Lam (51 ở hệ thập phân)

Các biến thể của HEX

HEX hỗ trợ một số ký hiệu cho các nhu cầu khác nhau:

/* Hex sáu chữ số tiêu chuẩn */
color: #FF5733;

/* Rút gọn — các cặp giống hệt nhau rút lại thành ba chữ số */
color: #F53; /* Khai triển thành #FF5533 */

/* Hex tám chữ số với kênh alpha */
color: #FF573380; /* Độ mờ đục 50% */

HEX rút gọn hoạt động khi mỗi cặp sử dụng các ký tự khớp nhau: #AABBCC trở thành #ABC. Đây hoàn toàn chỉ là một quy ước tiết kiệm chỗ được mọi trình duyệt hỗ trợ.

HEX tám chữ số (#RRGGBBAA) bổ sung độ trong suốt alpha. Giá trị alpha nằm trong khoảng từ 00 (hoàn toàn trong suốt) đến FF (hoàn toàn mờ đục). Hỗ trợ trình duyệt cho hex 8 chữ số là rất tốt trong mọi trình duyệt hiện đại.

Rút gọn bốn chữ số (#RGBA) cũng tồn tại: #F538 khai triển thành #FF553388.

Khi nào nên dùng HEX

  • Sao chép từ công cụ thiết kế — Figma, Sketch và Adobe XD đều xuất ra hex theo mặc định
  • Các màu thương hiệu được mã hóa cứng — Hex không mơ hồ và gọn gàng cho các giá trị không bao giờ thay đổi
  • Tài liệu và bản mô phỏng (mockups) — Hex là định dạng dễ nhận biết nhất giữa các nhà thiết kế và nhà phát triển
  • Thuộc tính tùy chỉnh CSS — Lưu trữ token thương hiệu ở dạng hex là thông lệ phổ biến

Khi nào nên tránh HEX

  • Thao tác màu lập trình — Điều chỉnh từng kênh yêu cầu phân tích chuỗi
  • Tạo hệ thống màu — Tạo các biến thể sáng hơn hoặc tối hơn liên quan đến phép toán không đơn giản
  • Truyền đạt ý định màu sắc — Hex không cung cấp thông tin ngữ nghĩa nào về màu

Định dạng màu RGB: Kiểm soát kênh

RGB là viết tắt của Red, Green, Blue (Đỏ, Lục, Lam). Trong CSS, nó được viết dưới dạng một hàm với các giá trị từ 0 đến 255 hoặc phần trăm (0% đến 100%).

/* Cú pháp phân tách bằng dấu phẩy kế thừa */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* Cú pháp phân tách bằng khoảng trắng hiện đại */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* Giá trị phần trăm */
color: rgb(100% 34% 20%);

Các cải tiến cú pháp RGB hiện đại

Đặc tả CSS Color Level 4 đã hiện đại hóa hàm rgb() theo hai cách quan trọng:

  1. Giá trị phân tách bằng khoảng trắng — Dấu phẩy không còn bắt buộc, giúp cú pháp sạch hơn
  2. Alpha phân tách bằng dấu gạch chéo — Bí danh rgba() không còn cần thiết; rgb() giờ đây chấp nhận một kênh alpha tùy chọn

Cả cú pháp kế thừa và hiện đại đều được hỗ trợ đầy đủ, nhưng cú pháp hiện đại được khuyến nghị cho mã mới.

Khi nào nên dùng RGB

  • Canvas và WebGL — Các API dữ liệu hình ảnh trả về giá trị pixel ở dạng RGB
  • Điều chỉnh màu số học — Khi bạn có các giá trị đỏ, lục và lam được lưu dưới dạng các biến riêng biệt
  • Dịch từ đặc tả thiết kế — Một số hệ thống thiết kế chỉ định màu dưới dạng bộ ba RGB
  • Làm việc với bộ chọn màu — Nhiều giao diện bộ chọn màu dùng thanh trượt 0-255

Khi nào nên tránh RGB

  • Tạo bảng màu gắn kết — Điều chỉnh cả ba kênh độc lập khiến việc điều chỉnh nhất quán trở nên khó khăn
  • Khả năng đọc của con người — rgb(123, 45, 67) không cho biết ngay nó đại diện cho màu gì

Định dạng màu HSL: Màu sắc thân thiện với con người

HSL là viết tắt của Hue, Saturation và Lightness. Định dạng này trực quan hơn đối với con người vì nó tách màu sắc (hue) khỏi cường độ (saturation) và độ sáng (lightness).

/* Cú pháp kế thừa */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* Cú pháp hiện đại */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

Hiểu các kênh HSL

Hue (0-360) — Góc màu trên bánh xe màu. Đây là thành phần trả lời "màu gì":

| Giá trị Hue | Màu | |-----------|---------| | 0 hoặc 360 | Đỏ | | 30 | Cam | | 60 | Vàng | | 120 | Lục | | 180 | Xanh lơ | | 240 | Lam | | 300 | Đỏ tươi |

Saturation (0-100%) — Màu sắc mãnh liệt hay sống động đến mức nào. 0% tạo ra một tông xám; 100% là phiên bản thuần nhất của hue.

Lightness (0-100%) — Màu sáng hay tối. 0% luôn là đen, 50% là phiên bản "bình thường" của hue và 100% luôn là trắng.

Tại sao HSL vượt trội cho hệ thống màu

HSL làm cho các tác vụ khó trong HEX hoặc RGB trở nên cực kỳ đơn giản:

/* Màu thương hiệu chính */
--brand: hsl(220, 80%, 50%);

/* Trạng thái hover — sáng hơn một chút */
--brand-hover: hsl(220, 80%, 60%);

/* Trạng thái active — tối hơn một chút */
--brand-active: hsl(220, 80%, 40%);

/* Trạng thái disabled — giảm bão hòa */
--brand-disabled: hsl(220, 30%, 70%);

/* Tông nền — rất sáng */
--brand-bg: hsl(220, 40%, 95%);

Với HSL, mọi biến thể chỉ là một thay đổi một biến. Điều này không thể thực hiện được với HEX và rườm rà với RGB.

Khi nào nên dùng HSL

  • Tạo bảng màu — HSL là tiêu chuẩn thực tế cho việc tạo token thiết kế
  • Chủ đề và chế độ tối — Hoán đổi giá trị lightness để tạo biến thể chế độ tối
  • Trạng thái hover và focus — Điều chỉnh lightness theo một tỷ lệ phần trăm cố định
  • Điều chỉnh khả năng truy cập — Tăng độ tương phản lightness mà không thay đổi màu
  • Bộ chọn màu tương tác — Thanh trượt HSL trực quan hơn thanh trượt RGB

Bảng so sánh nhanh

| Đặc điểm | HEX | RGB | HSL | |---------|-----|-----|-----| | Khả năng đọc ở mức pixel | Kém | Trung bình | Tốt | | Ngữ nghĩa kênh | Khó hiểu | Số học | Tri giác | | Điều chỉnh lập trình | Khó | Trung bình | Dễ | | Độ trong suốt alpha | Hex 8 chữ số | rgb(R G B / A) | hsl(H S% L% / A) | | Hỗ trợ trình duyệt | Xuất sắc | Xuất sắc | Xuất sắc | | Cú pháp hiện đại | Không | Có | Có | | Mặc định của công cụ thiết kế | Có | Phổ biến | Hiếm | | Sự phù hợp cho hệ thống màu | Kém | Khá | Xuất sắc |

Hỗ trợ trình duyệt: Cả ba đều an toàn

HEX, RGB và HSL được hỗ trợ trình duyệt giống hệt nhau. Cả ba hoạt động trong mọi trình duyệt phát hành kể từ Internet Explorer 9. Cú pháp phân tách bằng khoảng trắng hiện đại (rgb(255 0 0 / 0.5)) được hỗ trợ trong tất cả trình duyệt phát hành từ năm 2020. Không có lý do tương thích nào để chọn định dạng này hơn định dạng kia.

Khung ra quyết định thực tế

Chọn định dạng của bạn dựa trên việc bạn đang làm gì:

  1. Sao chép từ bản mô phỏng thiết kế? Dùng HEX — đó là thứ các công cụ thiết kế xuất ra.
  2. Xây dựng hệ thống token thiết kế? Dùng HSL — nó làm cho việc tạo bảng màu trở nên đơn giản.
  3. Làm việc với canvas hoặc dữ liệu hình ảnh? Dùng RGB — các API pixel sử dụng RGB nguyên bản.
  4. Viết một quy tắc kiểu dùng một lần? Dùng HEX — nó gọn nhất.
  5. Tạo chuyển tiếp màu động? Dùng HSL — nội suy hue tạo hiệu ứng cầu vồng; nội suy RGB tạo các trung gian đục.

Chuyển đổi giữa mọi định dạng

Sử dụng công cụ chuyển đổi màu trực tuyến miễn phí của chúng tôi để chuyển đổi ngay lập tức giữa HEX, RGB, HSL và các định dạng màu CSS khác. Không còn phép toán thủ công hay tìm kiếm trong DevTools trình duyệt.