∑

Tailwind Colors

Duyệt bảng màu Tailwind v3 đầy đủ — click để copy hex/class, tạo custom palette và preview trên UI

50
100
200
300
400
500
600
700
800
900
950
slate
50
100
200
300
400
500
600
700
800
900
950
gray
50
100
200
300
400
500
600
700
800
900
950
zinc
50
100
200
300
400
500
600
700
800
900
950
neutral
50
100
200
300
400
500
600
700
800
900
950
stone
50
100
200
300
400
500
600
700
800
900
950
red
50
100
200
300
400
500
600
700
800
900
950
orange
50
100
200
300
400
500
600
700
800
900
950
amber
50
100
200
300
400
500
600
700
800
900
950
yellow
50
100
200
300
400
500
600
700
800
900
950
lime
50
100
200
300
400
500
600
700
800
900
950
green
50
100
200
300
400
500
600
700
800
900
950
emerald
50
100
200
300
400
500
600
700
800
900
950
teal
50
100
200
300
400
500
600
700
800
900
950
cyan
50
100
200
300
400
500
600
700
800
900
950
sky
50
100
200
300
400
500
600
700
800
900
950
blue
50
100
200
300
400
500
600
700
800
900
950
indigo
50
100
200
300
400
500
600
700
800
900
950
violet
50
100
200
300
400
500
600
700
800
900
950
purple
50
100
200
300
400
500
600
700
800
900
950
fuchsia
50
100
200
300
400
500
600
700
800
900
950
pink
50
100
200
300
400
500
600
700
800
900
950
rose
50
100
200
300
400
500
600
700
800
900
950

Điểm nổi bật

Các điểm đáng chú ý nhất của công cụ này để bạn nắm nhanh trước khi dùng.

#01

Toàn bộ bảng màu Tailwind v3

22 họ màu × 11 shade (50–950) — đầy đủ nhất, không cần mở tài liệu Tailwind.

#02

Copy nhanh mọi định dạng

Copy hex, tên class (bg-blue-500), hay toàn bộ họ màu dưới dạng CSS variables chỉ 1 click.

#03

Lọc theo nhóm màu

Lọc theo Red family, Blue family, Green family… để tìm đúng màu cần dùng nhanh hơn.

#04

Custom Palette Builder

Tạo palette riêng với tối đa 8 màu và preview ngay trên UI card — export Tailwind config.

Cách sử dụng

Làm theo từng bước để dùng công cụ nhanh và đúng intent ngay từ lần đầu.

1

Duyệt bảng màu

Cuộn qua lưới màu để xem toàn bộ. Hover vào ô để xem hex value và shade number.

2

Click để copy

Click vào bất kỳ ô màu nào — panel hiện ra với hex, class name và nút copy.

3

Tạo custom palette

Chuyển sang tab "Custom Palette", thêm màu của bạn và preview trên mini UI. Export ra Tailwind config.

Câu hỏi thường gặp

Những câu hỏi gặp nhiều nhất khi dùng công cụ, được trình bày ngắn gọn và dễ quét.

Tailwind v3 có 22 họ màu chính (slate, gray, zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose + neutral, stone) × 11 shade = 242 màu.