Bộ chuyển đổi RGB sang HEX

Cách trang RGB sang Hex hoạt động khác biệt

Trang chuyển đổi RGB sang Hex không chỉ đơn thuần là một ô nhập và một nút bấm. Điểm khác biệt cốt lõi nằm ở chỗ hệ màu RGB (ba kênh decimal 0–255) và hệ màu hex (sáu chữ số thập lục phân) biểu diễn cùng một không gian màu sRGB – không gian làm việc chuẩn của hầu hết màn hình hiện nay. Vì vậy, quá trình chuyển đổi là chính xác và thuận nghịch: không có sự cắt xén gam màu hay xấp xỉ nào xảy ra. Kết quả hex luôn bắt đầu bằng ký tự # và mang sáu chữ số (ví dụ #4F46E5), bởi mỗi giá trị 0–255 tương ứng với một cặp hex hai chữ số.

Trang này cho phép bạn nhập ba số thập phân (đỏ, lục, lam) cách nhau bằng dấu phẩy hoặc khoảng trắng. Ngay lập tức, hex tương ứng xuất hiện cùng với ô màu trực quan và tất cả các định dạng màu khác (HSL, HSV, CMYK, LAB và bảng chọn màu) đều được cập nhật đồng thời. Không có nút “chuyển đổi” – thao tác sửa bất kỳ trường nào cũng sẽ cập nhật toàn bộ các trường còn lại. Tất cả xử lý đều diễn ra trong trình duyệt; không có dữ liệu nào được tải lên máy chủ.

Mô hình màu RGB và thang 0–255

RGB là mô hình màu cộng, trong đó ba màu cơ bản đỏ (Red), lục (Green) và lam (Blue) được phát ra dưới dạng ánh sáng. Khi kết hợp với cường độ khác nhau, chúng tạo ra hầu hết các màu mà mắt người có thể nhìn thấy trên màn hình. Mỗi kênh màu có giá trị từ 0 đến 255 – con số này bắt nguồn từ hệ nhị phân 8 bit: 2^8 = 256 mức cường độ. Giá trị 0 nghĩa là không có ánh sáng màu đó (tắt hoàn toàn), giá trị 255 là cường độ tối đa.

Bảng dưới đây minh họa một số tổ hợp RGB cơ bản và hex tương ứng:

Khi nhập vào trang, chỉ cần gõ 79, 70, 229 hoặc 79 70 229, hệ thống sẽ hiểu và hiển thị hex #4F46E5. Nếu nhập giá trị ngoài 0–255 hoặc định dạng sai, trang hiển thị thông báo lỗi: “Nhập RGB dưới dạng ba số 0–255, ví dụ 79, 70, 229.”

Mã màu Hex: cấu trúc và cách chuyển đổi

Mã màu hex (hexadecimal) là cách biểu diễn màu sắc phổ biến trong CSS và thiết kế web. Cấu trúc chuẩn gồm ký tự # theo sau là sáu chữ số thập lục phân (0–9, A–F). Hai chữ số đầu là kênh đỏ, hai chữ số giữa là kênh lục, hai chữ số cuối là kênh lam. Ví dụ #1E90FF có đỏ = 1E (hex) = 30 (thập phân), lục = 90 (hex) = 144 (thập phân), lam = FF (hex) = 255 (thập phân).

Hex có thể viết dạng rút gọn ba chữ số nếu mỗi cặp có hai chữ số giống nhau, ví dụ #AABBCC có thể viết là #ABC. Trang chấp nhận đầu vào hex dạng ba chữ số (ví dụ #abc) và tự động mở rộng thành #AABBCC. Tuy nhiên, kết quả xuất ra luôn là sáu chữ số – không tự động rút gọn. Lý do là để tránh nhầm lẫn và giữ tính tường minh khi sử dụng trong code.

