颜色工具
Tailwind CSS 颜色选择器
浏览和搜索完整的Tailwind CSS调色板。获取所有色调的类名、HEX/RGB值和CSS变量输出。
tailwindcolorpickertailwindcsscolors
Tailwind Color Picker
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
What is Tailwind CSS 颜色选择器?
Tailwind CSS颜色选择器是完整Tailwind CSS默认调色板的可视化参考和搜索工具，每个命名颜色都有50（最浅）到950（最深）的全部11个色调。Tailwind CSS已成为主导的实用优先CSS框架，其精心制作的22色调色板（每个11个色调，共242种颜色）设计为感知均匀的。这种一致性使构建和谐的UI变得微不足道，但开发者浪费时间滚动文档以查找确切的类名或十六进制值。本选择器允许您按颜色名称（sky、amber、zinc）搜索，按色调亮度过滤（仅显示700-950用于深色模式），单击任何色板复制类名（bg-rose-500）、十六进制值、RGB三元组、HSL值或CSS变量（rgb(var(--color-rose-500))）。使用渐变混合工具混合两种Tailwind颜色并获得中间的Tailwind优化十六进制值，或为给定色调生成完整的文本、边框、环、背景组合（bg-indigo-50 text-indigo-900 border-indigo-200），遵循Tailwind自己文档的颜色组合模式。将完整调色板导出为CSS自定义属性或Tailwind配置文件片段。
When to Use Tailwind CSS 颜色选择器
用于构建Tailwind CSS界面、查找确切的类名和十六进制值、选择和谐的深色/浅色模式对、生成Tailwind配置片段，或为自定义组件复制CSS变量。
How to Use Tailwind CSS 颜色选择器
按颜色名称搜索或浏览有组织的颜色组。单击任何色板复制类名、HEX、RGB、HSL或CSS变量格式。使用混合工具组合色调。将完整调色板导出为CSS自定义属性或配置片段。