Bộ chuyển đổi HEX sang RGB

Chuyển đổi các mã màu HEX sang các giá trị RGB và ngược lại.

Dữ liệu của bạn không rời khỏi thiết bị
Chọn một màu hoặc nhập các giá trị bên dưới
RGB

Giá trị CSS

#2b7190
rgb(43, 113, 144)
hsl(201, 54%, 37%)
hsv(201, 70%, 56%)

Cách chuyển đổi HEX sang RGB hoạt động

Các màu HEX sử dụng một chuỗi thập lục phân sáu chữ số (#RRGGBB) trong đó mỗi cặp đại diện cho các kênh đỏ, xanh lá và xanh dương. Các giá trị từ 00 (0) đến FF (255).

RGB sử dụng ba số thập phân (0 đến 255) cho mỗi kênh. Ví dụ, #2b7190 phân tích thành R:43, G:111, B:142.

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

Cách chuyển đổi HEX sang RGB thủ công?

Phân tách mã hex thành ba cặp (vd: #FF8800 → FF, 88, 00), sau đó chuyển đổi mỗi cặp từ cơ số 16 sang cơ số 10: FF = 255, 88 = 136, 00 = 0. Kết quả là rgb(255, 136, 0).

Còn các mã HEX 3 chữ số thì sao?

HEX 3 chữ số là một phím tắt trong đó mỗi chữ số được nhân đôi: #F80 = #FF8800. Bộ chuyển đổi này xử lý cả hai định dạng tự động.

Khi nào sử dụng HEX hoặc RGB?

HEX nhỏ gọn hơn và phổ biến hơn trong CSS. RGB tốt hơn khi bạn cần thao tác các kênh riêng lẻ trong mã hoặc sử dụng rgba() cho độ trong suốt.

Ký hiệu hex thực sự là gì

Màu hex là biểu diễn cơ số 16 của màu RGB 24-bit. Sáu chữ số sau #, ba cặp: đỏ, xanh lá, xanh dương. Mỗi cặp là số từ 00 đến ff: một byte (8 bit) mỗi kênh, ba kênh, tổng cộng 24 bit. Đó là đủ chính xác để mã hóa bất kỳ một trong 2²⁴ = 16.777.216 màu rời rạc. Dải «màu thực» / «hàng triệu màu» đã là mức cơ bản của màn hình tiêu dùng từ cuối những năm 1990.

Dấu thăng không phải là một phần của giá trị, đó là tiền tố cú pháp thông báo cho bộ phân tích CSS «những gì theo sau là màu hex, không phải tên biến.» Không có nó, một chuỗi như ff0000 có thể gây nhầm lẫn cho lexer. Các chữ số 0-9 giữ nguyên ý nghĩa thập phân; các chữ cái A-F (không phân biệt chữ hoa/thường trong CSS) biểu diễn thập phân 10-15. Vì vậy f là 15, ff là 15 × 16 + 15 = 255.

Toán học, với các ví dụ đã giải

Mỗi cặp hex hai chữ số ánh xạ sang thập phân 0-255 theo công thức (high_digit × 16) + low_digit, trong đó mỗi chữ số được hiểu là 0-15 (A=10 đến F=15):

Trong JavaScript, toàn bộ quá trình phân tích chỉ vừa trong hai dòng. const n = parseInt(hex.slice(1), 16); theo sau bởi const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];: đó về cơ bản là mã đáng kể của mọi bộ chuyển đổi hex-to-RGB trên web. Chiều ngược lại là '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').

Viết tắt 3 chữ số, 4 chữ số và 8 chữ số

CSS cho phép các dạng viết tắt khi các kênh đối xứng:

Viết tắt 3 chữ số đã có từ CSS Level 1 (1996). Các dạng alpha 4 chữ số và 8 chữ số xuất hiện muộn hơn nhiều trong CSS Color Module Level 4, với khả năng tương thích đa trình duyệt rộng rãi từ khoảng giữa năm 2015.

Màu có tên và câu chuyện rebeccapurple

Trước khi hex trở thành thành ngữ web mặc định, màu có tên là chuẩn. HTML 4.01 (tháng 12 năm 1999) quy định 16 màu có tên, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua: dựa trên 16 màu chuẩn của bảng màu Windows VGA. CSS 2.1 thêm orange là màu thứ 17. CSS Color Module Level 3 sau đó chính thức áp dụng khoảng 130 tên bổ sung từ file rgb.txt của X11 (mà Mosaic và Netscape đầu thời kế thừa từ X Window System), nâng tổng lên khoảng 147-148 tùy cách đếm các alias như cyan/aqua và gray/grey.

