Color Picker — chọn màu HEX / RGB / HSL
Picker màu trực quan — copy HEX, RGB, HSL, HSLA. Slider RGB realtime, 12 màu mẫu, gợi ý tên màu Tailwind gần nhất. Hữu ích cho designer + dev.
Màu mẫu
#C8102E rgb(200, 16, 46) hsl(352, 85%, 42%) hsla(352, 85%, 42%, 1) red-600 Tính năng
- 3 cách chọn màu: native color picker, gõ HEX trực tiếp, slider RGB từng kênh.
- 5 format output: HEX, RGB, HSL, HSLA, tên Tailwind gần nhất.
- Preview lớn: text tự đổi đen/trắng theo luminance để luôn đọc được.
- 12 màu mẫu: brand topdev + Tailwind 500-shade phổ biến.
Khi nào dùng HEX vs RGB vs HSL?
- HEX: ngắn gọn, chuẩn web. Dùng cho CSS, design tool.
- RGB: dễ điều chỉnh từng kênh đỏ/xanh. Cũng dùng được trong CSS với
rgb(). - HSL: tốt nhất khi cần biến đổi màu theo độ sáng / độ bão hoà. Vd: tạo dark mode tự động bằng cách giảm L (lightness).
- Tailwind class: nếu dự án đang dùng Tailwind, nên ưu tiên class chuẩn hơn arbitrary value.
Phù hợp với ai
Frontend dev, UI/UX designer, ai cần prototype visual nhanh hoặc sinh CSS chuẩn copy-paste cho dự án Tailwind/React/Vue.
Câu hỏi thường gặp
CSS sinh ra có dùng được với Tailwind không?
Có. Output là CSS chuẩn vanilla, paste vào file .css bất kỳ. Nếu dự án dùng Tailwind, có thể đặt vào layer @utilities hoặc theme override.
Có hỗ trợ trình duyệt cũ không?
Output dùng cú pháp CSS modern (custom properties, grid, gap). Hoạt động tốt trên Chrome/Firefox/Safari 2020+. IE11 KHÔNG được hỗ trợ.
Công cụ liên quan
Xem tất cả công cụ →Tailwind ↔ CSS Converter
Convert giữa Tailwind utility classes và CSS thuần. ~200 utility (spacing, color, flex, grid…). Hỗ trợ migrate dự án.
MỚISVG → React/JSX
Convert SVG sang React component. camelCase attribute, currentColor, TypeScript types, size/color props.
MỚICSS Animation Builder
Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.
MỚICSS Filter Builder
Visual builder cho CSS filter — blur, brightness, sepia, hue-rotate, drop-shadow. 8 preset (Vintage, Polaroid, Noir…).