Trích xuất bảng màu từ hình ảnh
Dùng để trích các màu nổi bật từ hình ảnh và lấy mã màu để dùng lại trong thiết kế.
Nhóm công cụ · 19 công cụ
Thiết kế
Nhóm công cụ nhỏ cho màu sắc, độ tương phản và các chi tiết giao diện cần kiểm tra nhanh.
Kiểm tra màu và khả năng đọc
Nhóm Thiết kế hỗ trợ chuyển đổi mã màu, kiểm tra tương phản giữa chữ và nền, trích màu và thử nhanh scrollbar để giao diện dễ đọc hơn.
Nên dùng khi
- Chuyển HEX, RGB, HSL khi làm giao diện.
- Kiểm tra độ tương phản chữ và nền.
- Thử nhanh màu sắc hoặc scrollbar trước khi đưa vào CSS.
Danh sách công cụ
Chuyển đổi màu sắc
Dùng để chuyển đổi màu giữa HEX, RGB và HSL, kèm preview màu để kiểm tra nhanh.
Kiểm tra độ tương phản màu
Dùng để kiểm tra tỷ lệ tương phản WCAG giữa màu chữ và màu nền để đánh giá độ dễ đọc.
Tuỳ chỉnh scrollbar
Dùng để tạo CSS scrollbar tuỳ chỉnh và xem preview trực tiếp trước khi đưa vào giao diện.
Tạo gradient CSS
Dùng để tạo linear/radial gradient, xem preview trực quan và copy CSS background cho giao diện.
Tạo box shadow
Dùng để tạo shadow mềm cho card, panel hoặc button với thông số x, y, blur, spread và opacity.
Tạo border radius
Dùng để chỉnh bo góc từng cạnh, xem preview hình dạng và copy CSS border-radius.
Tạo glassmorphism
Dùng để tạo hiệu ứng kính mờ với background trong suốt, blur, border, radius và shadow.
Tạo neumorphism
Dùng để tạo hiệu ứng nổi hoặc lõm nhẹ từ màu nền, khoảng cách shadow và blur.
Tạo font clamp()
Dùng để sinh công thức clamp() cho font-size responsive theo viewport nhỏ và lớn.
Tạo spacing responsive
Dùng để tạo padding, margin hoặc gap responsive bằng clamp() cho layout linh hoạt.
Tạo thang màu
Dùng để sinh thang màu 50-950 từ một màu gốc, phù hợp làm token màu cho UI.
Tạo cặp màu dễ đọc
Dùng để kiểm tra tỷ lệ tương phản và gợi ý màu chữ dễ đọc trên nền đã chọn.
Tạo token màu UI
Dùng để tạo CSS variables cho màu primary, accent, surface và text ở light/dark theme.
Tối ưu SVG
Dùng để dọn SVG bằng cách bỏ XML header, comment, metadata và khoảng trắng dư thừa.
Chuyển SVG sang Data URI
Dùng để chuyển SVG thành data URI để nhúng trong CSS background hoặc HTML.
Tạo thẻ favicon
Dùng để sinh link tag favicon, apple-touch-icon, manifest và theme-color cơ bản.
Tạo CSS Grid
Dùng để tạo CSS Grid responsive với số cột, minmax và gap kèm preview trực quan.
Thử Flexbox
Dùng để thử flex-direction, wrap, justify-content, align-items và gap với preview trực quan.
Câu hỏi thường gặp
Công cụ màu sắc có hỗ trợ kiểm tra accessibility không?
Có. Công cụ kiểm tra tương phản giúp đánh giá nhanh độ đọc của màu chữ và nền.
