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

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

Một công cụ thiết kế đưa cho bạn một màu là #5A4632. Một bảng định kiểu, một đoạn mã canvas, một thư viện biểu đồ hay một chương trình đồ họa đòi nó dưới dạng rgb(90, 70, 50). Chúng là cùng một màu, và công việc đi từ cách viết này sang cách viết kia xuất hiện suốt: một cẩm nang thương hiệu liệt kê mã hex và mã của bạn cần các con số để tính một sắc thái sáng hơn, một khách hàng gửi một màu từ logo và bạn phải điền một rgba() có độ trong suốt, một thư viện chỉ nhận ba giá trị riêng. Chuyển HEX sang RGB là một việc nhỏ, và một bộ chuyển đổi đáng tin cậy giúp bạn khỏi làm số học hệ mười sáu trong đầu rồi làm sai.

Phép chuyển đổi 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 đỏ, lục và lam mà màn hình nên phát, mỗi số từ 0 đến 255. Không gì bị xấp xỉ, và một vòng đi về trả lại đúng cái đã bắt đầu. Trang này làm 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 các chữ số hex ánh xạ thành ba con số thế nào, độ trong suốt được mang qua ra sao, dạng viết tắt làm gì, giới hạn của sRGB, và những tình huống nhà phát triển và nhà thiết kế cần chuyển HEX sang RGB.

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

Ba cặp chữ số thành ba con số

Một màu hex là một dấu thăng theo sau bởi sáu chữ số thập lục phân, được đọc theo cặp: cặp đầu là đỏ, cặp hai là lục, cặp ba là lam. Mỗi cặp là một số hệ mười sáu giữa 00 và FF, tức 0 đến 255 trong hệ thập phân bạn dùng mỗi ngày. Vậy #5A4632 tách thành 5A, 46 và 32. 5A là 5 × 16 + 10 = 90, 46 là 4 × 16 + 6 = 70, và 32 là 3 × 16 + 2 = 50. Màu là rgb(90, 70, 50), là ví dụ mà trang bắt đầu.

Vì sao các chữ số chạy từ 0 đến F

Hệ mười sáu cần mười sáu ký hiệu, nên sau 9 đến các chữ cái A đến F, đại diện cho 10 đến 15. Một cặp chữ số như vậy cho 16 × 16 = 256 giá trị, đúng bằng một byte chứa được. Một màu trên màn hình là ba byte, và hex đơn giản là cách gọn để viết chúng: sáu ký tự thay vì ba con số với dấu phẩy và ngoặc.

Chữ hoa và chữ thường

#5a4632 và #5A4632 là cùng một màu. CSS chấp nhận cả hai, và bộ chuyển đổi này cũng vậy. Hãy chọn một quy ước cho một dự án và giữ nó, vì chữ hoa chữ thường lẫn lộn làm việc tìm kiếm trong bảng định kiểu khó hơn.

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

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

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

Nó mang độ trong suốt qua

Một giá trị thứ tư cho độ trong suốt cũng được mang qua: #RRGGBBAA thành rgba(), và ngược lại. Cặp cuối là kênh alpha, từ 00, hoàn toàn trong suốt, đến FF, hoàn toàn đục. Vậy #5A463280 là rgba(90, 70, 50, 0.5), vì 80 trong hex là 128, và 128 trên 255 là xấp xỉ một nửa. Tám chữ số được mọi trình duyệt hiện nay chấp nhận.

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

Cả hai cách viết mô tả sRGB, không gian màu mà màn hình đã dùng ba mươi năm. Chúng không thể mô tả một màu ngoài nó, là lý do các ký hiệu CSS mới hơn, lab(), oklch() và color(), tồn tại. Màn hình hiện đại có thể hiển thị màu bão hòa hơn sRGB chứa được, và một nhà thiết kế chọn một màu như vậy trong công cụ dải màu rộng sẽ thấy nó bị cắt về sRGB khi viết thành hex.

Dạng viết tắt được khai triển, không được giữ

Dạng viết tắt được khai triển chứ không được giữ: #abc quay về là #AABBCC, là cùng màu viết theo cách dài. Mỗi chữ số được nhân đôi. Nghĩa là bạn có thể dán một mã ba chữ số và nhận đúng các con số, nhưng bạn không thể lấy lại cách viết ngắn từ cách viết dài bằng cách nhìn, chỉ bằng cách kiểm tra mỗi cặp có lặp lại.

