Chuyển Đổi Màu HEX sang RGB

HEX và RGB: hai cách viết cùng một màu

Mỗi màu sắc bạn thấy trên màn hình được pha trộn từ ba nguồn sáng: đỏ, xanh lá và xanh dương. Bật cả ba lên tối đa và bạn có màu trắng; tắt tất cả đi và bạn có màu đen. HEX và RGB đơn giản là hai ký hiệu để mô tả mỗi kênh sáng đó sáng bao nhiêu. Chúng trỏ đến đúng một màu như nhau, vì vậy một bộ chuyển đổi tốt chỉ dịch giữa hai hệ thống viết mà không bao giờ thay đổi màu sắc thực tế. Đó là điều công cụ này làm, hoàn toàn trong trình duyệt của bạn, đồng thời hiển thị bảng màu trực tiếp để bạn có thể xác nhận kết quả bằng chính mắt mình.

Cách đọc mã hex

Màu hex trông giống như #1E90FF. Ký hiệu thăng chỉ đánh dấu điểm bắt đầu; sáu ký tự sau đó là ba cặp, được viết theo mẫu #RRGGBB. Cặp đầu tiên là đỏ, cặp thứ hai là xanh lá, cặp thứ ba là xanh dương. Mỗi cặp là một số được viết theo hệ thập lục phân, nghĩa là cơ số 16, trong đó các chữ số chạy từ 0-9 và A, B, C, D, E, F đại diện cho 10 đến 15. Một cặp có thể giữ các giá trị từ 00 (kênh tắt hoàn toàn) đến FF (bật hoàn toàn). Ở hệ thập phân thông thường, phạm vi đó chính xác là 0 đến 255, cùng thang đo mà RGB sử dụng. Với 256 mức khả thi mỗi kênh, dạng sáu chữ số có thể mô tả 16.777.216 màu khác nhau.

Chuyển đổi cả hai chiều, với ví dụ thực tế

Để đi từ HEX sang RGB, tách mã thành ba cặp và chuyển mỗi cặp từ cơ số 16 sang số thập phân thông thường. Lấy #1E90FF. Cặp đỏ là 1E: đó là 1 nhân 16, cộng 14 (E), bằng 30. Cặp xanh lá 90 là 9 nhân 16, cộng 0, bằng 144. Cặp xanh dương FF là 15 nhân 16, cộng 15, bằng 255. Vì vậy #1E90FF trở thành rgb(30, 144, 255) — màu xanh dodger quen thuộc.

Đi theo chiều ngược lại là cùng quá trình đó nhưng ngược lại. Lấy mỗi số RGB và viết nó dưới dạng hai chữ số hex. Màu đỏ thuần túy, rgb(255, 0, 0), cho FF, 00 và 00, ghép lại thành #FF0000. Một điều đáng nhớ: nếu giá trị nhỏ hơn 16, bạn vẫn cần cả hai chữ số, vì vậy 5 được viết là 05 chứ không phải 5. Bộ chuyển đổi xử lý việc đệm đó cho bạn, nhưng nó khiến mọi người vấp ngã khi làm thủ công.

Mỗi định dạng được dùng ở đâu

HEX là ngôn ngữ hàng ngày của web. CSS, HTML và hầu hết code bạn viết đều dùng mã hex vì chúng gọn gàng và dễ sao chép. RGB thường xuất hiện trong các công cụ thiết kế và chỉnh sửa hình ảnh — Figma, Photoshop, Sketch và Illustrator thường hiển thị thanh trượt hoặc trường trong phạm vi 0-255, và các ứng dụng quay màn hình hoặc video thường mong đợi RGB. Vì vậy bạn thường lấy mã hex từ stylesheet và cần dạng RGB để gõ vào bảng thiết kế, hoặc ngược lại. Chuyến đi khứ hồi đó là lý do duy nhất tại sao bộ chuyển đổi tiện dụng. Nếu bạn cần tạo cả một bộ màu phù hợp thay vì dịch một màu, trình tạo bảng màu của chúng tôi là điểm khởi đầu tốt hơn, và bạn sẽ tìm thấy thêm các tiện ích như thế này trong công cụ dành cho lập trình viên.

Alpha, độ mờ và HSL

Cả hai ký hiệu đều có dạng mở rộng thêm độ trong suốt. RGB trở thành rgba(30, 144, 255, 0.5), trong đó giá trị thứ tư là alpha — 0 là hoàn toàn trong suốt và 1 là hoàn toàn đặc. HEX thêm cặp thứ tư cho cùng mục đích, tạo ra mã tám chữ số #RRGGBBAA; 80, chẳng hạn, là khoảng 50 phần trăm độ mờ. Một số bộ chuyển đổi cũng cung cấp HSL (hue/màu sắc, saturation/độ bão hòa, lightness/độ sáng), mô tả màu theo cách mà con người có thể nghĩ đến — chọn màu trên vòng màu, sau đó điều chỉnh độ sặc sỡ và độ sáng. HSL là một mô hình tư duy khác chứ không phải bảng màu khác, vì vậy nó có thể trực quan hơn khi bạn muốn điều chỉnh màu sáng hơn hoặc nhạt hơn mà không phải vật lộn với ba con số riêng biệt.

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