Chuyển đến nội dung

Bộ chuyển đổi màu

Chuyển đổi cục bộ một màu giữa HEX 6 chữ số (#RRGGBB), RGB, HSL và CMYK bằng bộ chọn màu, màu ngẫu nhiên, bản xem trước trực tiếp, điều khiển kênh, giá trị CSS HEX/RGB/HSL có thể sao chép và ký hiệu CMYK để tham khảo.

HEX

#

RGB

HSL

CMYK

Bộ chuyển đổi màu

Bắt đầu nhanh

1
Nhập HEX 6 chữ số hoặc kênh RGB/HSL/CMYK
2
Dùng bộ chọn hoặc màu ngẫu nhiên, rồi xem giá trị đã đồng bộ

Tình huống sử dụng phổ biến

Bàn giao thiết kế

chuyển mã HEX từ file thiết kế sang CSS RGB/HSL cho lập trình viên

Sổ tay thiết kế

thống nhất định dạng màu và cách viết trên toàn bộ thư viện component

Tham chiếu bản in

chuyển đổi màu màn hình thành CMYK làm ước tính đầu tiên, sau đó xác nhận bằng quá trình kiểm lỗi và quy trình in

Khả năng truy cập

chỉ sử dụng bản xem trước để kiểm tra trực quan nhanh chóng; sử dụng công cụ tương phản chuyên dụng để có tỷ lệ chính xác

Tham số chuyển đổi & hiển thị

Quy tắc nhập: HEX chỉ hỗ trợ 6 chữ số (#RRGGBB, không hỗ trợ #RGB, #RGBA, #RRGGBBAA hoặc alpha); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100. Đầu vào không phân biệt chữ hoa chữ thường
Xem trước: trên máy tính để bàn hiển thị bản xem trước trực tiếp ở bên phải; trên di động chạy chế độ nhẹ hơn, không có bản xem trước.
Bộ chọn màu: dùng bộ chọn màu trong thẻ HEX.
Quy tắc viết hoa HEX: đầu ra được chuẩn hóa thành chữ hoa (ví dụ #1E90FF); đầu vào không phân biệt hoa/thường; không có tùy chọn đổi kiểu chữ.
Tinh chỉnh: kéo các chữ cái kênh sang trái/phải (Shift×10, Alt÷0,1).
Sao chép đầu ra: nút sao chép trả về giá trị CSS HEX, RGB và HSL đã chuẩn hóa (HEX viết hoa), hoặc ký hiệu CMYK tham khảo cmyk(...)

Gợi ý sử dụng

Độ chính xác: quản lý màu của thiết bị/màn hình khác nhau; giá trị eyedropper có thể chênh nhẹ giữa các ứng dụng
Độ trong suốt: các định dạng hiện tại không bao gồm kênh alpha; hãy dùng rgba()/hsla() hoặc một giá trị alpha riêng
Không gian màu: web mặc định dùng sRGB; với luồng P3/Display‑P3 cần kiểm tra cẩn thận
Nhất quán trong nhóm: thống nhất một định dạng chuẩn trong CSS (ví dụ HSL)

Giới hạn & khả năng tương thích

Sai khác thiết bị: màn hình/trình duyệt/hệ điều hành khác nhau sẽ quản lý màu khác nhau; kết quả hiển thị có thể lệch
CMYK mang tính gần đúng: các giá trị phụ thuộc vào cấu hình ICC, giấy, mực, thiết bị và quá trình kiểm chứng; sử dụng giá trị này làm tài liệu tham khảo, không phải giá trị sẵn sàng để in
Không có alpha: công cụ này không xử lý các giá trị trong suốt, rgba(), hsla(), #RGBA hoặc #RRGGBBAA.
Tập hợp con màu CSS: các màu được đặt tên, trong suốt, currentColor, HWB, HSV/HSB, Lab, LCH, OKLab, OKLCH, Display-P3, device-cmyk(), các màu tương đối, color-mix() và contrast-color() nằm ngoài công cụ này
Không có công cụ hình ảnh hoặc bảng màu: trang này không thực hiện lấy mẫu hình ảnh, công cụ lấy mắt màn hình, tạo bảng màu, tạo độ dốc, kiểm tra tỷ lệ tương phản, xuất biến CSS hoặc xuất mã thông báo thiết kế

Quyền riêng tư & bảo mật

Quá trình xử lý diễn ra trong trình duyệt. Màu hiện tại có thể được giữ trong phiên trình duyệt hiện tại. Nếu bạn lưu không gian làm việc hoặc bật WebDAV, màu hiện tại có thể được lưu hay đồng bộ như một phần của không gian đó. Đầu ra phái sinh, lịch sử hoàn tác và lỗi tạm thời không được lưu hoặc đồng bộ dưới dạng dữ liệu riêng, và công cụ không giữ danh sách màu gần đây. Trang này không đọc hình ảnh, không lấy mẫu màn hình, không truy xuất URL và không gửi màu để chuyển đổi trên máy chủ. Trên thiết bị dùng chung, hãy xóa màu và dữ liệu trang khi cần.

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

5

Tiếp tục bước tiếp theo với các công cụ liên quan này.

Toàn bộ quá trình xử lý của công cụ diễn ra cục bộ trong trình duyệt của bạn.