Màu Sắc Tailwind CSS

Công cụ này sử dụng bảng màu Tailwind CSS v4 chính thức, bao gồm tất cả 22 họ màu với 11 sắc độ mỗi họ (từ 50 đến 950). Điều này đảm bảo bạn đang làm việc với các giá trị màu mới nhất và chính xác nhất từ framework Tailwind.

Tailwind cung cấp 5 họ màu trung tính với sự khác biệt tinh tế nhưng quan trọng về tông màu và độ ấm:

• Slate: Xám lạnh với chút xanh dương - hiện đại và sắc nét
• Gray: Xám trung tính thuần túy - cân bằng và linh hoạt
• Zinc: Xám lạnh, hơi ấm hơn Slate - cảm giác đương đại
• Neutral: Trung tính thực sự không có sắc màu - cân bằng hoàn hảo
• Stone: Xám ấm với chút nâu - hữu cơ và tự nhiên

Chọn dựa trên nhiệt độ tổng thể và thẩm mỹ của thiết kế. Xám lạnh (Slate, Zinc) hoạt động tốt với màu xanh và thiết kế hiện đại, trong khi xám ấm (Stone) bổ sung cho tông màu đất.

Định dạng tên class (ví dụ: bg-blue-500) sẵn sàng sử dụng trực tiếp trong HTML của bạn với Tailwind CSS. Chỉ cần thêm nó vào thuộc tính class của phần tử:

<div class="bg-blue-500 text-white p-4">
  Hello World
</div>

Tiền tố phổ biến:

• bg- cho màu nền
• text- cho màu chữ
• border- cho màu viền
• ring- cho màu ring

Hoàn toàn được! Sao chép giá trị HEX, RGB hoặc HSL để sử dụng trong bất kỳ tệp CSS, công cụ thiết kế hoặc ứng dụng nào. Các màu hoạt động độc lập với framework Tailwind.

.my-button {
  background-color: #3b82f6;
  color: #ffffff;
  border: 2px solid rgb(59, 130, 246);
}

Các màu này cũng hoàn hảo cho các công cụ thiết kế như Figma, Adobe XD, Sketch hoặc bất kỳ ứng dụng nào chấp nhận định dạng màu tiêu chuẩn.

Có! Màu yêu thích được lưu trong localStorage của trình duyệt. Chúng sẽ tồn tại qua các phiên trên cùng thiết bị và trình duyệt, vì vậy bạn có thể đóng tab và quay lại sau để tìm thấy màu yêu thích còn nguyên.

Xuất bảng màu tùy chỉnh của bạn rất đơn giản:

1. Thêm màu vào yêu thích bằng cách nhấp vào biểu tượng ngôi sao
2. Mở bảng yêu thích
3. Nhấp vào nút "Xuất CSS"
4. Dán các thuộc tính tùy chỉnh CSS đã sao chép vào stylesheet của bạn

:root {
  --color-blue-500: #3b82f6;
  --color-emerald-600: #059669;
  --color-slate-700: #334155;
}

Sau đó bạn có thể sử dụng các biến này trong toàn bộ CSS: background-color: var(--color-blue-500);