Các màu phổ biến và con số của chúng

Vài màu cần nhớ

Trắng là #FFFFFF, tức rgb(255, 255, 255): cả ba ánh sáng ở công suất tối đa. Đen là #000000, rgb(0, 0, 0): hoàn toàn không ánh sáng. Đỏ thuần là #FF0000, lục #00FF00 và lam #0000FF. Một màu xám trung bình là bất kỳ mã nào có ba cặp bằng nhau, như #808080, tức rgb(128, 128, 128). Các cặp bằng nhau luôn nghĩa là xám, vì lượng bằng nhau của ba ánh sáng không cho sắc độ.

Đọc một mã chỉ bằng một cái nhìn

Một khi bạn biết quy luật, bạn có thể ước lượng một màu từ các chữ số hex. Một mã bắt đầu bằng cặp đầu cao thì ngả đỏ, cặp giữa cao thì ngả lục, cặp cuối cao thì ngả lam. #FF8800 là nhiều đỏ, một ít lục và không lam, là cam. Bạn không cần công cụ cho điều đó, nhưng cần một cái cho các con số chính xác.

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

Gõ hoặc dán mã hex

Nhập màu vào trường đầu tiên, có hoặc không có dấu thăng. Dạng ba, sáu và tám chữ số được chấp nhận.

Đọc giá trị rgb

Đáp án hiện ngay trong trường kia, ở dạng rgb(90, 70, 50), hoặc rgba() nếu mã mang độ trong suốt. Trang hiển thị câu #5A4632 = rgb(90, 70, 50) để bạn kiểm tra bằng một cái nhìn.

Sao chép nó vào mã của bạn

Dán kết quả vào bảng định kiểu, đoạn mã hay công cụ đã yêu cầu nó. Nếu bạn cần ba con số riêng, đó là những số trong ngoặc.

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

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

Một màu trên màn hình là ba con số, phát bao nhiêu ánh sáng đỏ, lục và lam, mỗi số từ 0 đến 255, là một byte. Hex đơn giản viết các byte đó ở hệ 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 kia con người đọc được: nó cho sắc độ như một góc quanh bánh xe màu, với độ bão hòa và độ sáng bằng phần trăm, để một nhà thiết kế có thể làm thứ gì đó sáng hơn mà không phải tính lại ba con số. CMYK thuộc về một thế giới khác hẳn, mực chứ không phải ánh sáng. Nó là phép trừ, dựng từ bốn bản in, và không thể chạm mọi màu mà màn hình có thể, vì màn hình phát ánh sáng còn giấy chỉ phản xạ nó. Cho những thứ đó, xem HEX sang HSL và HEX sang CMYK.

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

Trong bảng định kiểu

Hex là thứ bạn gõ vào bảng định kiểu và thứ công cụ thiết kế đưa bạn. RGB xuất hiện ở bất cứ đâu một màu cần số học: chuyển sắc, độ trong suốt, mã tính một sắc thái. Biết cả hai cách viết, và chuyển được giữa chúng, là một phần của công việc front-end hằng ngày.

Trong đoạn mã và vẽ canvas

Mã vẽ thường muốn ba con số riêng, để pha hai màu, làm tối một màu theo lượng cố định hay kiểm tra một điểm ảnh có khớp mục tiêu không. Chuyển HEX sang RGB cho bạn các con số trực tiếp.

Trong công cụ đồ họa và hình ảnh

Trình chỉnh sửa ảnh thường hiển thị một màu dưới dạng ba con số hoặc một mã hex, và cho bạn gõ cái nào cũng được. Chuyển giữa hai dạng cho phép bạn tái tạo một màu từ trang web trong chương trình muốn các con số.

Trong tài liệu và cẩm nang thương hiệu

Một cẩm nang thương hiệu có thể liệt kê một màu ở hex cho web, ở RGB cho màn hình và ở CMYK cho in. Để hai cái đầu khớp nhau là việc của một phép chuyển đổi, và là loại kiểm tra bắt lỗi chính tả trước khi nó được in trên một nghìn tờ rơi.

Những cách dùng thực tế của dạng RGB

Độ trong suốt mà không cần màu thứ hai

