返回工具列表
Tailwind Color Finder
颜色Find the closest Tailwind CSS color for any hex or RGB value.
ttb run tailwind-colors
输入 →
cyan-400
#22d3ee · Δ0.0
sky-400
#38bdf8 · Δ32.7
cyan-500
#06b6d4 · Δ48.0
teal-400
#2dd4bf · Δ48.3
sky-500
#0ea5e9 · Δ50.4
teal-300
#5eead4 · Δ69.3
cyan-300
#67e8f9 · Δ73.0
blue-400
#60a5fa · Δ78.1
teal-500
#14b8a6 · Δ78.2
blue-500
#3b82f6 · Δ85.1
emerald-400
#34d399 · Δ86.9
sky-300
#7dd3fc · Δ92.1
分享此工具：
如何使用 Tailwind Color Finder
Browse the complete Tailwind CSS color palette with all shades (50-950) for every color family. Click any swatch to copy its HEX value, Tailwind class name, or RGB value. Search by color name or HEX code to find the closest Tailwind match. An indispensable reference for Tailwind developers.
1
Enter your parameters
Configure the inputs for the Tailwind Colors according to your specific needs.
2
View real-time results
The utility instantly processes your request and displays the calculated outputs directly in your browser.
3
Copy or Download
Click the copy icon next to the final output to instantly grab the result, or export it if applicable.
常见问题
What is Tailwind CSS?+
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for styling (e.g., bg-blue-500, text-lg, p-4). Instead of writing custom CSS, you compose designs directly in HTML using utility classes. It's the most popular CSS framework as of 2024.
Can I use these colors without Tailwind?+
Absolutely. The color palette is a carefully designed set of HEX values. Copy them and use them in any CSS, Figma, Sketch, or design tool. The Tailwind palette is considered one of the best pre-built color systems for web design.