Chuyển đổi màu sắc (Hex, RGB, HSL)
Xem trước màu
#6366f1
Hướng dẫn sử dụng
Color Converter là công cụ trực tuyến để chuyển đổi giá trị màu giữa các định dạng HEX, RGB, HSL, HSV và CMYK — với tất cả quá trình xử lý chạy cục bộ trong trình duyệt. Chuyển đổi định dạng màu là nhiệm vụ hàng ngày cho các nhà thiết kế và nhà phát triển front-end: các công cụ thiết kế như Figma xuất mã HEX; CSS sử dụng cả HEX và RGB/HSL; quy trình làm việc in ấn yêu cầu giá trị CMYK; thư viện xử lý hình ảnh có thể sử dụng HSV hoặc float RGB được chuẩn hóa; các công cụ kiểm tra khả năng truy cập sử dụng giá trị sRGB để tính toán độ tương phản. Chuyển đổi thủ công giữa các định dạng này bằng công thức rất tẻ nhạt và dễ mắc lỗi. Công cụ này chấp nhận bất kỳ giá trị màu hợp lệ nào và ngay lập tức hiển thị các giá trị tương đương trong tất cả các định dạng được hỗ trợ. Nhập mã HEX, dán bộ ba RGB, nhập giá trị HSL hoặc chọn màu từ bộ chọn màu gốc — tất cả biểu diễn cập nhật theo thời gian thực. Mẫu màu lớn cung cấp xác nhận trực quan ngay lập tức. Bộ chuyển đổi xử lý đúng toàn bộ dải màu sRGB. Bạn cũng có thể nhập tên màu CSS (như "rebeccapurple", "tomato") để xem tất cả các giá trị số tương đương.
- Nhập giá trị màu — Gõ hoặc dán bất kỳ giá trị màu nào vào trường nhập: mã HEX (#6366f1 hoặc #fff), giá trị RGB (rgb(99, 102, 241)), giá trị HSL (hsl(239, 84%, 67%)) hoặc tên màu CSS. Bộ chuyển đổi tự động phát hiện định dạng.
- Sử dụng bộ chọn màu — Nhấp vào mẫu màu hoặc nút bộ chọn để mở bộ chọn màu gốc của trình duyệt. Chọn trực quan bất kỳ màu nào và tất cả giá trị định dạng được cập nhật ngay lập tức.
- Xem tất cả tương đương định dạng — Công cụ hiển thị màu được chọn đồng thời trong HEX, RGB (0–255), RGB (0–1 chuẩn hóa), HSL (độ, phần trăm), HSV và CMYK. Tất cả giá trị cập nhật cùng nhau mỗi khi bạn thay đổi bất kỳ đầu vào nào.
- Điều chỉnh các kênh riêng lẻ — Tinh chỉnh màu bằng cách sửa đổi các giá trị kênh riêng lẻ — ví dụ, chỉ thay đổi kênh alpha trong RGBA, hoặc điều chỉnh hue trong HSL để có biến thể ấm hơn hoặc mát hơn của cùng một màu.
- Sao chép bất kỳ định dạng nào — Nhấp nút "Sao chép" bên cạnh bất kỳ hàng định dạng nào để sao chép giá trị cụ thể đó vào clipboard. Ví dụ, sao chép mã HEX cho CSS, giá trị RGB cho công cụ thiết kế, hoặc giá trị CMYK cho thông số in ấn.
- Xác minh qua mẫu — Mẫu xem trước màu lớn luôn hiển thị màu thực sự được hiển thị. Sử dụng nó để xác nhận trực quan rằng các giá trị đã chuyển đổi tương ứng với màu mong đợi trước khi sao chép.
Câu hỏi thường gặp
Công cụ này hỗ trợ những định dạng màu nào?
Công cụ chuyển đổi giữa ba định dạng màu CSS phổ biến nhất: HEX (#RRGGBB), RGB (rgb(r, g, b) với giá trị 0–255) và HSL (hsl(h, s%, l%) với góc 0–360° và độ bão hòa/độ sáng 0–100%). Cũng chấp nhận tên màu CSS (như "tomato" hay "deepskyblue") làm đầu vào.
Sự khác biệt giữa RGB và HSL là gì?
RGB mô tả màu sắc qua cường độ ánh sáng đỏ, xanh lá và xanh lam (mỗi loại 0–255). HSL mô tả màu sắc qua sắc độ (vị trí trên bánh xe màu, 0–360°), độ bão hòa (độ rực, 0–100%) và độ sáng (độ tươi sáng, 0–100%). HSL thường trực quan hơn với nhà thiết kế vì điều chỉnh độ sáng hay độ bão hòa đơn giản hơn.
Quá trình chuyển đổi màu có diễn ra trên máy chủ không?
Không. Tất cả logic chuyển đổi diễn ra trong trình duyệt thông qua các phép tính màu JavaScript thuần — không có dữ liệu nào được gửi đến máy chủ.
Tôi có thể sử dụng công cụ này ngoại tuyến không?
2Kit là một PWA. Sau lần truy cập đầu tiên, công cụ được lưu vào bộ nhớ đệm và hoạt động hoàn toàn ngoại tuyến.
Tại sao tôi cần chuyển đổi giữa các định dạng màu?
Các công cụ và quy trình làm việc khác nhau sử dụng định dạng màu khác nhau. Công cụ thiết kế thường xuất ra HEX, trong khi các hoạt cảnh CSS và hệ thống theme có thể dùng HSL để thao tác lập trình dễ hơn. Công cụ này giúp bạn nhanh chóng dịch giữa các định dạng mà không cần tính nhẩm.
Triển khai kỹ thuật
Tất cả quá trình xử lý diễn ra hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào được gửi đến máy chủ. Công cụ này hoạt động hoàn toàn ngoại tuyến như một Ứng dụng Web Lũy tiến (PWA): sau lần truy cập đầu tiên, tất cả trang và tài nguyên được Service Worker lưu vào bộ nhớ đệm và vẫn khả dụng khi không có kết nối internet. Dữ liệu đầu vào của bạn không bao giờ rời khỏi thiết bị, giúp an toàn cho nội dung nhạy cảm như khóa API, mật khẩu, cấu hình riêng tư và tài liệu bí mật.