Về Bộ chuyển đổi màu

Bộ chuyển đổi màu chuyển giá trị màu giữa HEX, RGB, HSL và HSV cho CSS phía giao diện, bàn giao thiết kế và dọn token giao diện.

Nhập #4f46e5, rgb(...) hoặc hsl(...) để chuẩn hóa thành formats có thể copy.

Cách dùng Bộ chuyển đổi màu

Dán giá trị HEX, RGB, RGBA, HSL hoặc HSLA.
Convert và kiểm tra đầu ra HEX, RGB, HSL, HSV.
Dùng swatch preview xác nhận màu rồi copy một format hoặc tất cả.

Khi nào nên dùng

Chuyển design HEX giá trị sang CSS rgb() hoặc hsl().
Điều chỉnh lightness và saturation trong HSL khi thử hover states.
Chuẩn hóa giá trị token màu khi dọn theme.

Định dạng màu và lưu ý

HEX, RGB, HSL và HSV mô tả cùng một màu trong các hệ tọa độ khác nhau. Bộ chuyển đổi giữ nguyên màu RGB; kênh alpha trong đầu vào RGBA hoặc HSLA được chấp nhận nhưng không được giữ lại trong đầu ra.

HEX 3 ký tự được mở rộng thành HEX 6 ký tự.
RGB channels phải nằm trong 0 đến 255.
HSL dùng percentages cho S/L và hue xoay 0 đến 360 degrees.
HSV phổ biến trong picker, HSL thường dễ chỉnh CSS theme hơn.

Câu hỏi thường gặp về Bộ đổi màu

Có hỗ trợ HEX to RGB và RGB to HEX không?: Có. HEX đầu vào tạo RGB/HSL/HSV, và RGB đầu vào tạo HEX/HSL/HSV.
Vì sao alpha không có trong kết quả?: Công cụ tập trung opaque color conversion, nên RGBA/HSLA alpha bị bỏ qua.
Colors có bị upload không?: Không. Parsing, conversion, preview và copy chạy cục bộ trong trình duyệt.

Color conversion và readability

Đổi format không đảm bảo contrast. Trước khi dùng cho văn bản, buttons hoặc links, hãy kiểm tra trên background thật với WCAG contrast, brand fit và UI states.

Cách chọn CSS color format

Cùng một màu có thể viết bằng HEX, RGB, HSL hoặc HSV, nhưng mỗi format phù hợp với một kiểu maintenance khác nhau.

Dùng HEX cho bàn giao thiết kế gọn và token giao diện ổn định.
Dùng CSS rgb() hoặc hsl() khi cần độ trong suốt, biến hoặc cách kết hợp động.
Dùng HSL khi tạo hover, active, biến thể sáng hơn hoặc tối hơn vì hue, saturation và lightness dễ kiểm soát hơn RGB thô.

Accessibility checks trước khi dùng màu

Color conversion giữ giá trị tương đương, nhưng không chứng minh readability, state clarity hoặc contrast compliance.

Kiểm tra văn bản nội dung và chữ trên nút trên background thật bằng WCAG contrast rules.
Đừng truyền đạt error, success hoặc disabled state chỉ bằng màu; thêm văn bản, icons hoặc thay đổi hình dạng.
Khi dùng brand colors cho links hoặc focus rings, kiểm tra cả hover, active, disabled và selected states.