Shade & Tint
Tạo shade tối hơn và tint sáng hơn từ bất kỳ màu cơ sở nào. Xem phổ đầy đủ từ gần đen đến gần trắng.
Free Online Tool
Tạo Shade & Tint Màu - Tạo Thang Màu
Tạo shade, tint và tone từ bất kỳ màu nào. Tạo thang màu kiểu Tailwind 50-950, CSS variables và hệ thống màu đầy đủ. Công cụ miễn phí.
Color Shades
All scales at once
Base
Hue217°
Saturation91%
Lightness60%
on White3.7:1
on Black5.7:1
Màu Chủ Đạo
Tông Lạnh
Tông Nóng
Màu Trung Tính
Click to copy · Tap label for details
Key Features
Powerful features designed for designers and developers
Thang Màu Kiểu Tailwind
Tạo thang màu 50-950 theo cùng định dạng Tailwind CSS. Sử dụng làm màu tùy chỉnh trong config.
Biến Thể Tone
Tạo tone điều chỉnh độ bão hòa — thuần, mờ và nhạt màu.
Số Bước Tùy Chỉnh
Chọn 5, 7, 9 hoặc 11 bước cho thang màu. Nhiều bước hơn cho chuyển tiếp mượt hơn.
Xuất CSS
Xuất dạng CSS custom properties hoặc đoạn config Tailwind, sẵn sàng dán.
Xem Trước Trực Quan
Xem tất cả shade cạnh nhau. Nhấn swatch để sao chép giá trị HEX.
How It Works
Get started in just a few simple steps
- 1
Chọn Màu
Nhập màu HEX hoặc dùng color picker. Đây là màu cơ sở cho thang màu.
- 2
Chọn Loại Thang
Chọn shade (tối hơn), tint (sáng hơn), tone (nhạt màu) hoặc thang Tailwind 50-950 đầy đủ.
- 3
Điều Chỉnh Số Bước
Chọn số bước cần thiết. Nhiều bước hơn = kiểm soát chi tiết hơn.
Xuất
Sao chép giá trị hex riêng lẻ, xuất CSS variables, hoặc lấy đoạn config Tailwind.
Frequently Asked Questions
Everything you need to know
Sự khác biệt giữa shade và tint là gì?
Shade được tạo bằng thêm đen vào màu, làm tối hơn. Tint được tạo bằng thêm trắng, làm sáng hơn. Tone được tạo bằng thêm xám, giảm độ bão hòa.
Thang 50-950 của Tailwind hoạt động như thế nào?
Thang tạo 11 giá trị từ 50 (sáng nhất) đến 950 (tối nhất), khớp với quy ước đặt tên Tailwind.
Nên dùng bao nhiêu bước cho thang màu?
Với hầu hết hệ thống UI, 9 hoặc 11 bước là tốt. 5 bước phù hợp cho component đơn giản.
Có thể xuất dạng CSS variables không?
Có! Xuất thang dạng CSS custom properties như `--blue-500: #3B82F6`. Dùng trực tiếp trong CSS.
Có hoạt động với Tailwind v4 không?
Có. Định dạng xuất hoạt động với cả Tailwind v3 và v4.
Related Tools
Explore more color tools