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.

Đang tải công cụ…

Trình chuyển đổi màuNhậ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

  1. 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.
  2. 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.
  3. Đọ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.
  4. 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.
  5. 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