px/rem/em, contrast WCAG, cỡ chữ responsive, spacing scale, gradient, shadow, color palette — toolkit thiết yếu cho designer và frontend developer.
Nhập 1 màu hex, tạo bảng màu 11 shade (50→950) theo phong cách Tailwind — copy CSS variables, Tailwind config hoặc JSON
Design & UI/UX
Chuyển đổi đơn vị CSS px, rem, em
Design & UI/UX
Tính contrast ratio giữa 2 màu theo WCAG
Design & UI/UX
Tính font-size clamp() cho responsive typography
Design & UI/UX
Tạo thang spacing theo tỷ lệ
Design & UI/UX
Tạo CSS box-shadow nhiều lớp với live preview — điều chỉnh offset, blur, spread, màu/alpha, copy CSS hoặc Tailwind
Design & UI/UX
Tạo CSS gradient (linear, radial, conic) với live preview — thêm color stops, điều chỉnh hướng/vị trí, copy CSS hoặc Tailwind
Design & UI/UX
Tra cứu class Tailwind theo px value, hex màu hoặc typography — tìm token gần nhất, copy class ngay
Design & UI/UX
Tạo bảng màu 5 màu hài hòa ngẫu nhiên — khóa màu yêu thích, regenerate, copy CSS / JSON / Tailwind
Design & UI/UX
Khám phá hàng trăm bảng màu theo chủ đề — warm, cool, pastel, neon, earth, ocean, sunset…
Design & UI/UX
Upload ảnh → tự động trích xuất 5–8 màu chủ đạo bằng canvas sampling — copy hex hoặc xuất palette
Design & UI/UX
Kiểm tra độ tương phản màu theo WCAG 2.1 trên mock UI thực tế — button, card, badge, text block
Design & UI/UX
Preview bảng màu trực tiếp trên các component UI thực tế — header, card, button, form, badge
Design & UI/UX
Nhập màu hex/rgb/hsl → xem đầy đủ thông tin: tên màu, bổ sung, bộ ba, tứ giác, biến thể tối/sáng
Design & UI/UX
Duyệt toàn bộ bảng màu Tailwind v3, tạo custom palette và preview trực tiếp trên UI component
Design & UI/UX
Nhập từ khóa (cảm xúc, thương hiệu, mùa sắc…) → gợi ý bảng màu phù hợp với lý giải
Design & UI/UX
Phân tích undertone, độ sáng da, tóc, mắt và độ tương phản để gợi ý nhóm màu cá nhân. Dùng tự do, đăng nhập khi lưu hồ sơ.
Không đăng ký, không cài app — chọn công cụ bên trên và bắt đầu.