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

Các hàm màu CSS hiện đại: rgba(), hsl(), oklch() và hơn thế nữa

· Thẻ: css, color-functions, oklch, modern-css, web-development, rgba, hsl

Các hàm màu CSS hiện đại: rgba(), hsl(), oklch() và hơn thế nữa

Các hàm màu CSS đã tiến hóa một cách đáng kể. Thứ từng là sự lựa chọn giữa hex, rgb() và hsl() giờ đây là một hệ sinh thái phong phú gồm các không gian màu và hàm thao tác giúp nhà phát triển có quyền kiểm soát chưa từng có đối với biểu diễn màu sắc, phép nội suy (interpolation) và khả năng truy cập.

Hướng dẫn này bao quát mọi hàm màu CSS chính có sẵn trong năm 2026, từ những hàm quen thuộc đến những hàm tiên tiến nhất.

RGB và RGBA: Những con ngựa thồ

Hàm rgb() định nghĩa màu sắc bằng mô hình màu cộng đỏ-lục-lam. Nó đã là một phần của CSS kể từ CSS1 và được hỗ trợ trong mọi trình duyệt từng được tạo ra.

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

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

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

Những thay đổi chính trong RGB hiện đại

CSS Color Level 4 giới thiệu hai cải tiến quan trọng:

  1. Phân tách bằng khoảng trắng thay vì dấu phẩy — Hàm rgb() giờ đây chấp nhận các giá trị phân tách bằng khoảng trắng hoặc dấu gạch chéo
  2. Cú pháp alpha hợp nhất — Bí danh rgba() đã bị phản đối (nhưng vẫn được hỗ trợ). rgb() giờ đây chấp nhận nguyên bản một kênh alpha

Cú pháp hiện đại này được hỗ trợ trong tất cả trình duyệt phát hành từ năm 2020. Đối với dự án mới, hãy dùng cú pháp hiện đại và bỏ qua hoàn toàn bí danh rgba().

Các kênh RGB

Mỗi kênh RGB chấp nhận:

  • Một số nguyên từ 0 đến 255
  • Một phần trăm từ 0% đến 100%
  • Từ khóa none cho các kênh bị thiếu (CSS Color Level 4)

Từ khóa none hữu ích khi nội suy màu sắc — nó báo cho trình duyệt không nội suy kênh cụ thể đó.

HSL và HSLA: Kiểm soát màu trực quan

HSL là viết tắt của Hue, Saturation, Lightness. Nó sử dụng một hệ tọa độ trụ ánh xạ tự nhiên đến cách con người nghĩ về màu sắc.

/* H là góc hue (0-360), S là saturation (0-100%), L là lightness (0-100%) */
color: hsl(0 100% 50%);        /* Đỏ thuần */
color: hsl(0 100% 50% / 0.5);  /* Đỏ ở độ mờ đục 50% */

/* Góc hue có đơn vị */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Bảng tham chiếu góc Hue

| Hue | Màu | Hex | |-----|---------|----------| | 0 | Đỏ | #FF0000 | | 30 | Cam | #FF8000 | | 60 | Vàng | #FFFF00 | | 120 | Lục | #00FF00 | | 180 | Xanh lơ | #00FFFF | | 240 | Lam | #0000FF | | 300 | Đỏ tươi | #FF00FF |

HSL là lựa chọn tốt nhất để tạo bảng màu theo cách lập trình vì chỉ thay đổi kênh lightness hoặc saturation là tạo ra các biến thể trực quan nhất quán.

HWB: Pha trộn với trắng và đen

HWB (Hue, Whiteness, Blackness) là một giải pháp thay thế trực quan hơn cho HSL. Bạn chọn một hue, sau đó thêm độ trắng và độ đen để tạo các tông sáng (tints) và sắc độ (shades).

color: hwb(0 0% 0%);    /* Đỏ thuần */
color: hwb(0 40% 0%);   /* Đỏ tông sáng (thêm trắng) */
color: hwb(0 0% 40%);   /* Đỏ sắc độ (thêm đen) */
color: hwb(0 20% 20%);  /* Tông màu (trắng + đen) */

HWB đơn giản hơn HSL cho một trường hợp sử dụng cụ thể: tạo các biến thể tông sáng và sắc độ của một màu thương hiệu. Bạn không bao giờ cần nghĩ về các đường cong saturation — chỉ cần thêm trắng hoặc đen.

Hỗ trợ trình duyệt: HWB được hỗ trợ trong tất cả trình duyệt hiện đại (Chrome 101+, Firefox 96+, Safari 15+).

LAB và LCH: Các không gian màu đồng nhất về mặt tri giác

LAB (Lightness, trục A, trục B) và LCH (Lightness, Chroma, Hue) là các không gian màu đồng nhất về mặt tri giác. Điều này có nghĩa khoảng cách Euclid giữa hai giá trị màu tương ứng với sự khác biệt thị giác cảm nhận được — điều mà RGB và HSL không thể làm được.

color: lab(50% 50 0);        /* Đỏ trung bình */
color: lch(50% 50 0);        /* Cùng màu ở dạng trụ */

Tại sao tính đồng nhất về mặt tri giác lại quan trọng:

  • Gradient — Nội suy trong LAB hoặc LCH tạo ra các chuyển tiếp mượt mà, tự nhiên mà không có "vùng đục" nhàm chán mà gradient RGB tạo ra
  • Đo lường khác biệt màu — Delta E (thước đo khác biệt tri giác) có ý nghĩa trong không gian LAB
  • Khả năng truy cập — Tính đồng nhất về mặt tri giác giúp dự đoán màu sắc sẽ được cảm nhận như thế nào bởi người dùng có khiếm khuyết thị giác màu

