Bộ chuyển đổi HEX sang RGB

Tại sao trang này khác biệt: Từ mã hex sang số RGB chính xác

Trang này thực hiện một việc duy nhất: chuyển đổi biểu diễn màu dạng thập lục phân (cơ số 16) thành các kênh RGB thập phân (cơ số 10) mà màn hình và các phép toán pha trộn màu sử dụng trực tiếp. Mã HEX, dù phổ biến và gọn nhẹ, thực chất chỉ là một cách viết tắt cho ba kênh 8-bit giống hệt mà RGB biểu diễn dưới dạng số.

Điểm khác biệt cốt lõi nằm ở tính quy tắc chặt chẽ của chuyển đổi từ HEX sang RGB:

• Mã HEX hợp lệ là sáu chữ số (#RRGGBB) hoặc dạng viết tắt ba chữ số (#RGB), trong đó mỗi chữ số viết tắt sẽ được nhân đôi để tạo thành mã sáu chữ số đầy đủ. Ví dụ #abc trở thành #aabbcc.
• Dấu # ở đầu là tùy chọn; trang chấp nhận mã có hoặc không có ký tự này.
• Kết quả kênh RGB luôn là số nguyên từ 0 đến 255. Không có kênh alpha. Mã HEX tám chữ số (có alpha) không được xử lý trên trang này.
• Phép chuyển đổi hoàn toàn mang tính toán học: mỗi cặp chữ số hex được nhân với lũy thừa của 16. Kết quả là chính xác và có thể đảo ngược. Không có làm tròn hay cắt xén gamut.

Cách chuyển đổi hoạt động: Cơ sở 16 thành cơ sở 10

Mỗi kênh màu (Đỏ, Lục, Lam) trong mô hình RGB có 256 mức độ sáng, từ 0 đến 255. Hệ thập lục phân (hexadecimal) sử dụng 16 ký hiệu: 0-9 và A-F (a-f). Một cặp hai chữ số hex có thể biểu diễn 16×16 = 256 giá trị, khớp hoàn hảo với một kênh.

Công thức chuyển đổi cho một kênh từ cặp hex XY (ví dụ 4f) là:

Giá trị kênh = (X × 16¹) + (Y × 16⁰)

Trong đó X và Y là các giá trị thập phân tương ứng của chữ số hex. A=10, B=11, C=12, D=13, E=14, F=15.

Ví dụ làm việc với mã #4f46e5:

1. Kênh Đỏ: Cặp 4f

   • 4 (hex) = 4 (thập phân)
   • f (hex) = 15 (thập phân)
   • Giá trị = (4 × 16) + 15 = 64 + 15 = 79

2. Kênh Lục: Cặp 46

   • 4 (hex) = 4
   • 6 (hex) = 6
   • Giá trị = (4 × 16) + 6 = 64 + 6 = 70

3. Kênh Lam: Cặp e5

   • e (hex) = 14
   • 5 (hex) = 5
   • Giá trị = (14 × 16) + 5 = 224 + 5 = 229

Kết quả: RGB(79, 70, 229).

Xử lý mã rút gọn ba chữ số và các trường hợp đặc biệt

Mã ba chữ số (ví dụ #abc)

Đây là dạng viết tắt được CSS hỗ trợ. Trang tự động mở rộng bằng cách nhân đôi mỗi chữ số:

• #abc → #aabbcc
• #f00 → #ff0000 (màu đỏ thuần)
• #fff → #ffffff (màu trắng)

Phép nhân đôi này tương đương với việc mỗi chữ số hex đại diện cho cả hai chữ số của cặp, do đó giá trị kênh sẽ có dạng 0x, 11, 22,..., ff. Điều này có nghĩa là chỉ có 16 mức xám hoặc 16 sắc độ cho mỗi kênh khi dùng mã ba chữ số, thay vì 256 mức.

Mã không hợp lệ

Nếu bạn nhập một giá trị HEX không đúng định dạng (ví dụ: #xyz, 12345, #1234567), trang sẽ hiển thị thông báo lỗi:

"Nhập mã hex như #4f46e5 hoặc #abc."

Thông báo này xuất hiện ngay lập tức. Trang không thực hiện chuyển đổi cho đến khi đầu vào hợp lệ.

Giới hạn: không hỗ trợ kênh alpha

Mã HEX tám chữ số (#RRGGBBAA) thường được dùng trong các định dạng màu có kênh alpha (độ trong suốt). Trang này chỉ xử lý sáu chữ số hoặc ba chữ số. Nếu bạn nhập tám chữ số, nó sẽ bị coi là không hợp lệ và hiển thị thông báo lỗi.

Bảng dưới đây tóm tắt các trường hợp đầu vào và cách xử lý:

Tại sao chuyển đổi này là chính xác tuyệt đối?

Không giống như các chuyển đổi giữa không gian màu khác (ví dụ RGB sang HSL, hoặc RGB sang CMYK) có thể liên quan đến làm tròn hoặc mất thông tin, chuyển đổi từ HEX sang RGB là một phép tính đơn giản, xác định và có thể đảo ngược. Bởi vì:

1. Cả hai đều biểu diễn cùng một không gian màu – RGB và HEX đều mô tả màu sắc bằng cường độ của ba kênh cơ bản. HEX chỉ là một cách viết khác của cùng một số.
2. Dùng số nguyên – Giá trị kênh RGB là số nguyên 8-bit (0-255). Mỗi cặp hex tương ứng với một số nguyên duy nhất. Phép tính (X×16)+Y luôn cho kết quả nguyên.
3. Không có phép biến đổi phi tuyến – Không giống như gamma correction hoặc chuyển đổi không gian màu (như sRGB sang linear RGB), không có đường cong nào được áp dụng.

Do đó, #4f46e5 luôn và chỉ luôn là RGB(79, 70, 229). Không có ngoại lệ.

Ai cần trang này và sử dụng nó như thế nào?

Nhà phát triển front-end

Trong CSS, bạn có thể sử dụng cả color: #ff6600 và color: rgb(255, 102, 0). Tuy nhiên, trong JavaScript, API Canvas, hoặc các thư viện đồ họa, bạn thường cần các giá trị số. Một số ví dụ:

• Canvas API: context.fillStyle = 'rgb(79, 70, 229)';
• Three.js: const color = new THREE.Color(79/255, 70/255, 229/255);
• JavaScript xử lý ảnh: Khi đọc pixel từ canvas, bạn nhận được mảng ``, và bạn cần so sánh với các giá trị RGB từ HEX.

Trang này cung cấp chính xác ba số đó.

Nhà thiết kế và người làm đồ họa

Bạn nhận được mã HEX từ tài liệu thương hiệu (brand guidelines) và cần nhập vào các công cụ thiết kế ưa thích thanh trượt RGB. Thay vì tự tính toán, bạn chỉ cần nhập mã HEX và nhận ba số tương ứng.

Người học về màu sắc và màn hình

Hiểu được mối quan hệ giữa HEX và RGB là bước cơ bản để nắm bắt mô hình màu cộng (additive color model) mà màn hình sử dụng. Ví dụ:

• #ff0000 = RGB(255, 0, 0) – Đỏ thuần, kênh xanh lá và xanh lam ở mức 0.
• #00ff00 = RGB(0, 255, 0) – Xanh lá thuần.
• #0000ff = RGB(0, 0, 255) – Xanh lam thuần.
• #ffffff = RGB(255, 255, 255) – Trắng, cả ba kênh ở mức tối đa.
• #000000 = RGB(0, 0, 0) – Đen, cả ba kênh ở mức 0.
• Màu xám: #808080 = RGB(128, 128, 128). Lưu ý rằng 80 trong hex = 128 trong thập phân.

Các chuyển đổi đồng thời khác trên trang

Khi bạn nhập mã HEX, trang không chỉ hiển thị RGB. Nó đồng thời cập nhật tất cả các trường màu khác: HSL, HSV, CMYK, LAB. Điều này cho phép bạn xem cùng một màu dưới nhiều góc nhìn khác nhau. Ví dụ, từ RGB(79, 70, 229), bạn có thể thấy:

• HSL: Khoảng 243°, độ bão hòa 75%, độ sáng 59%.
• CMYK: Cyan 66%, Magenta 69%, Yellow 0%, Key (Đen) 10%.
• LAB: Giá trị L*, a*, b*.

Việc chỉnh sửa bất kỳ trường nào (RGB, HSL, HSV, CMYK, LAB) sẽ ngay lập tức cập nhật tất cả các trường còn lại. Đây là tính năng hai chiều.

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

1. Tại sao tôi cần dấu # ở đầu mã HEX?

Dấu # là quy ước trong CSS và HTML để phân biệt mã màu HEX với các giá trị khác. Trang này chấp nhận mã có hoặc không có dấu #. Ví dụ, cả #4f46e5 và 4f46e5 đều hoạt động.

2. Làm thế nào để chuyển đổi ngược lại từ RGB sang HEX?

Phép tính ngược là: chia giá trị kênh cho 16, phần nguyên là chữ số hex đầu, phần dư là chữ số hex thứ hai. Ví dụ, R=79: 79/16 = 4 dư 15. 4 là 4, 15 là f, vậy hex là 4f. Lặp lại cho G và B, ghép lại thành #4f46e5.

3. Tôi có thể nhập mã HEX có kênh alpha (ví dụ #4f46e580) không?

Không. Trang này chỉ xử lý mã sáu chữ số hoặc ba chữ số. Mã tám chữ số (RGBA) sẽ hiển thị thông báo lỗi. Bạn cần một công cụ khác để xử lý kênh alpha.

4. Mã ba chữ số #abc và mã sáu chữ số #aabbcc có giống nhau hoàn toàn không?

Về mặt toán học, #abc được mở rộng thành #aabbcc, vì vậy chúng biểu diễn cùng một màu. Tuy nhiên, mã ba chữ số chỉ có thể biểu diễn 4096 màu (16³), trong khi mã sáu chữ số có thể biểu diễn 16.777.216 màu (256³). Mã ba chữ số là một tập con hạn chế.

5. Tại sao kết quả RGB luôn là số nguyên?

Bởi vì mỗi kênh RGB được lưu trữ dưới dạng số nguyên 8-bit (0-255). Mỗi cặp chữ số hex biểu diễn một số nguyên từ 0 đến 255. Phép chuyển đổi là một ánh xạ một-một, xác định và không có làm tròn.