Chuyển RGB sang HEX Red Green Blue ↔ Hexadecimal Miễn phí Trực tuyến An toàn

Vì sao bạn chuyển RGB sang HEX

Một trình chỉnh sửa ảnh, một bộ chọn màu trong hệ điều hành hay một dòng mã cho bạn một màu dưới dạng ba con số: 90, 70, 50. Một bảng định kiểu, một tệp token thiết kế hay một tin nhắn gửi đồng nghiệp lại muốn nó dưới dạng một mã ngắn: #5A4632. Bước ở giữa là việc trang này làm. Chuyển RGB sang HEX là viết cùng ba con số đó theo cơ số mười sáu, mỗi số hai chữ số, và đặt một dấu thăng ở phía trước. Làm cho một màu thì dễ, cho hai mươi màu thì chán, và dễ sai khi một số cần thêm số không ở đầu hoặc một chữ số là một chữ cái.

Phép chuyển đổi này chính xác, điều không đúng với mọi phép chuyển đổi màu. Hex và rgb() là hai cách viết của cùng ba con số, lượng ánh sáng đỏ, xanh lục và xanh lam mà một màn hình nên phát ra, mỗi số từ 0 đến 255. Không có gì bị xấp xỉ, và vòng đi về trả lại đúng cái đã bắt đầu. Trang làm việc đó trong trình duyệt của bạn, và không có gì được tải lên. Bên dưới bạn sẽ thấy mỗi con số trở thành hai chữ số hex thế nào, độ trong suốt được mang sang ra sao, các giới hạn của sRGB, những nơi người ta cần chuyển RGB sang HEX, và vài thói quen giữ cho màu trong một dự án nhất quán.

Phép chuyển đổi hoạt động như thế nào

Mỗi con số trở thành hai chữ số hex

Lấy rgb(90, 70, 50). Chia mỗi số cho mười sáu: 90 là 5 lần 16 cộng 10, và 10 là chữ số A, nên 90 thành 5A. 70 là 4 lần 16 cộng 6, nên là 46. 50 là 3 lần 16 cộng 2, nên là 32. Ghép ba cặp lại và thêm dấu thăng: #5A4632. Trang làm việc này cho bạn khi bạn gõ, và hiện câu rgb(90, 70, 50) = #5A4632 để bạn kiểm tra.

Số không ở đầu

Mỗi cặp phải có hai chữ số. Một số dưới 16 cần một số không ở phía trước: 7 thành 07, và 0 thành 00. Vậy rgb(0, 7, 255) là #0007FF, không phải #07FF, vốn có nghĩa khá khác. Quên số không là lỗi phổ biến nhất khi chuyển đổi bằng tay.

Khoảng giá trị

Mỗi số phải nằm giữa 0 và 255. Một giá trị trên 255 không thể viết bằng hai chữ số hex, và một giá trị âm không có nghĩa. Nếu một phép tính trong mã của bạn đã cho ra 270 hoặc −5, hãy giới hạn nó vào khoảng trước. Bộ chuyển đổi làm điều tương tự, để không bao giờ tạo ra một mã không hợp lệ.

Phép chuyển đổi giữ gì và không giữ được gì

Nó giữ màu, một cách chính xác

Hex và rgb() là hai cách viết của cùng ba con số, 0 đến 255 cho đỏ, xanh lục và xanh lam, nên không có gì bị xấp xỉ và vòng đi về trả lại đúng cái đã bắt đầu. Chuyển RGB sang HEX rồi ngược lại và bạn có các con số bạn đã bắt đầu.

Nó mang độ trong suốt sang

Một giá trị thứ tư cho độ trong suốt cũng được mang sang: #RRGGBBAA thành rgba(), và ngược lại. Độ trong suốt 0,5 thành cặp 80, vì một nửa của 255 là khoảng 128, tức 80 trong hex. Vậy rgba(90, 70, 50, 0.5) là #5A463280. Hex tám chữ số được mọi trình duyệt hiện nay chấp nhận.

Nó không thể mô tả các màu ngoài sRGB

Cả hai cách viết đều mô tả sRGB, không gian màu mà màn hình đã dùng suốt ba mươi năm. Chúng không thể mô tả một màu nằm ngoài nó, điều mà các ký hiệu CSS mới hơn, lab(), oklch() và color(), tồn tại để làm. Nếu bạn bắt đầu từ một màu trong một công cụ gam rộng, ba con số bạn sao chép đã là phiên bản sRGB, và hex trung thành với chúng.

Nó không giữ dạng viết tắt

Khi một mã có thể viết bằng ba chữ số, như #AABBCC thành #ABC, bộ chuyển đổi cho dạng dài. Dạng dài luôn hợp lệ và là cùng một màu; dạng ngắn chỉ là sự tiện lợi cho người đọc.

Các màu thông dụng và mã của chúng

