Cách dùng Chuyển HEX sang OKLCH
- Dán mã màu HEX của bạn, ví dụ #2563eb.
- Điều chỉnh độ sáng, độ bão hòa hoặc sắc độ nếu bạn muốn một biến thể khác.
- Sao chép giá trị
oklch()vào CSS của bạn.
Vì sao nên chuyển HEX sang OKLCH?
HEX cho trình duyệt biết cần hiển thị màu nào, nhưng rất khó điều chỉnh bằng tay. OKLCH tách một màu thành độ sáng, độ bão hòa và sắc độ, nên bạn có thể tạo sắc thái tối hơn chỉ bằng cách thay đổi một con số. Các màu có cùng độ sáng cũng trông sáng như nhau, giúp bạn xây dựng bảng màu nhất quán hơn.
Bạn mới làm quen với định dạng này? Hãy đọc cách dùng OKLCH trong CSS, hoặc xem so sánh trong OKLCH so với HSL.
Cũng được tìm dưới tên: hex sang oklch, công cụ chuyển hex sang oklch, oklch từ hex, mã màu hex, chuyển đổi màu css, oklch là gì, màu oklch css.
Các công cụ dùng kèm tốt với Chuyển HEX sang OKLCH
- Chuyển đổi màu OKLCH — Khám phá không gian màu OKLCH đồng đều về mặt thị giác với thanh trượt trực tiếp, xem màu có nằm trong sRGB hay không, và sao chép các giá trị HEX, RGB, HSL dự phòng tương ứng.
- Chuyển OKLCH sang HEX — Dán giá trị oklch() để nhận mã HEX tương ứng, cùng với RGB và HSL.
- Trộn màu — Chọn hai màu và số bước để có các màu chuyển tiếp pha đều nhau, phù hợp cho gradient, viền, biểu đồ và trạng thái hover.
- Tạo bảng màu Tailwind — Dán một màu thương hiệu và nhận thang màu 11 bước (50 đến 950) được cân bằng, tính theo OKLCH, kèm gợi ý độ tương phản và xuất file cho Tailwind v3, v4, CSS và SCSS.
Câu hỏi thường gặp
Việc chuyển đổi có chính xác tuyệt đối không?
Rất gần đúng. Các giá trị được làm tròn để CSS dễ đọc hơn, nên màu có thể lệch đi một lượng rất nhỏ, mắt thường không nhận ra.
Trình duyệt có hỗ trợ OKLCH không?
Có. Tất cả các trình duyệt hiện đại phổ biến đều hỗ trợ. Các trình duyệt rất cũ cần dùng HEX làm phương án dự phòng.
Dữ liệu của tôi có được tải lên không?
Không. Mọi thứ đều chạy ngay trên trình duyệt của bạn.
Tôi có thể cài Chuyển HEX sang OKLCH như một ứng dụng web và dùng khi không có mạng không?
Có. Chuyển HEX sang OKLCH là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.