Chuyển đổi mã màu — HEX, RGB, HSL, OKLCH & CMYK

Bộ chuyển đổi màu là gì?

Bộ chuyển đổi màu giúp bạn đổi một màu sang các cách viết khác nhau mà CSS và công cụ thiết kế sử dụng. Cùng một màu chàm có thể viết là #4f46e5, rgb(79 70 229), hsl(243.4 75.4% 58.6%) hoặc oklch(51.06% 0.2301 276.97) — tất cả đều mô tả cùng một màu sRGB. Nhà thiết kế bàn giao mã HEX từ Figma, thư viện component lại cần kênh HSL, còn hệ thống thiết kế hiện đại có thể viết bằng OKLCH, vì vậy việc chuyển đổi nhanh và chính xác là công việc thường ngày.

Các định dạng được hỗ trợ

Vì sao nên học OKLCH

Trong HSL, màu vàng ở “độ sáng 50%” trông sáng hơn hẳn màu xanh dương ở 50%, vì HSL chỉ là một phép biến đổi hình học đơn giản từ RGB. OKLCH được xây dựng trên mô hình OKLab, được thiết kế để các bước bằng nhau ở L (độ sáng) trông cũng bằng nhau trong mắt người; C là chroma (độ rực màu) và H là góc sắc độ. Nhờ vậy, OKLCH rất lý tưởng để tạo các sắc thái nhất quán, trạng thái hover và cặp màu dễ đọc. OKLCH cũng có thể mô tả màu ngoài sRGB (ví dụ Display P3); khi bạn nhập màu như vậy, công cụ này sẽ đưa nó về sRGB và đánh dấu để bạn biết.

Bảng màu 50–950 được tạo như thế nào

Bảng màu giữ nguyên sắc độ của màu bạn chọn và làm việc trong OKLCH: mỗi bậc có một mục tiêu độ sáng cố định (từ rất sáng ở 50 đến rất tối ở 950) và một phần chroma của màu gốc, được giảm khi cần để mọi ô màu vẫn nằm trong sRGB. Khi bật Giữ đúng màu của tôi, màu bạn nhập sẽ thay thế bậc có độ sáng gần nhất, nhờ đó màu thương hiệu xuất hiện nguyên vẹn trong thang màu. Cần kiểm tra độ tương phản của các cặp màu trong bảng để đảm bảo khả năng tiếp cận? Hãy dùng Công cụ kiểm tra độ tương phản.

Lưu ý về CMYK

Việc chuyển từ màn hình sang in ấn phụ thuộc vào mực, giấy và hồ sơ ICC mà máy in của bạn sử dụng. Các giá trị CMYK ở đây dùng công thức chuẩn chưa hiệu chỉnh (K = 1 − max(R, G, B)), phù hợp để làm mẫu thử nhưng không đủ cho các ấn phẩm yêu cầu màu thương hiệu chính xác — hãy nhờ đơn vị in chuyển đổi theo hồ sơ màu.

Dùng màu trong Webflow

Dán giá trị HEX vào bộ chọn màu của Webflow hoặc vào một Color variable (bảng Variables). Tạo một biến cho mỗi bậc màu — ví dụ Brand 50 … Brand 950 — sẽ cho bạn cấu trúc token giống với đầu ra biến CSS, nhờ đó các class có thể tham chiếu đến các tông màu thay vì giá trị cố định.

Cũng được tìm dưới tên: chuyển đổi hex sang rgb, đổi mã màu, hex sang hsl, oklch converter, bảng mã màu, chọn màu online, cmyk, hwb.

Các công cụ dùng kèm tốt với Chuyển đổi mã màu

• Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
• Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
• Chuyển đổi cơ số — Nhập một số ở bất kỳ cơ số nào và xem ngay kết quả ở tất cả các cơ số còn lại.
• Ảnh sang Base64 — Chuyển PNG, JPEG, SVG, WebP hoặc GIF thành Base64 data URI với mã CSS và HTML sẵn sàng sao chép, hoặc dán chuỗi Base64 để xem trước và tải ảnh về.