HEX to RGB Converter

Chuyển đổi mã màu HEX sang RGB và ngược lại, kết quả hiển thị ngay lập tức.

Về công cụ chuyển đổi HEX sang RGB

Công cụ này chuyển đổi mã màu HEX sang RGB và ngược lại, giúp bạn làm việc nhanh hơn khi viết CSS, thiết kế giao diện trong Figma hoặc Canva, hay chỉnh màu trong các thư viện JavaScript.

Khác biệt giữa HEX và RGB

  • HEX: dạng #ff0000 gồm ký hiệu # và 6 chữ số hex, dùng phổ biến trong HTML và CSS.
  • RGB: dạng rgb(255, 0, 0) với ba giá trị từ 0 đến 255, dùng khi cần thay đổi độ mờ (alpha).
  • HSL: dạng hsl(0, 100%, 50%) dễ chỉnh sắc độ hơn khi pha màu.

HEX và RGB có tương đương nhau không?

Hoàn toàn tương đương về màu sắc. Mỗi kênh màu trong HEX là 2 chữ số hex tương ứng với một giá trị 0 - 255 trong RGB, nên chuyển đổi hai chiều luôn chính xác.

Ví dụ thực tế

Ví dụ 1 — Màu thương hiệu từ Figma sang CSS

Thiết kế đưa màu #FF7F50. Đổi sang RGB được rgb(255, 127, 80), dán thẳng vào color: rgb(255, 127, 80) là xong.

Ví dụ 2 — Dạng rút gọn 3 ký tự

#F50 là dạng rút gọn của #FF5500. Công cụ hiểu cả hai, cho ra rgb(255, 85, 0).

Ví dụ 3 — Thêm độ mờ cho hover

Chuyển #FF7F50 sang rgba(255, 127, 80, 0.2) để làm nền hover mờ, thay vì tự tính tay.

Ví dụ 4 — So sánh hai bảng màu

Nhập rgb(37, 99, 235) để kiểm tra xem màu đó có đúng là xanh dương primary không, hoặc nó đã bị lệch sang tím.

Khi nào nên dùng và khi nào không

Nên dùng

  • Chuyển màu lấy từ Figma, Canva hay hình chụp màn hình sang CSS.
  • Cần giá trị RGB để truyền vào thư viện JS như Chart.js, D3 hay Tailwind config.
  • Tính độ mờ (alpha) mà không muốn tự đặt số từ 0 đến 1.
  • Kiểm tra xem hai màu HEX khác nhau có thực sự khác nhau không.

Không nên dùng

  • Chuyển đổi giữa các không gian màu khác nhau như HEX sang CMYK: công cụ này chỉ làm việc với RGB.
  • Tính tương phản WCAG để kiểm tra khả năng đọc. Cần công cụ chuyên tính tỷ lệ tương phản.
  • Chuyển hàng loạt màu trong bảng lớn: nhanh hơn nhiều nếu dùng biến CSS hoặc thư viện màu.

Cách chuyển đổi mã màu

  1. Nhập mã HEX, ví dụ #ff0000, rồi nhấn HEX → RGB.
  2. Hoặc nhập giá trị RGB, ví dụ 255, 0, 0, rồi nhấn RGB → HEX.
  3. Sao chép kết quả bằng nút Copy kết quả.

Câu hỏi thường gặp

Mã HEX 3 ký tự là gì?

Đó là dạng rút gọn khi mỗi kênh có hai chữ số giống nhau, ví dụ #ff0000 có thể viết thành #f00. Công cụ chấp nhận cả hai dạng.

Làm sao thêm độ mờ cho màu?

Hãy chuyển sang định dạng RGBA hoặc thêm alpha vào HEX, ví dụ #ff000080 là đỏ với 50% độ mờ.

Mã HEX có phân biệt chữ hoa chữ thường không?

Không, #FF0000 và #ff0000 là cùng một màu.