Với rgba(90, 70, 50, 0.5) bạn có màu ở nửa độ mạnh, để những gì phía sau nó lộ ra. Đó là cách chuẩn để làm lớp phủ, bóng đổ và nền pha màu từ một màu thương hiệu mà không phải phát minh màu mới.

Tính các sắc thái sáng hơn và tối hơn

Để làm trạng thái di chuột tối hơn chút, một đoạn mã có thể trừ một lượng cố định khỏi mỗi con số trong ba. Làm điều tương tự trên chuỗi hex thì vụng về; trên rgb thì là số học đơn giản. Nếu bạn cần điều chỉnh dựa trên sắc độ, hãy chuyển HEX sang HSL thay vào đó.

Kiểm tra tương phản

Công cụ trợ năng tính độ tương phản giữa hai màu từ các giá trị đỏ, lục và lam của chúng. Có các con số cho phép bạn tự tính, hoặc dán chúng vào một bộ kiểm tra, để xác nhận chữ trên nền đọc được.

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

Quên cặp alpha

Một mã tám chữ số có độ trong suốt ở hai chữ số cuối. Nếu bạn cắt chúng đi, bạn mất nó. Hãy kiểm tra độ dài mã trước khi quyết định rằng kết quả là màu.

Nhầm thứ tự

Hex là đỏ, lục, lam. Một vài định dạng, và một số API đồ họa cũ, dùng lam, lục, đỏ. Nếu một màu ra sai trong một chương trình cụ thể, hãy kiểm tra thứ tự kênh của nó.

Sao chép từ ảnh chụp màn hình

Một màu đọc từ ảnh chụp màn hình là màu sau khi qua quản lý màu của màn hình và mọi sự nén. Nó có thể khác nhẹ so với màu trong tệp nguồn. Hãy dùng tệp thiết kế khi có thể.

Cho rằng các màn hình đồng ý với nhau

Hai màn hình hiển thị cùng một mã hơi khác nhau. Các con số chính xác; thứ bạn thấy phụ thuộc vào màn hình và hồ sơ màu của nó.

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

#FF0000 trong RGB là gì?

rgb(255, 0, 0), đỏ thuần.

#FFFFFF trong RGB là gì?

rgb(255, 255, 255), trắng.

Tôi có thể chuyển mã ba chữ số không?

Có. Mỗi chữ số được nhân đôi: #09C thành #0099CC, tức rgb(0, 153, 204).

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ó bị tải lên không?

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

Làm sao để quay lại?

Với RGB sang HEX, viết ba con số thành một mã hex.

Chọn khôn ngoan khi bạn chuyển HEX sang RGB

Biết bạn cần gì tiếp theo

Nếu bạn cần độ trong suốt, rgba() là dạng tự nhiên. Nếu bạn cần điều chỉnh độ sáng hay sắc độ, HSL dễ hơn. Nếu màu sẽ đem in, CMYK là bước kế tiếp, với những lưu ý mà phép chuyển đổi đó mang theo. Xem RGB sang CMYK.

Giữ hex làm bản chủ

Với các màu trong một bảng màu thương hiệu, hãy giữ mã hex làm tham chiếu. Nó ngắn, không mơ hồ và được hiểu ở mọi nơi. Hãy suy ra các dạng khác từ nó khi cần.

Dùng thuộc tính tùy chỉnh

Trong CSS, hãy định nghĩa màu một lần, như --brand: #5A4632, và tham chiếu chúng bằng tên. Nếu bạn cần các con số cho rgba(), hãy định nghĩa thêm --brand-rgb: 90 70 50. Phép chuyển đổi khi đó chỉ làm một lần.

CSS hiện đại và dạng RGB

Cú pháp phân cách bằng khoảng trắng

CSS hiện nay chấp nhận rgb() với khoảng trắng và một dấu gạch chéo cho độ trong suốt, như trong rgb(90 70 50 / 50%). Các con số giống như trong dạng dấu phẩy, nên kết quả của một phép chuyển đổi dùng được ở cả hai. Trình duyệt cũ hơn và một số công cụ mong đợi dấu phẩy, nên dạng dấu phẩy vẫn là lựa chọn an toàn khi bạn không biết màu sẽ được dùng ở đâu.

Phần trăm và phân số

RGB cũng có thể viết bằng phần trăm, như rgb(35% 27% 20%), nơi 100 phần trăm là 255. Trang cho số nguyên vì chúng là thứ hex lưu và thứ hầu hết công cụ mong đợi. Nếu bạn cần phần trăm, hãy chia mỗi số cho 255 và nhân với 100.

