Chuyển RGB sang mã hex

Đổi ba số hệ 10 thành các cặp hex

Đi từ RGB sang hex là chiều ngược lại của hex sang RGB: thay vì tách một chuỗi thành từng cặp rồi đọc theo hệ 16, bạn lấy ba số hệ 10 rồi viết mỗi số thành một số hệ 16 hai chữ số, sau đó ghép kết quả lại. Mỗi bước làm trên từng kênh riêng — đỏ có cặp của đỏ, xanh lá có cặp của xanh lá, xanh dương có cặp của xanh dương — rồi ba cặp được đặt cạnh nhau, thêm dấu # ở đầu.

Hai ví dụ tính tay

Lấy rgb(30, 144, 255). Đổi 30: đó là 1 × 16 + 14, mà 14 trong hex là e, nên 30 là 1e. Đổi 144: đó là 9 × 16 + 0, nên 144 là 90. Đổi 255: đó là 15 × 16 + 15, mức tối đa của một byte, nên 255 là ff. Ghép lại được #1e90ff — một màu xanh dương đậm.

Ví dụ thứ hai, rgb(46, 204, 113): 46 là 2 × 16 + 14, tức 2e; 204 là 12 × 16 + 12, tức cc; 113 là 7 × 16 + 1, tức 71. Kết quả là #2ecc71, một màu xanh lá ngọc bích khá sạch. Cả hai ví dụ đều là chiều ngược của phép chuyển hex sang RGB, và chạy ngược lại từ hex về RGB sẽ ra đúng con số ban đầu, không lệch một chút nào theo cả hai chiều.

Vì sao 255 là trần, không phải một gợi ý

Một kênh màu 8-bit có đúng 256 giá trị khả dĩ, từ 0 đến 255, vì một byte chỉ giữ được 256 trạng thái. rgb(255, 99, 300) không phải một màu đỏ cực sáng, cực đậm — đó là một con số không có cặp hex nào để trở thành, vì hai chữ số hex dừng lại ở ff. Những công cụ tự động cắt 300 xuống 255 sẽ che mất việc con số đó thực ra đến từ nơi khác: thang 0–100% gõ nhầm thành 0–255, một giá trị bị nhân đôi do lỗi chuyển đơn vị, hoặc một lần dán bị dư một chữ số. Báo lỗi thay vì đoán mò giúp lỗi đó không bị giấu đi. Quy tắc tương tự áp dụng ở đầu dưới: một kênh âm, như rgb(-10, 99, 71), cũng bị từ chối vì lý do y hệt — không có cặp hex nào nhỏ hơn 00.

Hệ 10 sang hex, tra nhanh

Vài con số tròn đáng nhớ vì chúng xuất hiện liên tục trong công cụ thiết kế và bảng màu mặc định.

Khi nào hex là định dạng nên đưa cho người khác

RGB thường là thứ một color picker hay một API canvas trả về; hex thường là thứ một stylesheet, một tài liệu bàn giao thiết kế, hay một câu hỏi "màu này là màu gì vậy" trên Slack cần. Đổi RGB sang hex là bước biến ba con số rời rạc trên giao diện thành một chuỗi mà designer hay một rule CSS có thể dùng thẳng — đó là lý do cả hai chiều chuyển đổi đều được dùng nhiều gần như ngang nhau trong thực tế, tùy vào việc bạn đang đứng ở đầu nào của luồng làm việc.