CSS Color Module Level 4 thêm một màu nữa, kèm theo một câu chuyện. Rebecca Meyer là con gái sáu tuổi của Eric A. Meyer, một chuyên gia CSS đầu thời và thành viên W3C. Cô bé mất vì ung thư não vào ngày 7 tháng 6 năm 2014, trong ngày sinh nhật thứ sáu của mình. Eric đã viết trên blog của anh cùng tuần đó: «Cô bé đã đến được tuổi sáu. Trong gần mười hai giờ, cô bé đã là sáu tuổi.» Một thành viên cộng đồng đề xuất thêm màu yêu thích của cô bé, một màu tím cà đậm, hex #663399: là beccapurple; Eric chấp nhận với một điều kiện: nó phải là rebeccapurple, không phải beccapurple, vì chính Rebecca vừa mới thông báo rằng cô bé đã đủ lớn để không cần tên thời thơ ấu nữa. CSS Working Group phê duyệt thay đổi vào ngày 22 tháng 6 năm 2014, hai tuần sau khi cô bé mất. WebKit và các engine trình duyệt khác tích hợp hỗ trợ trong vài ngày. Đây là màu CSS duy nhất được đặt theo tên một người, một tưởng niệm lặng lẽ trong mọi trình duyệt hiện đại.

sRGB: không gian màu ẩn của mọi mã hex

Khi bạn viết #FF5733 trong CSS, bạn không chỉ xác định một con số mà còn xác định nó trong không gian màu sRGB. Điều này là ẩn; trình duyệt sẽ diễn giải giá trị hex của bạn là sRGB trừ khi bạn dùng một trong các hàm color() mới hơn để chỉ định khác.

sRGB được đề xuất chung bởi Hewlett-Packard và Microsoft vào năm 1996 và được áp dụng là IEC 61966-2-1:1999, một không gian màu độc lập với thiết bị duy nhất được thiết kế xung quanh đường cong đáp ứng của màn hình CRT thông thường thời đó. Nó chia sẻ các tọa độ sắc chính với ITU-R BT.709 (tiêu chuẩn HDTV) tại điểm trắng D65 (6.500 K). W3C đã định nghĩa rõ ràng sRGB là không gian màu mặc định cho web; tất cả mã hex, tất cả giá trị rgb(), tất cả hình ảnh JPEG cổ điển và PNG không có thẻ đều được diễn giải là sRGB.

Giới hạn trung thực: sRGB bao phủ khoảng 35,9% biểu đồ màu nhìn thấy được CIE 1931. Có những màu tồn tại trong tự nhiên, có thể hiển thị trên màn hình điện thoại OLED hiện đại, nhưng không thể chỉ định bằng ký hiệu hex: xanh ngọc bão hòa, đỏ-cam hoàng hôn rực rỡ, sơn huỳnh quang. CSS Color Module Level 4 đã giới thiệu các không gian mới cho chúng, có thể truy cập qua hàm color(): Display P3 (được dùng bởi màn hình Apple từ iPhone 7 và iMac cuối năm 2015, rộng hơn sRGB khoảng 25%) và Rec. 2020 (tiêu chuẩn phát sóng 4K/8K, khoảng 75% của CIE 1931). Trên các thiết bị chỉ có sRGB cũ hơn, trình duyệt dự phòng một cách duyên dáng.

Các lựa chọn hiện đại: HSL, HWB, OKLCH

Hex ngắn gọn nhưng không thân thiện với con người, bạn không thể nhìn vào #3DE7C9 và đoán được màu sắc. CSS đã dần thêm các ký hiệu hàm phù hợp với cách con người nghĩ về màu:

OKLCH là hướng dài hạn của màu CSS, nhưng mã hex vẫn sẽ là ngôn ngữ chung của các công cụ thiết kế, thông số thương hiệu và đoạn code sao chép, chúng ngắn gọn, an toàn để sao chép qua bất kỳ phương tiện văn bản nào và được hiểu phổ quát.

Nguồn gốc năm 1861 của mô hình RGB cộng