Hex không có kênh alpha (độ trong suốt) trừ khi dùng dạng tám chữ số (ví dụ #RRGGBBAA). Trang này không hỗ trợ chuyển đổi từ RGB sang hex tám chữ số – đầu ra luôn là hex sáu chữ số tiêu chuẩn.

Toán học chuyển đổi từ RGB sang Hex

Mỗi giá trị kênh (0–255) cần được chuyển thành hai chữ số thập lục phân. Cách tính rất đơn giản:

1. Lấy giá trị thập phân chia cho 16. Phần nguyên là chữ số thứ nhất (từ trái sang). Phần dư (là số nguyên từ 0 đến 15) là chữ số thứ hai.
2. Chuyển các số 10–15 thành chữ cái A–F (10→A, 11→B, 12→C, 13→D, 14→E, 15→F).

Ví dụ với kênh đỏ 79:

• 79 ÷ 16 = 4 (phần nguyên), dư 79 – 4×16 = 15.
• 4 → chữ số hex “4”.
• 15 → chữ số hex “F”. → Kênh đỏ hex là “4F”.

Ví dụ với kênh lục 70:

• 70 ÷ 16 = 4 (phần nguyên), dư 70 – 4×16 = 6.
• 4 → “4”, 6 → “6” → “46”.

Ví dụ với kênh lam 229:

• 229 ÷ 16 = 14 (phần nguyên), dư 229 – 14×16 = 5.
• 14 → “E”, 5 → “5” → “E5”.

Kết hợp ba cặp: #4F46E5 – đúng như kết quả của trang.

Nếu giá trị kênh là 255:

• 255 ÷ 16 = 15, dư 15 → “FF”. Nếu giá trị là 0:
• 0 ÷ 16 = 0, dư 0 → “00”.

Bảng chuyển đổi nhanh một số giá trị:

Việc nắm được phép tính này giúp bạn kiểm tra nhanh kết quả hoặc gỡ lỗi khi thiết kế.

Sử dụng Hex trong CSS và thiết kế web

Trong CSS, hex là cách khai báo màu phổ biến nhất. Các thuộc tính như color, background-color, border-color đều chấp nhận hex. Ví dụ:

body {
  background-color: #1E90FF; /* Màu xanh dodger */
}

Hex không phân biệt chữ hoa chữ thường – #1E90FF và #1e90ff là như nhau. Tuy nhiên, thông thường người dùng viết chữ in hoa hoặc in thường tùy theo quy ước của dự án. Trang này xuất ra chữ in hoa (ví dụ #4F46E5) để dễ đọc.

Nếu cần thêm kênh alpha (độ trong suốt), CSS hỗ trợ cú pháp rgba() hoặc hex tám chữ số (ví dụ #1E90FF80). Trang không chuyển đổi sang hex tám chữ số, nhưng bạn có thể lấy giá trị hex sáu chữ số và thêm hai chữ số alpha thủ công – ví dụ 80 (hex) tương ứng 50% độ mờ.

Một lưu ý: hex ba chữ số (shorthand) chỉ hoạt động khi mỗi cặp có hai chữ số giống nhau. Ví dụ #F00 là màu đỏ (tương đương #FF0000), nhưng #F0A không phải là dạng rút gọn hợp lệ của #F00AA0 (vì 0 và A không giống nhau). Trang chấp nhận #abc và mở rộng thành #AABBCC, nhưng nếu nhập #F0A thì kết quả sẽ là #FF00AA? Thực tế, quy tắc mở rộng là lặp mỗi chữ số một lần, nên #F0A thành #FF00AA. Nhưng cần kiểm tra xem trang có xử lý đúng không – theo fact sheet, trang chấp nhận ba chữ số và mở rộng nội bộ. Vậy nên nhập dạng chuẩn sáu chữ số để tránh nhầm lẫn.

Định dạng đầu vào và các lỗi thường gặp

Trang yêu cầu nhập ba số nguyên từ 0 đến 255, cách nhau bằng dấu phẩy hoặc khoảng trắng. Các định dạng hợp lệ:

• 79, 70, 229
• 79 70 229
• 79, 70, 229 (có khoảng trắng thừa)

Các định dạng không hợp lệ và gây ra lỗi:

• 79,70 (thiếu một số)
• 79, 70, 300 (300 lớn hơn 255)
• 79 70 229, (dấu phẩy thừa)
• 79, 70, 22a (chứa chữ)
• Nhập một số duy nhất (ví dụ 255)

Khi gặp lỗi, trang hiển thị thông báo: “Nhập RGB dưới dạng ba số 0–255, ví dụ 79, 70, 229.” Không có cảnh báo màu sắc khác – nếu bạn nhập sai, hex và ô màu không được cập nhật.

Một lỗi phổ biến là nhầm lẫn giữa thang 0–1 (ví dụ từ các thư viện màu khác) và thang 0–255. Ví dụ, nếu bạn có giá trị RGB trong Photoshop dạng 0–255, hoàn toàn có thể nhập trực tiếp. Nhưng nếu bạn lấy từ CSS bằng rgba(79, 70, 229, 1) thì phần RGB đã ở thang 0–255, chỉ cần bỏ kênh alpha.

Giới hạn của màu màn hình và không gian màu sRGB

Sở dĩ chuyển đổi RGB–hex là chính xác tuyệt đối vì cả hai đều làm việc trong không gian màu sRGB. Đây là không gian màu tiêu chuẩn cho web, hầu hết màn hình máy tính, điện thoại và thiết bị kỹ thuật số. Mọi màu trong sRGB đều có thể biểu diễn bằng một bộ ba (R,G,B) và hex tương ứng.

Tuy nhiên, khi in ấn, màu sắc chịu ảnh hưởng bởi mô hình màu trừ CMYK và cấu hình giấy in. Một màu #1E90FF hiển thị rực rỡ trên màn hình có thể trở nên tối hơn hoặc lệch tông khi in ra. Do đó, nếu bạn là nhà thiết kế đồ họa cần in ấn, đừng chỉ dựa vào hex từ RGB – hãy chuyển sang CMYK với cấu hình máy in cụ thể.

Trang này chỉ làm việc với RGB/hex trong không gian sRGB. Không có thao tác hiệu chỉnh gam màu nào khác. Vì vậy, đây là công cụ lý tưởng cho phát triển front-end và thiết kế UI/UX, nơi màu sắc cuối cùng được hiển thị trên màn hình.

FAQ

1. Tại sao kết quả hex luôn là sáu chữ số, không phải ba chữ số?
Vì trang luôn xuất ra dạng đầy đủ để tránh nhầm lẫn. Ví dụ #FF0000 không tự động rút gọn thành #F00. Tuy nhiên, trường nhập hex chấp nhận dạng ba chữ số và tự động mở rộng.

2. Tôi có thể nhập giá trị RGB thập phân như 0.5 không?
Không. Trang chỉ chấp nhận số nguyên 0–255. Nếu bạn có giá trị 0–1, hãy nhân với 255 trước khi nhập. Ví dụ 0.5 → 128.

3. Trang có hỗ trợ chuyển đổi hex tám chữ số (có alpha) không?
Không. Đầu ra luôn là hex sáu chữ số. Để có alpha, bạn phải tự thêm hai chữ số alpha vào cuối hoặc dùng rgba() trong CSS.

4. Làm thế nào để biết mã hex cho màu trắng?
Nhập 255, 255, 255 → kết quả #FFFFFF.

5. Nếu tôi nhập #abc vào ô hex thì chuyện gì xảy ra?
Trang mở rộng thành #AABBCC và đồng thời cập nhật các trường RGB (170, 187, 204) và các định dạng khác.

6. Tại sao một số màu nhìn khác nhau giữa các màn hình?
Đó là do mỗi màn hình có cấu hình hiển thị riêng, không phải lỗi của mã hex hay RGB. sRGB là không gian chuẩn, nhưng phần cứng có thể hiển thị lệch tông. Luôn kiểm tra trên nhiều thiết bị.

7. Trang có lưu lại lịch sử chuyển đổi không?
Không. Mọi thứ chỉ diễn ra trong trình duyệt, không có dữ liệu nào được lưu lại hay gửi lên máy chủ.