Chuyển đổi mã màu
Nhập màu và sao chép các giá trị HEX, RGB, HSL.
#624DE3CC
Giới thiệu công cụ
Công cụ Chuyển đổi mã màu hiển thị cùng một màu ở định dạng HEX, RGB và HSL cùng lúc rồi chuyển đổi giữa các định dạng này. Bạn có thể chọn màu bằng cách nhập trực tiếp, chọn màu có sẵn hoặc dùng công cụ nhỏ mắt (eyedropper), đồng thời điều chỉnh cả độ trong suốt. Rất phù hợp để đổi màu sang định dạng mã cần dùng trong thiết kế web, UI, CSS và chỉnh sửa ảnh.
Cách sử dụng
Chọn màu
Nhập giá trị vào ô HEX, RGB hoặc HSL, hoặc chọn một màu có sẵn. Ở môi trường hỗ trợ, bạn còn có thể dùng nút nhỏ mắt để chọn màu trực tiếp từ màn hình.
Điều chỉnh độ trong suốt
Kéo thanh trượt độ trong suốt để kiểm soát độ mờ của màu. Thiết lập được phản ánh trong phần xem trước phía trên và trong mã màu.
Xem lại và sao chép kết quả
Kiểm tra màu ở phần xem trước, sau đó nhấn nút sao chép bên cạnh ô HEX, RGB hoặc HSL để lưu giá trị cần dùng vào clipboard.
Tính năng
HEX, RGB và HSL trong cùng một nơi
Nhập màu ở một định dạng là thấy ngay giá trị HEX, RGB và HSL.
Xem trước theo thời gian thực và độ trong suốt
Phần xem trước cập nhật ngay khi bạn thay đổi giá trị màu hoặc độ trong suốt, còn thanh trượt giúp bạn tạo màu bán trong suốt.
Nhỏ mắt và màu có sẵn
Ở trình duyệt hỗ trợ, dùng công cụ nhỏ mắt để lấy màu từ màn hình hoặc nhấp vào màu có sẵn thông dụng để áp dụng nhanh.
Sao chép từng định dạng riêng lẻ
Sao chép riêng giá trị HEX, RGB hoặc HSL để dùng trực tiếp trong CSS, công cụ thiết kế và tài liệu.
Nhập trực tiếp giá trị
Nếu đã biết mã màu, bạn chỉ cần gõ vào ô nhập là thấy ngay kết quả chuyển đổi.
Xử lý trong trình duyệt
Giá trị màu và kết quả chuyển đổi của bạn nằm trong trình duyệt — không có gì được gửi lên máy chủ.
Trường hợp sử dụng
Chuyển đổi mã màu CSS
Chuyển màu HEX từ bản thiết kế sang RGB hoặc HSL để dùng trong các style CSS.
Chuyển màu giữa các công cụ thiết kế
Khi các chương trình cần định dạng khác nhau, hãy đổi cùng một màu sang mã mà mỗi chương trình yêu cầu.
Tạo nền bán trong suốt
Điều chỉnh độ trong suốt để tạo màu bán trong suốt cho lớp phủ, nền, nút và viền.
Lấy màu từ màn hình
Dùng công cụ nhỏ mắt để chọn một màu đang hiển thị trên trang web, ảnh hoặc màn hình ứng dụng và xem nó dưới dạng mã.
Quản lý màu thương hiệu
Giữ các giá trị HEX, RGB và HSL của màu thương hiệu gọn trong một nơi để dùng nhất quán trên web, ấn phẩm và tài liệu thiết kế.
Câu hỏi thường gặp
HEX, RGB và HSL khác nhau thế nào?
HEX biểu thị màu dạng thập lục phân, ví dụ #8AD0FF. RGB thể hiện cường độ đỏ, lục, lam bằng số, còn HSL mô tả màu theo tông màu (hue), độ bão hòa (saturation) và độ sáng (lightness).
Nên dùng định dạng nào?
HEX đơn giản và được dùng rộng rãi trên web cũng như trong tài liệu thiết kế. RGB tiện để điều chỉnh trực tiếp các kênh màu, còn HSL hữu ích khi muốn thay đổi tông màu hoặc độ sáng một cách trực quan.
Độ trong suốt được thể hiện trong mã màu như thế nào?
Giá trị HEX có độ trong suốt được hiển thị dưới dạng mã 8 ký tự, với giá trị alpha được thêm vào sau mã 6 ký tự thông thường. Ví dụ, trong #8AD0FFCC, hai ký tự cuối thể hiện độ trong suốt.
HEX 6 ký tự và 8 ký tự khác nhau thế nào?
HEX 6 ký tự chỉ chứa giá trị đỏ, lục, lam. HEX 8 ký tự thêm giá trị alpha ở cuối để thể hiện độ trong suốt.
Độ trong suốt 100% và 0% nghĩa là gì?
100% là hoàn toàn mờ đục (không trong suốt), còn 0% là hoàn toàn trong suốt. Các giá trị trung gian tạo ra màu bán trong suốt, để nền lộ ra phía sau.
Khoảng giá trị RGB là bao nhiêu?
Giá trị RGB nằm trong khoảng 0 đến 255 cho mỗi thành phần đỏ, lục, lam. Giá trị càng cao thì thành phần màu đó càng mạnh.
Các giá trị HSL có nghĩa là gì?
H là tông màu, thường nằm trong khoảng 0 đến 359 độ. S là độ bão hòa và L là độ sáng, mỗi giá trị được biểu thị bằng phần trăm.
Công cụ nhỏ mắt có hoạt động trên mọi trình duyệt không?
Việc hỗ trợ tùy thuộc vào trình duyệt và môi trường. Trong môi trường không hỗ trợ, hãy dùng ô nhập màu hoặc các màu có sẵn.
Tôi có thể chỉnh màu sau khi chọn màu có sẵn không?
Có. Sau khi chọn màu có sẵn, bạn có thể điều chỉnh giá trị HEX, RGB hoặc HSL hoặc độ trong suốt để tinh chỉnh màu.
Nút sao chép sao chép giá trị gì?
Mỗi nút sao chép sẽ sao chép giá trị màu hiện tại ở định dạng đó. Bạn có thể chỉ sao chép đúng giá trị HEX, RGB hoặc HSL mình cần.
Giá trị màu tôi nhập có bị gửi lên máy chủ không?
Không. Toàn bộ quá trình xử lý diễn ra ngay trong trình duyệt của bạn. Giá trị màu và kết quả chuyển đổi không bao giờ được gửi lên máy chủ.
Công cụ liên quan
