Chuyển đến nội dung

Bộ chuyển đổi màu

Bộ chuyển đổi màu

Bộ chuyển đổi màu giúp đổi HEX, RGB, HSL và CMYK với xem trước trực tiếp, bộ chọn màu và ứng dụng cho CSS hoặc thiết kế.

HEX

#

RGB

HSL

CMYK

Bộ chuyển đổi màu

Bắt đầu nhanh

1
Chọn hoặc nhập: gõ bất kỳ định dạng được hỗ trợ (#1E90FF, rgb(30,144,255), hsl(210,100%,56%)) hoặc dùng bộ chọn màu
2
Tự động chuyển đổi: nhập ở bất kỳ định dạng nào cũng sẽ cập nhật tức thì tất cả định dạng còn lại
3
Sao chép: dùng nút sao chép cạnh mỗi định dạng để lấy chuỗi chuẩn hóa

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 in ấn

chuyển màu trên màn hình sang CMYK như một ước lượng ban đầu (vẫn cần proof đúng quy trình)

Khả năng truy cập

dùng xem trước để cảm nhận nhanh độ tương phản (tỷ lệ chính xác nên dùng công cụ chuyên dụng)

Tình huống bổ sung

bộ chọn màu, chuyển đổi mã màu và bộ chuyển đổi HSL cũng có thể được xử lý trong cùng một luồng để bạn kiểm tra kết quả nhanh hơn trước khi sao chép hoặc xuất ra.

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

Quy tắc nhập: HEX chỉ hỗ trợ 6 chữ số (không có alpha); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100. Không phân biệt hoa/thường.
Xem trước: trên desktop hiển thị xem trước trực tiếp ở bên phải; trên di động chạy chế độ nhẹ hơn, không xem trước.
Bộ chọn màu: nhấn nút bảng màu ở góc trên bên phải mỗi khối để mở bộ chọn.
Chính sách chữ hoa HEX: output được chuẩn hóa thành chữ hoa (ví dụ #1E90FF); input 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 output: nút sao chép trả về chuỗi chuẩn hóa (HEX chữ hoa).

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
Alpha: các định dạng hiện tại không bao gồm alpha; hãy dùng rgba()/hsla() hoặc field 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 chỉ mang tính xấp xỉ: giá trị chỉ là ước lượng; để in ấn nghiêm túc cần profile ICC và quy trình phù hợp
Không có alpha: công cụ này không xử lý độ trong suốt

Bảo mật & quyền riêng tư

Toàn bộ xử lý hoàn tất ngay trong trình duyệt; dữ liệu không rời khỏi thiết bị.

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.