🎨

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.

Tất cả công cụ Browser-only

Chọn màu hoặc nhập HEX

R (0-255)200

G (0-255)16

B (0-255)46

Màu mẫu

#C8102E

HEX #C8102E

RGB rgb(200, 16, 46)

HSL hsl(352, 85%, 42%)

HSLA hsla(352, 85%, 42%, 1)

Tailwind gần nhất 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ụ →

MỚI

✨

CSS Animation Builder

Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.

MỚI

🪞

CSS Filter Builder

Visual builder cho CSS filter — blur, brightness, sepia, hue-rotate, drop-shadow. 8 preset (Vintage, Polaroid, Noir…).

MỚI

🎨

Color Palette Generator

Sinh bảng màu hài hoà từ màu chính (HSL theory). 6 hệ: Monochromatic, Analogous, Complementary, Triadic… + 10 shades.

MỚI

🎚

CSS Grid Layout Generator

Visual builder cho CSS Grid. 6 preset (Holy Grail, Magazine, Auto-fit…). Live preview + copy CSS.