Tailwind 调色板 颜色 完整默认 Tailwind 调色板的可视参考(v3.4 与 v4 共享相同默认值)。每个色块显示色阶号与 HEX,复制模式切换可按你代码库需要的形式获取值:`bg-slate-700`、`#334155` 或 `rgb(51, 65, 85)`。按色相名或 HEX 子串搜索过滤。 0— 复制:类HEXrgb()slate50#f8fafc100#f1f5f9200#e2e8f0300#cbd5e1400#94a3b8500#64748b600#475569700#334155800#1e293b900#0f172a950#020617gray50#f9fafb100#f3f4f6200#e5e7eb300#d1d5db400#9ca3af500#6b7280600#4b5563700#374151800#1f2937900#111827950#030712zinc50#fafafa100#f4f4f5200#e4e4e7300#d4d4d8400#a1a1aa500#71717a600#52525b700#3f3f46800#27272a900#18181b950#09090bneutral50#fafafa100#f5f5f5200#e5e5e5300#d4d4d4400#a3a3a3500#737373600#525252700#404040800#262626900#171717950#0a0a0astone50#fafaf9100#f5f5f4200#e7e5e4300#d6d3d1400#a8a29e500#78716c600#57534e700#44403c800#292524900#1c1917950#0c0a09red50#fef2f2100#fee2e2200#fecaca300#fca5a5400#f87171500#ef4444600#dc2626700#b91c1c800#991b1b900#7f1d1d950#450a0aorange50#fff7ed100#ffedd5200#fed7aa300#fdba74400#fb923c500#f97316600#ea580c700#c2410c800#9a3412900#7c2d12950#431407amber50#fffbeb100#fef3c7200#fde68a300#fcd34d400#fbbf24500#f59e0b600#d97706700#b45309800#92400e900#78350f950#451a03yellow50#fefce8100#fef9c3200#fef08a300#fde047400#facc15500#eab308600#ca8a04700#a16207800#854d0e900#713f12950#422006lime50#f7fee7100#ecfccb200#d9f99d300#bef264400#a3e635500#84cc16600#65a30d700#4d7c0f800#3f6212900#365314950#1a2e05green50#f0fdf4100#dcfce7200#bbf7d0300#86efac400#4ade80500#22c55e600#16a34a700#15803d800#166534900#14532d950#052e16emerald50#ecfdf5100#d1fae5200#a7f3d0300#6ee7b7400#34d399500#10b981600#059669700#047857800#065f46900#064e3b950#022c22teal50#f0fdfa100#ccfbf1200#99f6e4300#5eead4400#2dd4bf500#14b8a6600#0d9488700#0f766e800#115e59900#134e4a950#042f2ecyan50#ecfeff100#cffafe200#a5f3fc300#67e8f9400#22d3ee500#06b6d4600#0891b2700#0e7490800#155e75900#164e63950#083344sky50#f0f9ff100#e0f2fe200#bae6fd300#7dd3fc400#38bdf8500#0ea5e9600#0284c7700#0369a1800#075985900#0c4a6e950#082f49blue50#eff6ff100#dbeafe200#bfdbfe300#93c5fd400#60a5fa500#3b82f6600#2563eb700#1d4ed8800#1e40af900#1e3a8a950#172554indigo50#eef2ff100#e0e7ff200#c7d2fe300#a5b4fc400#818cf8500#6366f1600#4f46e5700#4338ca800#3730a3900#312e81950#1e1b4bviolet50#f5f3ff100#ede9fe200#ddd6fe300#c4b5fd400#a78bfa500#8b5cf6600#7c3aed700#6d28d9800#5b21b6900#4c1d95950#2e1065purple50#faf5ff100#f3e8ff200#e9d5ff300#d8b4fe400#c084fc500#a855f7600#9333ea700#7e22ce800#6b21a8900#581c87950#3b0764fuchsia50#fdf4ff100#fae8ff200#f5d0fe300#f0abfc400#e879f9500#d946ef600#c026d3700#a21caf800#86198f900#701a75950#4a044epink50#fdf2f8100#fce7f3200#fbcfe8300#f9a8d4400#f472b6500#ec4899600#db2777700#be185d800#9d174d900#831843950#500724rose50#fff1f2100#ffe4e4200#fecdd3300#fda4af400#fb7185500#f43f5e600#e11d48700#be123c800#9f1239900#881337950#4c0519Tailwind CSS v3.4 / v4 的默认主题值。 使用方法 选择复制格式 — Tailwind 工具类用 Class、设计工具用 HEX、CSS 变量用 rgb()。点击任意色块复制其值。短暂的勾标记确认复制成功。输入色相(`emerald`)或 HEX 片段(`fde0`)过滤。 常见问题 与 Tailwind v4 匹配吗? 是 — v4 默认主题保留与 v3.4 相同的色相/色阶值,所以调色板相同。如果你在配置中自定义了 `theme.colors`,项目的调色板可能不同。 为什么有五种灰色系? Tailwind 提供 slate / gray / zinc / neutral / stone 五种中性色相,底色略有不同:slate 偏冷蓝、gray 中性、zinc 更冷/钢质、neutral 纯中性、stone 暖灰褐。挑与你的强调色最搭配的。 950 色阶意味着什么? Tailwind 在 v3.3 在原有 50–900 阶梯之外添加了更暗的 950 步。近黑色但带有色相的微弱暗示,适合深色模式背景与非常细微的边框。 相关工具 色盲模拟器查看你的图片对 8 种色觉异常(CVD)人群分别如何呈现。颜色00CSS Box Shadow 生成器可视化设计 CSS box-shadow——多图层、实时预览、CSS / Tailwind 代码一键复制。颜色00颜色格式转换器在 HEX、RGB、HSL、HSV、OKLCH 与 CSS 变量之间互转任何颜色。颜色00CSS 渐变生成器用多色停靠点设计线性或径向 CSS 渐变并复制代码。颜色00调色板生成器基于基础色按六种配色方案生成和谐调色板。颜色00颜色对比度检查器按 WCAG AA 和 AAA 级别检查文字/背景对比度。颜色00