Lấy hex từ một bảng màu design và cần RGB hoặc HSL tương đương cho gradient. Chuyển sang OKLCH để có không gian màu đồng đều theo nhận thức cho ngữ nghĩa "đậm hơn / nhạt hơn". Lấy mẫu màu từ một ảnh chụp màn hình và chuẩn hóa thành định dạng dự án của bạn.

Chuyển đổi Màu

Chuyển bất kỳ màu nào giữa hex, RGB, HSL và OKLCH. Xem trước trực tiếp, sao chép một-cú-click.

Hex

RGB

HSL

OKLCH

Picker

Kết quả

Tạo bởi JXXR1 · ♥ Tài trợ · ☕ Mời tôi một ly cà phê

Công cụ này để làm gì?

Cùng một màu có thể được viết theo bốn hoặc nhiều cách trong CSS: hex (#3498db), RGB (rgb(52 152 219)), HSL (hsl(204 70% 53%)) và OKLCH (oklch(67% 0.13 240)). Công cụ này dịch giữa các định dạng và hiển thị xem trước trực tiếp để bạn có thể chỉnh và sao chép vào CSS của mình.

Khi nào nên dùng

Lấy hex từ một bảng màu design và cần RGB hoặc HSL tương đương cho gradient.
Chuyển sang OKLCH để có không gian màu đồng đều theo nhận thức cho ngữ nghĩa "đậm hơn / nhạt hơn".
Lấy mẫu màu từ một ảnh chụp màn hình và chuẩn hóa thành định dạng dự án của bạn.

Lưu ý thường gặp

HSL không phải là HSV/HSB. CSS dùng HSL; nhiều tool design dùng HSV. Giá trị saturation và lightness/value khác nhau giữa các không gian.
Hex 8 chữ số là RGBA. #3498dbcc là #3498db với alpha 80%. Hai chữ số cuối là alpha tính theo hex (00–FF).
OKLCH có gamut rộng hơn sRGB. Một số giá trị OKLCH không có hex tương đương — chúng nằm ngoài gamut. Tool sẽ kẹp hoặc cảnh báo.
Round-trip mất chính xác. Chuyển hex → HSL → hex có thể đẩy giá trị đi một bit do làm tròn. Để giữ chính xác, giữ ở một định dạng làm canonical.