Cách Chuyển đổi Màu Giữa HEX, RGB và HSL
Trả lời nhanh
Để chuyển đổi màu: mở Color Converter, nhập màu trong bất kỳ định dạng (HEX, RGB, HSL) và công cụ hiển thị ngay tương đương trong tất cả định dạng khác. Tất cả chuyển đổi xảy ra cục bộ —không dữ liệu tải lên.
Giới thiệu
Màu có thể được biểu diễn trong nhiều định dạng: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) và khác. Công cụ và ngữ cảnh khác nhau dùng định dạng khác nhau —CSS thường HEX hoặc RGB, design tool HSL, và API bất kỳ. Chuyển đổi giữa định dạng cho phép dùng màu từ một hệ thống trong ngữ cảnh yêu cầu định dạng khác.
Từng bước một
-
Mở công cụ Chuyển đổi màu
Đi tới trang công cụ Color Converter. Công cụ này hỗ trợ các định dạng HEX, RGB, HSL, HSV và CMYK.
-
Nhập màu của bạn
Nhập hoặc dán giá trị màu ở bất kỳ định dạng được hỗ trợ nào. Ví dụ: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. Công cụ tự động phát hiện định dạng đầu vào.
-
Xem lại tất cả các định dạng tương đương
Công cụ hiển thị màu đồng thời ở tất cả các định dạng: HEX, RGB, HSL, HSV và CMYK. Nó cũng hiển thị mẫu xem trước màu để bạn có thể xác minh chuyển đổi là chính xác.
-
Sao chép định dạng bạn cần
Nhấp vào nút Sao chép bên cạnh bất kỳ định dạng nào để sao chép giá trị đó vào khay nhớ tạm của bạn. Sử dụng nó trong CSS, công cụ thiết kế hoặc ứng dụng của bạn.
-
Điều chỉnh màu sắc (tùy chọn)
Một số công cụ cho phép bạn điều chỉnh màu bằng thanh trượt (đối với HSL: màu sắc, độ bão hòa, độ sáng) và xem tất cả các định dạng cập nhật theo thời gian thực. Điều này rất hữu ích cho việc tìm kiếm màu sắc hoặc sắc thái liên quan.
Ví dụ
HEX tới RGB và HSL
đầu vào: #ff6600
đầu ra: RGB: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)
RGB tới HEX
đầu vào: rgb(0, 128, 255)
đầu ra: HEX: #0080ff
HSL: hsl(210, 100%, 50%)
HSL tới HEX
đầu vào: hsl(120, 100%, 50%)
đầu ra: HEX: #00ff00
RGB: rgb(0, 255, 0)
Các vấn đề thường gặp
- HEX có vs không có # —một số công cụ yêu cầu tiền tố #, một số khác thì không. Công cụ chuyển đổi của chúng tôi chấp nhận cả hai.
- 3 chữ số và 6 chữ số HEX —#f60 là viết tắt của #ff6600. Cả hai đều hợp lệ; bộ chuyển đổi chuẩn hóa thành 6 chữ số.
- HSL phạm vi màu sắc —màu sắc là 0-360 độ (một vòng tròn). 0 và 360 đều có màu đỏ. Các giá trị trên 360 bao quanh.
- Sự khác biệt về không gian màu —HEX, RGB và HSL đều là sRGB. CMYK là một không gian màu (bản in) khác và chuyển đổi chỉ mang tính chất gần đúng.
Mẹo
- Sử dụng HSL để tạo các biến thể màu sắc —điều chỉnh màu sắc, độ bão hòa hoặc độ sáng trực quan hơn RGB.
- Sử dụng HEX cho CSS —đây là định dạng nhỏ gọn và được hỗ trợ rộng rãi nhất trong biểu định kiểu.
- Sử dụng RGB khi bạn cần đặt độ trong suốt alpha —rgb(255, 102, 0, 0.5) cho độ mờ 50% (hoặc sử dụng HEX 8 chữ số: #ff660080).
- Sử dụng Trình chuyển đổi màu của chúng tôi để chuyển đổi tức thời, riêng tư giữa tất cả các định dạng màu.