Mã Màu HEX ↔ RGB ↔ HSL

Chuyển đổi mã màu HEX RGB HSL

Trong thiết kế web và lập trình giao diện, màu sắc được biểu diễn theo nhiều định dạng khác nhau. Hiểu và chuyển đổi giữa các định dạng này giúp bạn làm việc linh hoạt hơn với CSS, Figma, Photoshop và các công cụ thiết kế khác.

Các định dạng mã màu phổ biến

• HEX: Biểu diễn màu bằng hệ thập lục phân (0–F), gồm 6 ký tự sau dấu #. Ví dụ: #3D5AFE. Phổ biến nhất trong HTML/CSS.
• RGB: Red–Green–Blue, mỗi kênh từ 0–255. Ví dụ: rgb(61, 90, 254). Dùng nhiều trong CSS và canvas.
• HSL: Hue (màu sắc 0–360°), Saturation (độ bão hòa %), Lightness (độ sáng %). Trực quan hơn khi điều chỉnh màu.

Khi nào dùng định dạng nào?

• Dùng HEX khi copy màu từ design file (Figma, Zeplin) vào CSS.
• Dùng RGB / RGBA khi cần điều chỉnh độ trong suốt (rgba(61, 90, 254, 0.5)).
• Dùng HSL khi muốn tạo bảng màu nhất quán — chỉ thay đổi Lightness để có màu tối/sáng hơn.