Thuộc tính tùy chỉnh cho ba con số

Một mẹo phổ biến là chỉ lưu ba con số trong một thuộc tính tùy chỉnh, --brand-rgb: 90 70 50, và dùng nó như rgb(var(--brand-rgb) / 0.5). Nó cho phép một định nghĩa duy nhất phục vụ cả dùng đặc lẫn trong mờ. Khi bạn chuyển HEX sang RGB cho mục đích này, hãy sao chép chỉ các con số từ đáp án.

Làm việc với màu trong thực tế

Kiểm tra với cẩm nang thương hiệu

Nếu một cẩm nang thương hiệu cho cả hex và rgb cho cùng một màu, hãy chuyển một cái và so với cái kia. Sự không khớp thường nghĩa là một lỗi chính tả trong cẩm nang, và tìm ra nó trước khi nó được dùng trên mọi trang đáng với một phút nó tốn.

Giữ bảng màu như một danh sách ngắn

Hầu hết trang web dùng từ năm đến tám màu. Hãy viết chúng trong một ghi chú ở cả hai dạng. Mỗi lần bạn cần chuyển HEX sang RGB cho một thành phần mới, bạn có thể tra thay vì tính lại, và bảng màu giữ nhất quán.

Đặt tên màu theo vai trò

Những tên như primary, surface và warning sống sót qua các lần thiết kế lại tốt hơn tên như green hay brown. Phép chuyển đổi cho bạn các con số; cái tên nói chúng dùng để làm gì.

Các bộ chuyển đổi liên quan

Cùng họ công cụ bao quát các phép chuyển đổi lân cận. Để quay lại, hãy dùng RGB sang HEX. Cho các màu được mô tả bằng sắc độ, HEX sang HSL và HSL sang HEX ở ngay gần, và cho in ấn, HEX sang CMYK, CMYK sang HEX và CMYK sang RGB. Với kích thước trong cùng bảng định kiểu, px sang rem và px sang em làm cho chiều dài điều mà trang này làm cho màu sắc.

Một ví dụ có lời giải

Giả sử màu thương hiệu của bạn là #1E7A5C và bạn muốn một phiên bản trong mờ cho nền thẻ. Bạn gõ mã và đọc rgb(30, 122, 92). Trong bảng định kiểu bạn viết background: rgba(30, 122, 92, 0.12), một sắc nhạt rất nhẹ của cùng màu xanh lục, và một viền rgba(30, 122, 92, 0.4). Thẻ nằm thoải mái trên trang trắng và trang xám, vì độ trong suốt để trang đi qua. Khi màu thương hiệu sau này đổi, bạn thay ba con số trong một thuộc tính tùy chỉnh và mọi sắc nhạt theo sau.

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

Trước khi chuyển

Kiểm tra độ dài mã: ba, sáu hoặc tám chữ số. Quyết định bạn có cần độ trong suốt không.

Trong khi chuyển

Dán mã, đọc giá trị rgb và sao chép nó kèm ngoặc, hoặc chỉ ba con số.

Sau khi chuyển

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 sai lầm thường gặp

Bỏ cặp độ trong suốt

Tám chữ số nghĩa là alpha. Hãy giữ nó hoặc chuyển nó thành rgba().

Nhầm thứ tự kênh

Hex là đỏ trước. Một số công cụ mong đợi lam trước.

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

Các con số chính xác. Diện mạo 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 dùng bởi chính trình duyệt và không có gì được gửi đi đâu. Không có gì để xóa sau đó và không có tài khoản để tạo. Đó là cách đơn giản để chuyển HEX sang RGB.

Tóm tắt

Để chuyển HEX sang RGB ở đây, hãy gõ hoặc dán mã hex và đọc ngay giá trị rgb. Phép chuyển đổi giữ màu chính xác: hex và rgb() là hai cách viết của cùng ba con số, 0 đến 255 cho đỏ, lục và lam, nên không gì bị xấp xỉ và một 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 qua, vì #RRGGBBAA thành rgba(), và ngược lại. Cả hai cách viết mô tả sRGB, nên chúng không thể mô tả màu ngoài nó, và dạng viết tắt được khai triển chứ không được giữ: #abc quay về là #AABBCC. Không có gì được tải lên.