Mô hình RGB có nguồn gốc từ lý thuyết thị giác ba màu Young-Helmholtz (đầu thế kỷ 19), đề xuất rằng mắt người có ba loại tế bào cảm thụ màu sắc tương ứng với đỏ, xanh lá và xanh dương. James Clerk Maxwell đã chứng minh điều này bằng thực nghiệm vào ngày 17 tháng 5 năm 1861 tại Royal Institution ở London. Ông chiếu ba bức ảnh đen trắng của một dải ruy băng tartan (một qua kính lọc đỏ, một xanh lá, một xanh dương) qua ba máy chiếu gắn cùng kính lọc màu; hình ảnh kết hợp trên màn hình hiển thị dải ruy băng xấp xỉ đủ màu. Điều này thường được ghi nhận là bức ảnh màu đầu tiên. Cùng nguyên tắc RGB cộng đó vận hành mọi màn hình CRT, LCD, OLED và plasma từng được sản xuất: mỗi pixel là một bộ ba điểm ảnh phụ đỏ, xanh lá và xanh dương có độ sáng biến đổi độc lập, và võng mạc của bạn trộn chúng thành màu cảm nhận được.

Thêm câu hỏi

Hex có phân biệt chữ hoa/thường không?

Không. #abcdef và #ABCDEF giống hệt nhau với bộ phân tích. Thông số CSS nói rõ: giá trị màu hex không phân biệt chữ hoa/thường. Chữ hoa/thường hỗn hợp như #FfAa00 cũng hợp lệ, mặc dù hiếm gặp trong code sản phẩm. (Không nhầm với các fragment URL, nơi dấu thăng đầu là một khái niệm cú pháp khác hoàn toàn.)

Tại sao tính trung bình hai mã hex lại tạo ra màu xám đục?

Vì các giá trị hex được mã hóa gamma (hàm truyền sRGB được áp dụng), và tính trung bình trong không gian gamma không giống với tính trung bình trong ánh sáng tuyến tính. Ví dụ điển hình là linear-gradient(red, green) tạo ra điểm giữa olive đục, toán học đúng trong không gian mã hóa gamma nhưng sai về mặt hình ảnh. Các hàm màu hiện đại như OKLCH giải quyết điều này bằng cách nội suy trong không gian đồng đều về mặt cảm nhận, đó là lý do tại sao chúng tạo ra gradient mượt mà hơn.

Tại sao không có mã hex cho màu «neon» hay màu «huỳnh quang»?

Vì ký hiệu hex ẩn là sRGB, và sRGB chỉ bao phủ khoảng 36% màu mà mắt người có thể nhìn thấy. Nhiều màu rực rỡ (xanh ngọc bão hòa, đỏ-cam rực rỡ, sơn huỳnh quang) tồn tại trong tự nhiên và có thể hiển thị trên màn hình gam rộng hiện đại nhưng nằm ngoài khối sRGB. Để đạt được chúng, bạn cần color(display-p3 …), color(rec2020 …), hoặc oklch() với giá trị chroma cao. Những màu đó không có tương đương hex.

Bảng màu «web-safe» là gì?

Vào cuối những năm 1990, khi nhiều màn hình bị giới hạn 256 màu, các nhà thiết kế bám vào bảng màu 216, giao điểm của các bảng màu hệ thống Windows và Mac OS. 216 màu đến từ một khối 6×6×6: mỗi kênh R, G và B chỉ nhận các giá trị 00, 33, 66, 99, CC, FF. Lynda Weinman phổ biến nó trong cuốn sách năm 1996 của bà Designing Web Graphics. Nó trở nên lỗi thời vào khoảng năm 2000 khi màu 24-bit được tích hợp trên phần cứng tiêu dùng. Ngày nay đây chỉ là tò mò lịch sử thuần túy, đôi khi vẫn thấy trong các mã hex cổ điển như #CC0033 hoặc #993366.

Có gì được gửi lên máy chủ không?

Không. Hex-to-RGB là hai dòng số học JavaScript hàm thuần túy. Quá trình chuyển đổi chạy cục bộ; không có gì về màu bạn nhập được tải lên bất kỳ đâu; trang hoạt động ngoại tuyến sau khi đã tải.

Công cụ liên quan

Bộ chuyển đổi màu

Chuyển đổi giữa HEX, RGB và HSL.

Trình tạo bảng màu

Tạo các bảng màu đẹp.

Sắc thái màu

Tạo các sắc thái và nuance của một màu.