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

HEX và RGB là hai cách viết chính xác cùng một màu. Các nhà thiết kế và nhà phát triển liên tục chuyển đổi giữa hai loại — HEX trong các tệp CSS, RGB trong các hoạt ảnh JavaScript, HSL trong các công cụ thiết kế. Hiểu mối liên hệ của chúng làm cho việc làm việc với màu sắc đơn giản hơn nhiều.

Cách HEX hoạt động

Một mã màu HEX như #FF5733 là một số thập lục phân 6 chữ số đại diện cho các kênh đỏ, xanh lá và xanh dương:

Mỗi kênh đi từ 00 (0, không có màu) đến FF (255, cường độ tối đa). Vì vậy #FF5733 có nghĩa là đỏ tối đa, xanh lá vừa phải, một chút xanh dương — cho ra một màu đỏ cam ấm.

Cách chuyển HEX sang RGB

1. Nhập mã HEX của bạn — gõ hoặc dán một mã như #FF5733, hoặc sử dụng bộ chọn màu.
2. Xem các giá trị RGB — xem các giá trị tương đương cho đỏ, xanh lá và xanh dương (0-255 mỗi cái).
3. Sao chép ở bất kỳ định dạng nào — lấy các giá trị ở rgb(255, 87, 51), các kênh riêng lẻ hoặc các định dạng khác như HSL.

Mã màu phổ biến

Mẹo

• Sử dụng HEX trong CSS — color: #FF5733 sạch hơn và phổ biến hơn color: rgb(255, 87, 51) trong các tệp kiểu.
• Sử dụng RGB cho độ trong suốt — khi cần các màu bán trong suốt, sử dụng rgba(255, 87, 51, 0.5). Không có cách nào để thêm alpha trong HEX tiêu chuẩn (mặc dù HEX 8 chữ số tồn tại, hỗ trợ trình duyệt khác nhau).
• Phím tắt 3 chữ số — #F00 tương đương với #FF0000. Sử dụng nó khi mỗi cặp có các chữ số giống hệt nhau để tiết kiệm không gian.
• Bộ chọn màu nhanh hơn — nếu bạn đang tìm màu phù hợp, hãy sử dụng bộ chọn trực quan thay vì đoán các giá trị HEX. Sao chép mã khi đã hài lòng.