Vài mã để nhớ

rgb(255, 255, 255) là #FFFFFF, màu trắng: cả ba ánh sáng ở công suất tối đa. rgb(0, 0, 0) là #000000, màu đen: không có ánh sáng nào. rgb(255, 0, 0) là #FF0000, đỏ thuần; rgb(0, 255, 0) là #00FF00 và rgb(0, 0, 255) là #0000FF. Mọi màu có ba số bằng nhau là màu xám, và mã của nó có ba cặp bằng nhau: rgb(128, 128, 128) là #808080.

Thói quen màu an toàn cho web

Các hướng dẫn cũ nói về màu an toàn cho web, có các cặp chỉ là 00, 33, 66, 99, CC hoặc FF. Chúng thuộc về thời màn hình 256 màu và không có lý do gì để tồn tại. Hãy dùng bất cứ giá trị nào bạn thích; màn hình hiển thị được tất cả.

Cách chuyển RGB sang HEX ở đây

Gõ ba con số

Nhập màu vào ô đầu tiên dưới dạng rgb(90, 70, 50), hoặc với các số cách nhau bằng dấu phẩy hay khoảng trắng. Không cần phần trăm; hãy dùng các số từ 0 đến 255.

Đọc mã hex

Đáp án hiện ra ngay ở ô kia, bắt đầu bằng dấu thăng, bằng chữ in hoa. Nếu bạn nhập giá trị thứ tư cho độ trong suốt, mã có tám chữ số.

Sao chép vào công việc của bạn

Dán mã vào bảng định kiểu, tệp token hoặc tin nhắn. Thêm nó vào ghi chú bảng màu của bạn để lần chuyển đổi sau chỉ là một lần tra cứu.

Các ký hiệu này từ đâu ra

Hex và RGB là cùng một thứ viết hai lần

Một màu màn hình là ba con số, lượng ánh sáng đỏ, xanh lục và xanh lam cần phát ra, mỗi số từ 0 đến 255, tức một byte. Hex chỉ đơn giản viết các byte đó theo cơ số mười sáu, nên #FF8800 và rgb(255, 136, 0) là cùng một chỉ thị cho cùng một điểm ảnh.

HSL và CMYK

HSL được phát minh vì không cái nào trong hai cái kia con người đọc được: nó cho sắc độ dưới dạng một góc quanh vòng màu, với độ bão hòa và độ sáng là phần trăm, để nhà thiết kế có thể làm một thứ sáng hơn mà không tính lại ba con số. CMYK thuộc về một thế giới hoàn toàn khác, mực thay vì ánh sáng. Nó là phép trừ, được xây từ bốn bản in, và không thể đạt mọi màu mà một màn hình đạt được, vì màn hình phát sáng còn giấy chỉ phản chiếu nó. Xem Chuyển HEX sang HSL và Chuyển RGB sang CMYK.

Nơi bạn gặp chúng

Trong bàn giao thiết kế

Một nhà thiết kế làm việc trong trình chỉnh sửa hiển thị giá trị rgb hoặc một bộ chọn màu; lập trình viên cần hex cho bảng định kiểu. Chuyển RGB sang HEX là bước ở giữa, và được làm cho mọi màu trong một bảng màu.

Trong các tập lệnh tính màu

Một tập lệnh pha hai màu hoặc làm tối một màu làm việc với các con số và kết thúc bằng ba số. Để dùng kết quả trong bảng định kiểu, hoặc hiển thị nó, phải viết nó thành mã hex. Tự làm trong mã chỉ vài dòng; kiểm tra kết quả bằng bộ chuyển đổi thì nhanh hơn.

Trong trực quan hóa dữ liệu

Các thư viện biểu đồ chấp nhận màu dưới dạng chuỗi hex. Các bảng màu sinh ra bằng phương pháp số thì ra dưới dạng bộ ba rgb. Một bước chuyển đổi biến cái này thành cái kia.

Trong tài liệu và bài thuyết trình

Các chương trình văn phòng hiển thị màu dưới dạng số RGB; trình soạn thảo web muốn hex. Khi một màu thương hiệu phải xuất hiện ở cả hai, phép chuyển đổi giữ chúng giống hệt nhau.

Những cái bẫy khi bạn chuyển RGB sang HEX

Quên số không ở đầu

Viết 7 là 7 mà không phải 07 làm lệch mọi chữ số sau đó. Luôn dùng hai chữ số cho mỗi cặp.

Nhầm phần trăm với 0 đến 255

rgb(35%, 27%, 20%) là một cách viết khác của các con số, với 100 phần trăm là 255. Nếu nguồn của bạn dùng phần trăm, hãy chuyển chúng sang 0 đến 255 trước: nhân với 2,55.

Sai số làm tròn trong màu tính toán

