Chuyển đổi tức thì giữa các định dạng màu HEX, RGB, HSL, HWB, LCH, CMYK và tên màu. Hỗ trợ bộ chọn màu nâng cao và xem trước thời gian thực.
Features
- Hỗ trợ hơn 8 định dạng màu: Chuyển đổi giữa HEX (#RRGGBB), RGB, HSL, HSV, CMYK, LAB, XYZ và tên màu. Mỗi định dạng phù hợp cho các tình huống: thiết kế web, in ấn, đồ họa và nghiên cứu màu sắc.
- Chuyển đổi thời gian thực: Cập nhật đồng thời mọi định dạng màu khi bạn nhập, dán hoặc chọn màu. Hiển thị song song HEX, RGB, HSL, HSV, CMYK kèm ô xem trước giúp theo dõi màu chính xác.
- Bộ chọn màu trực quan: Bộ chọn màu tương tác với thanh trượt hue/saturation/lightness, công cụ eyedropper lấy màu trên màn hình và bảng màu mẫu. Tinh chỉnh màu trực quan và nhận giá trị ở mọi định dạng ngay lập tức.
- Sao chép định dạng nhanh: Sao chép mỗi định dạng chỉ với một lần nhấp, đúng cú pháp cho CSS, công cụ thiết kế và lập trình: HEX cho web (#FFFFFF), RGB cho JavaScript, CMYK cho in ấn.
Usage Guide
- Chọn màu: Dùng bộ chọn màu hoặc nhập giá trị màu bất kỳ.
- Xem định dạng: Các định dạng còn lại sẽ tự động hiển thị đồng bộ.
- Sao chép kết quả: Nhấp nút sao chép để lấy nhanh định dạng mong muốn.
Technical Details
Mô hình và không gian màu
Chuyển đổi xử lý việc biến đổi giữa các mô hình màu: RGB (ánh sáng cộng cho màn hình 0-255 mỗi kênh), HSL (hue 0-360°, saturation/lightness 0-100%), HSV/HSB (mô hình trụ), CMYK (màu trừ cho in ấn), HWB (Hue-Whiteness-Blackness trực quan), LAB (L* độ sáng, a* xanh-đỏ, b* vàng-xanh dương) và XYZ.
Phân tích và xác thực định dạng
Công cụ phân tích nhiều kiểu nhập màu bằng regex. Hỗ trợ: HEX có/không dấu # (#RGB, #RRGGBB, #RRGGBBAA), cú pháp hàm CSS (rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch()), định dạng kế thừa (rgb(255 255 255), hsl(180deg 50% 50%)), CSS Color Level 4 (rgb(100% 50% 0), oklch(), oklab()) và tên màu (không phân biệt hoa thường).
Phối màu và khả năng truy cập
Công cụ tạo bảng màu dựa trên lý thuyết màu sắc: bổ sung (hue +180°), tương đồng (±30°), tam giác (cách 120°), tứ giác/vuông (90°), split-complementary và đơn sắc. Đồng thời tính độ tương phản theo WCAG 2.1 bằng công thức độ chói tương đối để kiểm tra mức AA/AAA.
Frequently Asked Questions
- Công cụ chuyển đổi màu dùng để làm gì?
- Công cụ giúp chuyển đổi giữa các định dạng màu như HEX, RGB, HSL, HWB, LCH, CMYK và tên màu. Nó cung cấp chuyển đổi thời gian thực, bộ chọn màu trực quan và xem trước ngay lập tức, rất hữu ích cho nhà thiết kế web, lập trình UI và nhà thiết kế đồ họa.
- Tôi sử dụng công cụ này như thế nào?
- Bạn có thể chọn màu trực quan bằng bộ chọn màu hoặc nhập trực tiếp giá trị (HEX, RGB, HSL...). Các định dạng khác sẽ tự động cập nhật. Nhấp vào nút sao chép cạnh mỗi định dạng để lấy nhanh vào bộ nhớ tạm.
- Công cụ có miễn phí không?
- Có. Công cụ hoàn toàn miễn phí, không cần đăng ký. Mọi phép chuyển đổi đều thực hiện ngay trên trình duyệt nên dữ liệu của bạn luôn riêng tư và không bị giới hạn số lần sử dụng.
- Điểm nổi bật của công cụ là gì?
- Công cụ hỗ trợ hơn 8 định dạng màu, bao gồm cả LCH và LAB hiện đại. Có chuyển đổi thời gian thực, bộ chọn màu với thanh trượt, bảng màu có sẵn, tạo màu ngẫu nhiên và sao chép một chạm cho từng định dạng. Tất cả đều hoạt động ngoại tuyến trên trình duyệt của bạn.
- Khi nào nên dùng các định dạng màu khác nhau?
- Dùng HEX (#FFFFFF) cho CSS, RGB (rgb(255,255,255)) cho JavaScript và màn hình, HSL để điều chỉnh màu trực quan, CMYK cho in ấn, LAB/LCH cho màu độc lập thiết bị, tên màu (red, blue) cho prototype nhanh. Mỗi định dạng tối ưu cho một tình huống cụ thể.
Related Documentation
- W3C CSS Color Module Level 3 - Đặc tả chính thức cho mô-đun màu trong CSS
- W3C CSS Color Module Level 4 - Đặc tả CSS mới nhất với các không gian màu bổ sung
- ISO/IEC 61966-2-1 - Không gian màu sRGB - Tiêu chuẩn quốc tế định nghĩa không gian màu sRGB
- CIE 1931 Color Space - Định nghĩa khoa học về không gian màu CIE 1931
- MDN - Giá trị màu CSS - Hướng dẫn đầy đủ về cú pháp giá trị màu trong CSS