Hạn chế: LAB và LCH có thể tạo ra các màu nằm ngoài gamut sRGB. Các màu này sẽ bị cắt bớt khi hiển thị trên màn hình sRGB nhưng có thể hiển thị được trên màn hình gamut rộng (DCI-P3, Rec. 2020).

Hỗ trợ trình duyệt: Được hỗ trợ trong Chrome 111+, Firefox 113+, Safari 15+. Không hỗ trợ IE hoặc Edge kế thừa.

OKLAB và OKLCH: Tiêu chuẩn tri giác hiện đại

OKLCH là một phiên bản cải tiến của LCH do Bjorn Ottosson phát triển. Nó sửa các điểm bất đồng nhất tri giác trong LCH, đặc biệt đối với các hue xanh lam. OKLCH đã trở thành không gian màu mặc định được khuyến nghị cho các dự án CSS mới trong giai đoạn 2025-2026.

color: oklch(60% 0.2 30);
/* Lightness: 0-100%, Chroma: 0-~0.4, Hue: 0-360 */

Tại sao OKLCH là không gian màu tốt nhất cho CSS

  1. Tính đồng nhất tri giác tốt nhất — Các thay đổi số bằng nhau tạo ra các thay đổi thị giác bằng nhau trên mọi hue
  2. Lightness có thể dự đoán — Các màu ở cùng giá trị lightness thực sự trông sáng bằng nhau
  3. Không có gradient đục — Phép nội suy luôn sạch sẽ trên toàn bộ dải hue
  4. An toàn sRGB theo mặc định — Hầu hết giá trị OKLCH tạo ra màu sRGB trong gamut
  5. Kênh trực quan — Giống HSL nhưng có độ chính xác tri giác thực sự

OKLCH trong thực tế

/* Tạo một thang màu cân bằng bằng OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Lưu ý rằng mỗi bậc thay đổi gần như cùng một giá trị lightness (20 điểm phần trăm). Vì OKLCH đồng nhất về mặt tri giác, các bậc này trông cách đều nhau đối với mắt người — điều khó đạt được với HSL.

Hỗ trợ trình duyệt: OKLCH được hỗ trợ trong Chrome 111+, Firefox 113+, Safari 15.4+. Nó nhanh chóng trở thành không gian màu hiện đại được khuyến nghị nhiều nhất.

Color-Mix: Pha trộn màu trong CSS

Hàm color-mix() pha trộn hai màu trong một không gian màu được chỉ định:

/* Trộn đỏ và lam bằng nhau trong sRGB */
color: color-mix(in srgb, red, blue);

/* 30% primary, 70% trắng — một tông sáng */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Trộn với không gian màu tri giác để có kết quả mượt mà */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

Tham số in <color-space> cho phép bạn kiểm soát không gian nội suy. Trong hầu hết các trường hợp, in oklch tạo ra kết quả trực quan tốt nhất.

Các trường hợp sử dụng:

  • Tạo tông sáng và sắc độ mà không cần hàm tiền xử lý
  • Xây dựng các biến thể thành phần từ một token màu duy nhất
  • Tạo trạng thái hover và active một cách động
  • Tạo hiệu ứng giống gradient trong một hàm duy nhất

Cú pháp màu tương đối: Sửa đổi các màu hiện có

CSS Color Level 4 cho phép bạn suy ra các màu mới từ các màu hiện có bằng cách sửa đổi từng kênh:

--primary: #3366cc;

/* Sử dụng các kênh OKLCH */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* Sử dụng các kênh HSL */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

Từ khóa from <color> giải nén các kênh của màu nguồn vào các kênh của hàm đích, sau đó bạn có thể điều chỉnh chúng bằng phép số học.

Các từ khóa kênh theo không gian màu

Mỗi không gian màu phơi bày các từ khóa kênh cụ thể:

| Không gian màu | Các từ khóa | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Tổng quan hỗ trợ trình duyệt (2026)

| Hàm | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | Tất cả | Tất cả | Tất cả | Tất cả | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Cú pháp màu tương đối | 111+ | 113+ | 16.2+ | 111+ |

Tất cả các hàm màu hiện đại đều an toàn để sử dụng vào năm 2026 cho các dự án không yêu cầu hỗ trợ Internet Explorer. Để tương thích rộng hơn, hãy dùng một bước xây dựng (build step) chuyển đổi cú pháp hiện đại thành hex hoặc rgb() kế thừa.

Các khuyến nghị thực tế

  • Đối với dự án hiện có — HSL vẫn là sự cân bằng tốt nhất giữa khả năng đọc và khả năng
  • Đối với dự án mới — Dùng OKLCH làm không gian màu chính vì độ chính xác tri giác của nó
  • Đối với gradient — Luôn nội suy trong OKLCH để tránh chuyển tiếp đục
  • Đối với hệ thống thiết kế — Lưu các màu cơ sở trong OKLCH, tạo biến thể bằng color-mix() hoặc cú pháp tương đối
  • Đối với canvas/WebGL — Bám theo RGB, vốn là gốc của quy trình kết xuất (rendering pipeline)

Kết luận

Các hàm màu CSS hiện đại đã biến đổi những gì bạn có thể làm với màu sắc trên web. OKLCH cung cấp tính đồng nhất tri giác giúp thiết kế hệ thống màu trở nên dễ dự đoán. color-mix() và cú pháp màu tương đối loại bỏ nhu cầu về các hàm màu tiền xử lý. Cùng nhau, các công cụ này mang lại cho nhà phát triển web sức mạnh màu sắc tương đương với những gì các công cụ thiết kế đã cung cấp trong nhiều năm — giờ đây trực tiếp trong trình duyệt.

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 giữa tất cả định dạng màu CSS hiện đại bao gồm OKLCH, LAB, HWB và HEX/RGB/HSL cổ điển.