Trình chuyển đổi màu
Chuyển đổi màu giữa HEX, RGB và HSL với bản xem trước trực tiếp.
Trình chuyển đổi màu — Nhập một màu theo bất kỳ ký hiệu nào — HEX, RGB hoặc HSL — và các định dạng khác sẽ cập nhật ngay lập tức cùng với một ô màu trực tiếp lớn. Có sẵn bộ chọn màu gốc và mỗi giá trị đều có nút sao chép một lần nhấp. Hoàn hảo để khớp màu thương hiệu giữa CSS và các công cụ thiết kế.
Trình chuyển đổi màu là gì?
Color Converter là một trình chuyển đổi màu HEX sang RGB sang HSL trực tuyến miễn phí dành cho nhà phát triển và nhà thiết kế. Nhập một màu theo bất kỳ ký hiệu nào — HEX (#rrggbb hoặc dạng viết tắt #rgb), RGB (như "255, 100, 0" hoặc "rgb(255 100 0)") hoặc HSL (như "220, 91%, 64%") — và mọi định dạng khác sẽ cập nhật ngay lập tức bên cạnh một ô màu xem trước trực tiếp lớn. Bộ chọn màu gốc cho phép bạn chọn một sắc thái một cách trực quan, và mỗi giá trị đều có nút sao chép một lần nhấp, nên rất tiện lợi mỗi khi bạn cần khớp màu thương hiệu hoặc chuyển đổi các giá trị màu CSS giữa mã và công cụ thiết kế.
Cách sử dụng Trình chuyển đổi màu
- Nhập hoặc dán một màu vào ô HEX, RGB hoặc HSL, hoặc nhấp vào ô màu của bộ chọn màu để chọn một sắc thái một cách trực quan.
- Quan sát hai ô còn lại và ô màu xem trước lớn cập nhật ngay lập tức để phản ánh cùng một màu.
- Đọc các ô tóm tắt R / G / B, H / S / L và HEX bên dưới để biết giá trị của từng kênh đã chuyển đổi.
- Nhấp vào nút sao chép bên cạnh một ô để sao chép giá trị của nó: HEX sao chép chuỗi #rrggbb, trong khi RGB và HSL sao chép các chuỗi rgb(...) và hsl(...) sẵn sàng để dùng.
- Nếu một giá trị bị từ chối, hãy kiểm tra lỗi nội tuyến và nhập lại theo định dạng được hiển thị trong gợi ý của ô.
Ví dụ
HEX sang RGB và HSL
Đầu vào
#ff6400
Đầu ra
RGB 255, 100, 0 / HSL 24, 100%, 50%
Mở rộng dạng viết tắt #rgb
Đầu vào
#fff
Đầu ra
HEX #ffffff / RGB 255, 255, 255 / HSL 0, 0%, 100%
Chọn màu một cách trực quan
Nhấp vào ô màu để mở bộ chọn màu gốc, kéo để chọn bất kỳ sắc thái nào, và các ô HEX, RGB và HSL sẽ tự động điền các giá trị tương ứng.
Câu hỏi thường gặp
- Trình chuyển đổi này hỗ trợ những định dạng màu nào?
- Nó chuyển đổi giữa ba định dạng: HEX (#rrggbb đầy đủ và dạng viết tắt #rgb), RGB (0-255 mỗi kênh) và HSL (tông màu tính bằng độ, độ bão hòa và độ sáng tính bằng phần trăm). Hiện tại nó không xử lý alpha/độ mờ, HSV, CMYK hoặc các tên màu CSS.
- Tại sao màu của tôi hiển thị lỗi "Invalid HEX color", "Invalid RGB color" hoặc "Invalid HSL color"?
- Giá trị không khớp với định dạng mong đợi hoặc nằm ngoài phạm vi. HEX phải có 3 hoặc 6 chữ số thập lục phân, các kênh RGB phải từ 0-255, và độ bão hòa cùng độ sáng HSL phải từ 0-100%. Hãy nhập lại theo gợi ý bên dưới ô đó.
- Tôi có thể dán một giá trị CSS đầy đủ như rgb(255 100 0) không?
- Có. Các ô RGB và HSL chỉ lấy các con số ra khỏi văn bản, nên cả "255, 100, 0" và "rgb(255 100 0)" đều hoạt động, và các nút sao chép xuất ra các chuỗi rgb(...) và hsl(...) sẵn sàng để dùng.
- Các giá trị đã chuyển đổi có được làm tròn không?
- Có. Các kênh RGB và giá trị HSL được làm tròn thành số nguyên, nên một lần chuyển đổi khứ hồi có thể chênh lệch một đơn vị so với bản gốc. Đầu ra HEX luôn có hai chữ số mỗi kênh (#rrggbb).
- Dữ liệu màu của tôi có được tải lên đâu đó không?
- Không. Toàn bộ quá trình chuyển đổi chạy cục bộ trong trình duyệt của bạn bằng JavaScript — không có gì được gửi đến máy chủ và không có giá trị màu nào được tải lên, nên nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang được tải một lần.
Công cụ liên quan
Mã hóa / giải mã Base32 / Base58
Mã hóa văn bản thành Base32 (RFC 4648) hoặc Base58 (bảng chữ cái Bitcoin) và giải mã cả hai trở lại văn bản, hoàn toàn an toàn với UTF-8 và toàn bộ trong trình duyệt của bạn.
Mã hóa / Giải mã Base64
Mã hóa văn bản thành Base64 hoặc giải mã Base64 trở lại văn bản (an toàn UTF-8).
Công cụ chuyển đổi kiểu chữ và đếm
Thay đổi kiểu chữ hoa/thường của văn bản và đếm ký tự, từ và dòng.
Trình định dạng và rút gọn mã
Làm đẹp hoặc rút gọn HTML, CSS và JavaScript ngay lập tức trong trình duyệt của bạn, với thụt lề 2 dấu cách, 4 dấu cách hoặc tab và nén JavaScript bằng Terser.