Đổi mã màu HEX sang RGB và kiểm tra độ tương phản

Cách đổi HEX sang RGB (và ngược lại)

Công cụ chuyển đổi màu này đổi mã HEX sang RGB, HSL, HSV, CMYK và OKLCH ngay khi bạn gõ, và chiều ngược lại cũng được: dán rgb(255, 99, 71) vào ô bất kỳ, bạn được #FF6347. Ô nào cũng nhận mọi định dạng, nên bạn không phải đi tìm đúng ô.

Nếu muốn tự tính tay, mã HEX chỉ là ba con số viết ở hệ cơ số 16. Lấy #3B82F6, tách thành từng cặp rồi đổi từng cặp:

3B → 3×16 + 11 = 59
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)

Đổi từ RGB sang HEX thì làm ngược lại. Chia mỗi kênh cho 16: phần nguyên là chữ số thứ nhất, phần dư là chữ số thứ hai. 255 chia 16 được 15 dư 15, nên là FF. 99 được 6 dư 3, nên là 63. Đó là lý do màu đỏ cà chua rgb(255, 99, 71) thành #FF6347.

Các mã màu thường gặp ở dạng HEX, RGB và HSL

Những mã này đáng để nhận ra ngay khi nhìn. Tất cả đều là tên màu CSS hợp lệ, và công cụ hiển thị tên gần nhất cho bất kỳ màu nào bạn nhập (#3B82F6 gần nhất với dodgerblue, dù không giống hệt).

Tên	HEX	RGB	HSL
white	#FFFFFF	255, 255, 255	0, 0%, 100%
black	#000000	0, 0, 0	0, 0%, 0%
red	#FF0000	255, 0, 0	0, 100%, 50%
tomato	#FF6347	255, 99, 71	9, 100%, 64%
gold	#FFD700	255, 215, 0	51, 100%, 50%
teal	#008080	0, 128, 128	180, 100%, 25%
navy	#000080	0, 0, 128	240, 100%, 25%
rebeccapurple	#663399	102, 51, 153	270, 50%, 40%

Mã HEX ngắn, dài và có độ trong suốt

Mã HEX có bốn độ dài. Ba chữ số là dạng viết tắt, mỗi chữ số được nhân đôi, nên #F60 nghĩa là #FF6600. Sáu chữ số là dạng thông thường. Tám chữ số thêm kênh alpha ở cuối: #3B82F680 là cùng màu xanh đó ở mức 128 trên 255, tức độ mờ khoảng 50%. Bốn chữ số là dạng viết tắt của kiểu đó. Trình duyệt đã hiểu cả bốn dạng từ lâu, nhưng một số ứng dụng thiết kế và trình đọc email vẫn chỉ nhận sáu chữ số, nên khi không chắc, hãy dán mã sáu chữ số và đặt độ mờ riêng.

Nên dùng định dạng nào?

HEX cho mọi thứ bạn dán vào công cụ thiết kế, bộ nhận diện thương hiệu hay CMS. Nó ngắn và không ai đọc nhầm.
RGB / RGBA khi cần độ trong suốt trong CSS cũ hoặc trong code canvas JavaScript.
HSL khi bạn muốn chỉnh màu theo cách dễ hình dung. Giảm số cuối thì màu tối đi, giảm số giữa thì màu xám đi. Viết trạng thái hover theo cách này dễ hơn nhiều.
OKLCH cho các hệ thống thiết kế CSS mới. Giá trị độ sáng của nó khớp với cảm nhận của mắt, nên hai màu có cùng L thật sự trông sáng như nhau, điều mà HSL không làm được (vàng ở độ sáng 50% trông sáng hơn hẳn xanh dương ở 50%).
CMYK chỉ để tham khảo sơ bộ khi in. Các con số ở đây lấy từ công thức đơn giản, không phải từ hồ sơ màu của máy in, nên tờ rơi in ra sẽ không khớp hoàn toàn với màn hình. Hãy hỏi nhà in họ dùng hồ sơ màu nào.
HSV / HSB chủ yếu để khớp với bảng chọn màu trong Photoshop hoặc Figma, vốn dùng hệ này.

Kiểm tra độ tương phản màu: thế nào là đạt WCAG?

WCAG 2 so sánh độ sáng tương đối của chữ và nền rồi biểu diễn thành tỷ lệ từ 1:1 (giống hệt nhau) đến 21:1 (đen trên trắng). Các ngưỡng là cố định:

Mức	Chữ thường	Chữ lớn (24px, hoặc 18,66px đậm)
AA	4,5:1	3:1
AAA	7:1	4,5:1

Biểu tượng, viền ô nhập và vòng focus cần 3:1 theo WCAG 2.1. Đây là kết quả của một số màu thật khi làm chữ trên nền trắng:

Màu chữ trên #FFFFFF	Tỷ lệ	Kết quả
#949494	3,03:1	Chỉ dùng cho chữ lớn
#777777	4,48:1	Trượt AA cho chữ nội dung, chỉ thiếu một chút
#767676	4,54:1	Đạt AA
#595959	7,00:1	Đạt AAA
#3B82F6	3,68:1	Chỉ dùng cho chữ lớn và nút
#008080	4,77:1	Đạt AA

Dòng #777777 là cái bẫy kinh điển. Nó trông giống hệt #767676, và công cụ kiểm tra nào hiển thị một chữ số thập phân sẽ ghi 4,5, nhưng quy tắc là "ít nhất 4,5" và 4,48 thì không đạt. Công cụ này không bao giờ làm tròn một tỷ lệ trượt lên thành ngưỡng.

Khi một màu không đạt, công cụ tìm sắc độ gần nhất cùng tông màu mà đạt. Với #3B82F6 trên nền trắng, nó gợi ý #1E6FF5 cho AA (4,52:1) và #0950C5 cho AAA (7,08:1). Bấm Dùng để nạp màu đó, hoặc sao chép thẳng vào file CSS. Các màu vàng và cam tươi thường phải tối đi rất nhiều mới dùng được làm chữ trên nền trắng; với những màu này, hãy giữ màu tươi cho nền và đặt chữ tối lên trên.

Tạo bảng màu và lấy màu từ ảnh

Bảng màu tạo thang sắc độ sáng và tối từ 50 đến 950 (cách đặt tên của Tailwind), cùng các bộ màu bổ sung, tương đồng, bộ ba, bổ sung tách, hình vuông và đơn sắc. Bấm vào ô màu bất kỳ để sao chép, rồi xuất cả bộ dưới dạng biến CSS, biến SCSS, JSON hoặc khối màu Tailwind, hoặc tải một dải PNG để chèn vào slide hay gửi cho khách hàng.

Để lấy đúng màu từ logo hay ảnh chụp, hãy nạp ảnh và chạm vào điểm cần lấy. Một điểm ảnh trong file JPG có thể lệch vài sắc độ so với màu bạn thấy do nhiễu nén, nên với ảnh chụp hãy chuyển sang lấy trung bình 3×3 hoặc 5×5. Trên Chrome và Edge, nút Lấy màu trên màn hình có thể lấy màu ở bất kỳ đâu trên màn hình, kể cả các cửa sổ khác. Không có gì được tải lên; ảnh được đọc ngay trong trình duyệt của bạn.

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

Đổi HEX sang RGB thế nào?

Tách sáu chữ số thành ba cặp và đổi mỗi cặp từ hệ 16 thành một số từ 0 đến 255. #3B82F6 thành 3B = 59, 82 = 130 và F6 = 246, nên giá trị RGB là rgb(59, 130, 246).

Đổi RGB sang HEX thế nào?

Viết mỗi kênh thành số thập lục phân hai chữ số rồi ghép lại sau dấu #. rgb(255, 99, 71) cho FF, 63 và 47, nên mã HEX là #FF6347, chính là màu CSS tomato.

Cần tỷ lệ tương phản bao nhiêu để đạt WCAG AA?

Chữ thường cần ít nhất 4,5:1 và chữ lớn (24px, hoặc 18,66px đậm) cần 3:1. Màu xám #767676 trên nền trắng là 4,54:1, màu xám nhạt nhất vẫn đạt cho chữ nội dung.

Mã màu hex 8 chữ số nghĩa là gì?

Hai chữ số cuối là kênh alpha (độ mờ). #3B82F680 là cùng màu xanh đó với độ mờ 128/255, khoảng 50%, tương đương rgba(59, 130, 246, 0.5) trong CSS.

Mã hex 3 chữ số như #F60 nghĩa là gì?

Mỗi chữ số được nhân đôi, nên #F60 là #FF6600. Dạng rút gọn chỉ dùng được khi hai chữ số trong mỗi cặp giống nhau, vì thế #3B82F6 không có dạng 3 chữ số.

Giá trị CMYK có đủ chính xác để in không?

Nó là điểm khởi đầu, không phải bản in thử. Công cụ dùng công thức chuẩn, nên #3B82F6 thành cmyk(76%, 47%, 0%, 4%), nhưng tỷ lệ mực thực tế phụ thuộc vào hồ sơ màu của máy in và giấy, nên hãy hỏi nhà in giá trị của họ.

Làm sao lấy mã HEX của một màu trong ảnh?

Nạp ảnh vào khung phía trên và chạm vào điểm bạn muốn; công cụ đọc điểm ảnh đó. Với ảnh chụp, hãy chuyển sang lấy trung bình 3×3 hoặc 5×5, vì một điểm ảnh đơn lẻ thường nhiễu hơn màu bạn nhìn thấy.

HSL và HSV khác nhau thế nào?

Cả hai đều bắt đầu bằng cùng một sắc độ, nhưng độ sáng 100% trong HSL luôn là màu trắng, còn giá trị 100% trong HSV là phiên bản sáng nhất của màu đó. Màu đỏ thuần là hsl(0, 100%, 50%) và hsv(0, 100%, 100%).