Một tập lệnh cho ra 127,5 phải quyết định đó là 127 hay 128. Sự khác biệt không nhìn thấy được, nhưng nó tạo ra hai mã cho thứ bạn tưởng là một màu. Hãy làm tròn cùng một cách ở mọi nơi.

Lấy màu từ ảnh chụp màn hình

Một màu đọc từ ảnh chụp màn hình đã đi qua quản lý màu của màn hình và có thể cả nén. Nó có thể lệch một hoặc hai bậc so với nguồn. Hãy dùng tệp thiết kế khi có thể.

Những câu hỏi mọi người hay hỏi trước khi chuyển đổi

rgb(255, 0, 0) trong hex là gì?

#FF0000, đỏ thuần.

rgb(0, 0, 0) trong hex là gì?

#000000, màu đen.

Tôi có thể dùng chữ thường trong mã hex không?

Có. #5a4632 và #5A4632 là cùng một màu. Trang viết bằng chữ in hoa.

Phép chuyển đổi có chính xác không?

Có. Đó là hai cách viết của cùng ba con số.

Màu của tôi có được tải lên không?

Không. Phép tính chạy trong trình duyệt của bạn và không có gì được gửi đi đâu cả.

Làm sao để quay lại?

Bằng Chuyển HEX sang RGB, đọc ba cặp như các con số.

Những thói quen giữ màu nhất quán trong một dự án

Định nghĩa mỗi màu một lần

Hãy đặt bảng màu của bạn vào các thuộc tính tùy chỉnh, chẳng hạn --brand: #5A4632, và gọi các màu bằng tên. Khi bạn chuyển RGB sang HEX cho một màu mới, bạn thêm một dòng, và mọi chỗ dùng đều theo.

Chọn một kiểu chữ

Chọn chữ hoa hoặc chữ thường cho mã hex và giữ nguyên. Khi đó việc tìm một màu trong mã đáng tin cậy.

Ghi lại nguồn

Bên cạnh mỗi màu, ghi chú nó đến từ đâu: cẩm nang thương hiệu, một logo, một ảnh lấy mẫu. Khi có câu hỏi một màu có đúng không, bạn biết nơi để kiểm tra.

Kiểm tra độ tương phản

Với chữ trên nền có màu, hãy kiểm tra tỷ lệ tương phản bằng một công cụ. Các con số từ dạng rgb đưa thẳng vào công thức, còn dạng hex là thứ bạn gõ vào hầu hết các công cụ kiểm tra.

Vì sao 256 bậc, và điều gì nằm sau các con số

Tám bit cho mỗi ánh sáng

Mỗi số trong ba số được lưu trong tám bit, cho phép 256 giá trị từ 0 đến 255. Ba số cùng nhau cho 256 × 256 × 256, khoảng 16,7 triệu tổ hợp, nhiều hơn mức mắt có thể phân biệt trong hầu hết các điều kiện. Đó là lý do mã hex dài đúng sáu chữ số: hai cho mỗi ánh sáng, không hơn không kém. Khi bạn chuyển RGB sang HEX, bạn đang viết ra ba byte theo dạng gọn nhất mà con người có thể thống nhất.

Vì sao các bậc bằng nhau không trông bằng nhau

Các con số không tỷ lệ với ánh sáng đến mắt bạn. Màn hình áp dụng một đường cong, gần với lũy thừa 2,2, để các sắc tối nhận nhiều hơn trong 256 bậc so với các sắc sáng, điều hợp với mắt. Một bậc từ 10 lên 20 trông như thay đổi lớn hơn một bậc từ 240 lên 250. Với bạn điều này có nghĩa là lấy trung bình hai màu bằng cách lấy trung bình các con số của chúng không cho màu bạn sẽ thấy khi trộn các ánh sáng, một sự thật quan trọng khi bạn tính chuyển sắc và pha trộn trong mã.

Màu xám và đường chéo

Mọi màu xám nằm trên đường mà ba con số bằng nhau. Có 256 màu như vậy, từ đen ở 0 đến trắng ở 255. Nếu bạn chuyển RGB sang HEX và ba cặp giống nhau, bạn biết ngay màu đó không có sắc độ. Một màu gần xám với các cặp khác nhau một hoặc hai bậc có một sắc nhẹ, mà nhà thiết kế thường dùng để cho một màu trung tính chút ấm hoặc lạnh.

Xây dựng và kiểm tra một bảng màu

Từ một nhúm màu đã chọn đến một bảng màu

Một bảng màu điển hình có một màu chính, một màu nhấn, một màu trung tính cho chữ, một màu trung tính sáng hơn cho các bề mặt và một hoặc hai màu báo hiệu cho thành công và lỗi. Hãy chọn từng màu trong công cụ thiết kế của bạn, đọc các số rgb của nó, và chuyển RGB sang HEX cho bảng định kiểu. Viết chúng thành các thuộc tính tùy chỉnh với những cái tên mô tả vai trò, và bảng màu sẵn sàng dùng trong mọi thành phần.

