Tailwind CSS Color Finder

Tìm lớp màu Tailwind CSS gần nhất từ mã HEX.

▶Về công cụ này

Tìm lớp màu Tailwind CSS gần nhất từ bất kỳ mã HEX nào. Hỗ trợ hệ thống màu mặc định của Tailwind.

Giao diện công cụ

Lớp Tailwind gần nhất

—

—

Tại sao cần tìm màu Tailwind tương ứng?

Hệ thống màu sắc của Tailwind CSS

Tailwind CSS không sử dụng các mã màu HEX ngẫu nhiên. Thay vào đó, nó cung cấp một bảng màu tinh chỉnh (ví dụ: blue-500). Khi bạn nhận được một thiết kế với mã HEX cụ thể, việc tìm ra màu Tailwind gần giống nhất giúp code của bạn sạch hơn và tuân thủ đúng Design System.

Cách công cụ này hoạt động

Công cụ này tính toán khoảng cách màu sắc (Delta E) giữa mã HEX bạn nhập và toàn bộ bảng màu mặc định của Tailwind. Kết quả trả về là lớp màu có độ tương đồng cao nhất, giúp bạn áp dụng vào class HTML ngay lập tức.

Cách sử dụng

  1. Nhập mã HEX
  2. Xem màu Tailwind

Khi nào nên dùng

Khi cần tìm lớp màu Tailwind CSS gần nhất từ mã màu thiết kế (HEX) để sử dụng trong dự án.

Ví dụ

Nhập #3B82F6 để tìm blue-500, hoặc #EF4444 để tìm red-500 trong Tailwind.

Công cụ liên quan