Color Format Converter chuyển đổi bất kỳ màu nào giữa HEX, RGB, HSL, HSV, và OKLCH. Chọn màu bằng bảng chọn màu gốc, gõ giá trị hex, dán bất kỳ chuỗi màu CSS nào, hoặc điều chỉnh thanh trượt RGB — mọi định dạng cập nhật trực tiếp và mỗi định dạng có nút Copy riêng.
CSS hiện đại cho bạn cả chục cách viết cùng một màu: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), cùng các biến thể alpha của từng loại. Bạn thường xuyên cần chuyển đổi qua lại giữa chúng — một thiết kế Figma đưa cho bạn một giá trị OKLCH, codebase của bạn dùng HEX, còn các biến theme lại ưu tiên HSL để tinh chỉnh hover. Color Format Converter thực hiện mọi phép chuyển đổi trong một panel duy nhất. Chọn màu từ bảng chọn màu gốc, dán một màu có sẵn ở bất kỳ cú pháp nào, hoặc kéo thanh trượt RGB để tinh chỉnh. Mọi định dạng phổ biến hiển thị đồng thời: HEX (kèm alpha), rgb()/rgba(), hsl()/hsla(), hsv(), và oklch() — cùng với đoạn mã biến CSS và giá trị độ chói (luminance) đã tính toán để tiện tính tương phản. Kênh alpha được hỗ trợ xuyên suốt. Mỗi định dạng có nút Copy riêng để sử dụng chỉ với một cú nhấp, và trình phân tích chấp nhận tên màu gốc cùng mọi thứ mà CSS hỗ trợ.
Hiển thị HEX, RGB/RGBA, HSL/HSLA, HSV, và OKLCH đồng thời — chọn định dạng mà code đích của bạn cần mà không phải chuyển đổi lại nhiều lần.
Chấp nhận HEX (#abc hoặc #aabbcc hoặc #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch(), và tên màu gốc. Dán bất kỳ thứ gì CSS hỗ trợ.
Xử lý định dạng OKLCH mới được dùng trong CSS hiện đại — không gian màu đồng nhất về mặt cảm nhận đang trở thành chuẩn mặc định mới của các hệ thống thiết kế.
Mỗi kết quả đầu ra có nút Copy riêng. Nhấp để lấy đúng định dạng bạn cần cho code, không cần chọn thủ công.
Điều chỉnh thanh trượt Red/Green/Blue/Alpha để tinh chỉnh chi tiết. Mọi định dạng cập nhật theo thời gian thực khi bạn kéo.
Độ trong suốt được xử lý ở mọi định dạng: #RRGGBBAA, rgba(...), hsla(...). Chỉ cần thiết lập một lần, tự động chuyển đổi ở mọi nơi.
Figma đưa cho bạn một giá trị OKLCH hoặc HSL — dán vào, sao chép giá trị HEX tương ứng cho cấu hình Tailwind hoặc biến CSS mà không cần rời trình duyệt.
Kéo thanh trượt để khám phá các sắc độ, ghi lại giá trị OKLCH cho một bảng màu hệ thống thiết kế có hệ thống.
Chuyển một màu thương hiệu sang dạng HSL để bạn có thể dùng hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) cho trạng thái hover.
Trường luminance cho bạn giá trị thô được dùng trong các phép tính tương phản WCAG — hữu ích cho các phép toán a11y.
Dán một oklch(...) từ tệp CSS bạn đang đọc và thấy ngay màu thực tế mà nó tạo ra.
Nhấp vào biểu tượng Color Formats trên dock của DevSuite Pro. Một panel mở ra với bảng chọn màu, ô nhập hex, và thanh trượt RGB.
Dùng bảng chọn màu, gõ giá trị hex, hoặc dán bất kỳ chuỗi màu CSS nào (rgb(...), oklch(...), v.v.). Màu được xem trước ngay lập tức.
Mọi định dạng hiển thị bên dưới: HEX, RGB, HSL, HSV, OKLCH, biến CSS, và độ chói. Tất cả luôn đồng bộ khi bạn điều chỉnh.
Kéo thanh trượt R/G/B/A để tinh chỉnh chi tiết. Rất phù hợp khi cần dò ra một sắc độ cụ thể khớp với thông số thiết kế.
Nhấp Copy trên dòng định dạng bạn muốn — giá trị sẽ được sao chép vào clipboard với đúng cú pháp.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 64 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