Độ tương phản giữa chữ và nền

Chữ dễ đọc cần đủ khác biệt về độ sáng giữa các chữ cái và nền của chúng. Các hướng dẫn về khả năng tiếp cận định nghĩa một tỷ lệ tương phản tính từ các giá trị đỏ, xanh lục và xanh lam của hai màu, và đòi hỏi ít nhất 4,5 trên 1 cho chữ thông thường. Các công cụ kiểm tra chấp nhận mã hex, nên các mã bạn tạo ra ở đây có thể đưa thẳng vào chúng. Hãy kiểm tra từng cặp bạn định dùng, không chỉ màu chính trên nền trắng.

Chuyển đổi một danh sách

Khi bạn có nhiều màu cần chuyển, hãy làm lần lượt từng màu và dán mỗi kết quả vào một bảng cùng tên và cách dùng của nó. Mất một phút cho mỗi màu, và bảng trở thành tham chiếu cho cả dự án. Nếu một màu sau đó được điều chỉnh, chỉ hàng của nó cần đổi.

Giữ hex và rgb đồng bộ

Nếu dự án của bạn lưu một số màu dưới dạng hex và số khác dưới dạng rgb, chúng dễ lệch nhau khi ai đó sửa một bên và quên bên kia. Hãy chọn một bên làm bản chủ, thường là hex, và suy ra bên kia bằng bộ chuyển đổi mỗi khi cần.

Các công cụ chuyển đổi liên quan

Cùng họ công cụ này bao gồm các phép chuyển đổi lân cận. Để quay lại, dùng Chuyển HEX sang RGB. Với màu được mô tả bằng sắc độ, Chuyển HEX sang HSL và Chuyển HSL sang HEX có sẵn, và cho in ấn, Chuyển RGB sang CMYK, Chuyển CMYK sang RGB và Chuyển CMYK sang HEX. Với các cỡ trong cùng bảng định kiểu, Chuyển px sang rem làm cho độ dài điều mà trang này làm cho màu.

Một ví dụ cụ thể

Giả sử một bộ chọn màu trong trình chỉnh sửa ảnh cho bạn biết màu nhấn của một bức ảnh là rgb(214, 98, 56). Bạn gõ ba con số và đọc #D66238. Trong bảng định kiểu bạn viết --accent: #D66238 và dùng nó cho nút và liên kết. Một đồng nghiệp hỏi màu đó trong cẩm nang thương hiệu là gì, và bạn gửi mã. Sau đó bạn cần một phiên bản trong mờ cho một biểu ngữ, và bạn chuyển ngược lại bằng Chuyển HEX sang RGB để dựng rgba(214, 98, 56, 0.15). Cả hai phép chuyển đổi đều chính xác, nên biểu ngữ có cùng sắc độ với nút.

Một danh sách kiểm tra ngắn

Trước khi chuyển đổi

Kiểm tra mỗi số nằm giữa 0 và 255. Quyết định xem bạn có cần độ trong suốt không.

Trong khi chuyển đổi

Gõ ba con số, đọc mã và sao chép nó cùng dấu thăng.

Sau khi chuyển đổi

Thử màu trong ngữ cảnh, trên nền thật, và kiểm tra độ tương phản của mọi chữ nằm trên nó.

Những lỗi thường gặp

Bỏ số không ở đầu

Mỗi cặp có hai chữ số. 7 là 07.

Viết số lớn hơn 255

Chúng không thể viết bằng hai chữ số. Hãy giới hạn chúng trước.

Coi màn hình là sự thật

Các con số là chính xác. Vẻ ngoài phụ thuộc vào màn hình.

Màu của bạn ở lại trên thiết bị của bạn

Phép tính diễn ra cục bộ. Các giá trị của bạn được trình duyệt của chính bạn sử dụng và không có gì được gửi đi đâu cả. Không có gì để xóa sau đó và không có tài khoản nào để tạo. Đó là cách đơn giản để chuyển RGB sang HEX.

Tóm tắt

Để chuyển RGB sang HEX ở đây, hãy gõ ba con số và đọc ngay mã hex. Phép chuyển đổi giữ màu một cách chính xác: hex và rgb() là hai cách viết của cùng ba con số, 0 đến 255 cho đỏ, xanh lục và xanh lam, nên không có gì bị xấp xỉ và vòng đi về trả lại đúng cái đã bắt đầu. Một giá trị thứ tư cho độ trong suốt cũng được mang sang, vì rgba() thành #RRGGBBAA, và ngược lại. Cả hai cách viết đều mô tả sRGB, nên không thể mô tả các màu nằm ngoài nó. Mỗi cặp có hai chữ số, nên một số dưới 16 được thêm số không ở đầu. Không có gì được tải lên.