HEX, RGB và HSL là gì?
Ba định dạng mã màu phổ biến nhất trên web đều mô tả cùng một màu trong không gian sRGB, chỉ khác cách ghi:
- HEX viết màu bằng hệ thập lục phân, dạng #RRGGBB (hoặc rút gọn #RGB). Đây là định dạng quen thuộc trong CSS, design token và hầu hết công cụ thiết kế.
- RGB tách màu thành ba kênh Đỏ – Xanh lục – Xanh dương, mỗi kênh từ 0 đến 255. Dễ hiểu khi làm việc với phần cứng màn hình hoặc chỉnh từng kênh trong code.
- HSL mô tả màu theo Hue (góc sắc trên vòng màu 0–360°), Saturation (độ bão hòa 0–100%) và Lightness (độ sáng 0–100%). HSL rất tiện khi bạn muốn làm màu nhạt hơn, đậm hơn hoặc xoay sang màu bổ túc mà không phải đoán lại mã HEX.
Công cụ phía trên chuyển đổi qua lại giữa ba định dạng theo thời gian thực: đổi một ô thì các ô còn lại và khung xem trước cập nhật ngay. Toàn bộ phép tính chạy trên trình duyệt, không gửi mã màu lên máy chủ.
Khi nào nên dùng HEX, RGB hay HSL?
- Dùng HEX khi copy-paste vào CSS, Tailwind config, Figma token hoặc chia sẻ nhanh với đồng đội — ngắn gọn và chuẩn web.
- Dùng RGB khi cần chỉnh từng kênh, hoặc khi API / canvas / thư viện đồ họa yêu cầu giá trị 0–255.
- Dùng HSL khi thiết kế hệ màu: tăng Lightness để tạo tint (màu nhạt), giảm Lightness để tạo shade (màu đậm), cộng 180° vào Hue để lấy màu bổ túc (complementary). Đây cũng là cách phối màu ổn định hơn so với chỉnh mù HEX.
Mẹo phối màu nhanh với tints, shades và complementary
Một bảng màu hài hòa thường bắt đầu từ một màu chủ đạo. Từ màu đó:
- Tạo 5 sắc độ nhạt và 5 sắc độ đậm bằng cách bước Lightness về phía trắng hoặc đen — giữ nguyên Hue và Saturation.
- Lấy màu bổ túc bằng cách cộng 180° vào Hue; cặp này tạo độ tương phản mạnh, hợp nút kêu gọi hành động hoặc điểm nhấn.
- Kiểm tra độ tương phản chữ/nền trước khi chốt: màu rất sáng hoặc rất tối có thể cần đổi màu chữ (công cụ tự đảo chữ trắng/đen trên ô xem trước để bạn đọc được mã).
Ví dụ: bắt đầu với #3B82F6 (xanh dương). Tints cho nền nhạt, shades cho hover/active, complementary khoảng cam-vàng để làm điểm nhấn. Sao chép HEX, RGB hoặc HSL tùy nơi bạn đang viết code.
Cách dùng công cụ
Chọn màu bằng bảng màu trực quan hoặc nhập tay HEX / RGB / HSL. Khi mã nhập sai (ký tự lạ, thiếu chữ số, kênh ngoài khoảng), công cụ báo lỗi tiếng Việt và không làm treo trang. Nhấn nút sao chép cạnh từng định dạng, hoặc sao chép cả ba dòng cùng lúc để dán vào tài liệu thiết kế.
Dùng chung với các công cụ khác
Khi làm bộ nhận diện hoặc giao diện, màu thường đi cùng hình ảnh. Nếu ảnh của bạn quá nặng cho web, nén ảnh và đổi kích thước ảnh giúp trang tải nhanh hơn mà mắt thường khó nhận ra khác biệt.
Cần một mã QR mang màu thương hiệu để in lên tờ rơi hay standee, công cụ tạo mã QR cho phép đặt màu nền và màu mã — nhớ giữ độ tương phản đủ cao, vì mã QR quá ít tương phản thì camera điện thoại không đọc được. Khi khai báo màu trong file cấu hình theme, công cụ format JSON giúp kiểm tra cú pháp trước khi commit.