ToolDeck

Tailwind颜色查找器

为任意HEX或RGB值查找最接近的Tailwind CSS颜色类名

加载示例

颜色（HEX）

最接近的Tailwind颜色

单击任意结果以复制类名

也可以试试：颜色转换器颜色对比度检测器配色方案生成器CSS颜色名称查找器CSS渐变生成器

什么是Tailwind颜色查找器？

Tailwind CSS内置了一个默认调色板，包含22个颜色系列，每个系列有11种深浅度，从50（最浅）到950（最深），共提供242种预定义颜色，类名格式如bg-indigo-500或text-red-400。当你手头有设计文件中的hex或RGB值，需要找到最接近的Tailwind类名时，Tailwind颜色查找器会计算你的输入与调色板中每种颜色之间的距离，并返回最佳匹配结果。

匹配过程的原理是：将你的输入颜色和每个Tailwind颜色都转换为RGB三元组，然后计算三维颜色空间中的欧几里得距离：sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)。距离最小的Tailwind颜色即为最近匹配。若距离为零，说明你的输入与某个Tailwind默认深浅度完全一致。

这与通用颜色转换器或颜色名称查找器不同。转换器负责格式转换（hex转HSL、RGB转CMYK）。名称查找器在148个CSS命名颜色中匹配。Tailwind颜色查找器专门针对Tailwind CSS默认调色板进行匹配，返回可直接粘贴到标记代码中的类名。

为什么使用这个Tailwind颜色查找器？

手动将一个hex值与242个Tailwind深浅度逐一对比，意味着要翻遍文档或配置文件。本工具对每个深浅度都执行距离计算，并按接近程度排序显示最佳匹配，附带精确的hex值和可直接复制的Tailwind类名。

🎯
将任意颜色映射到Tailwind类名
粘贴来自Figma、Sketch或品牌规范的hex代码，即可立即获取最接近的Tailwind颜色类名。工具返回多个排序结果，方便你选择最符合设计意图的深浅度。
🔒
隐私优先的处理方式
所有颜色计算均在浏览器本地运行，颜色值不会发送至任何服务器。页面加载后，工具可离线使用。
⚡
每次按键即时响应
修改hex输入中的任意字符，结果立即重新计算。无需提交按钮，无加载指示器，无后端网络往返。
📋
直接复制类名
点击任意结果即可将Tailwind类名（如indigo-500）复制到剪贴板，可直接粘贴到JSX、HTML或Tailwind配置中，无需重新格式化。

Tailwind颜色查找器的使用场景

设计稿到代码的转换
前端开发者收到Figma设计中的hex值后，可以查找最接近的Tailwind类名，而无需添加自定义颜色。这样既能使代码库与默认调色板保持一致，又能减少tailwind.config.js的配置臃肿。
将现有CSS迁移到Tailwind
将旧项目迁移到Tailwind CSS的后端工程师，可以逐一查找现有hex颜色，并用最接近的实用类名替换。这样无需从头重新选择每种颜色，大幅加快迁移速度。
设计系统审计
负责审计基于Tailwind的设计系统的DevOps和平台团队，可以检查哪些自定义颜色与默认深浅度足够接近、可以直接替换，从而降低调色板的维护成本。
组件库开发
测试组件库的QA工程师可以将采样的hex值粘贴到查找器中，检查渲染颜色是否与预期的Tailwind深浅度匹配，并查看距离分数进行核验。
数据看板主题定制
使用Tailwind样式图表库构建数据看板的数据工程师，可以将品牌色或客户提供的hex值映射到最接近的Tailwind深浅度，实现各组件间一致的主题风格。
学习Tailwind调色板
初学Tailwind CSS的学生和开发者可以输入任意hex值，探索其落在哪个颜色系列和深浅度编号中，从而熟悉color-500与color-700之间的差异。

Tailwind CSS默认调色板

Tailwind CSS v3包含22个颜色系列，每个系列有11种深浅度：50、100、200、300、400、500、600、700、800、900和950。500深浅度被视为每个系列的“基准色”。下表列出了每个颜色系列及其最浅（50）和最深（950）的hex值。

颜色系列深浅度50（最浅）950（最深）
slate11#f8fafc#020617
gray11#f9fafb#030712
zinc11#fafafa#09090b
neutral11#fafafa#0a0a0a
stone11#fafaf9#0c0a09
red11#fef2f2#450a0a
orange11#fff7ed#431407
amber11#fffbeb#451a03
yellow11#fefce8#422006
lime11#f7fee7#1a2e05
green11#f0fdf4#052e16
emerald11#ecfdf5#022c22
teal11#f0fdfa#042f2e
cyan11#ecfeff#083344
sky11#f0f9ff#082f49
blue11#eff6ff#172554
indigo11#eef2ff#1e1b4b
violet11#f5f3ff#2e1065
purple11#faf5ff#3b0764
fuchsia11#fdf4ff#350820
pink11#fdf2f8#500724
rose11#fff1f2#4c0519

Tailwind v3与v4调色板对比

Tailwind CSS v4改变了颜色的定义方式，但保留了相同的默认调色板名称和深浅度编号。

Tailwind CSS v3
颜色在tailwind.config.js中以hex值的形式定义。默认调色板包含22个颜色系列（从slate到rose），每个系列11种深浅度（50-950）。自定义颜色通过theme.extend.colors添加。类名遵循bg-{color}-{shade}、text-{color}-{shade}等格式。
Tailwind CSS v4
颜色迁移至在@theme中定义的CSS自定义属性。默认调色板仍为相同的22个系列和11种深浅度，但值以OKLCH格式存储，而非hex。自定义颜色使用@theme { --color-brand: oklch(0.5 0.2 240); }的方式定义。类名保持不变：bg-brand、text-indigo-500等。

代码示例

通过编程方式，使用RGB空间中的欧几里得距离查找最接近的Tailwind颜色。以下每个示例接受一个hex字符串，并从默认调色板中返回最接近的Tailwind类名。

JavaScript
// Find nearest Tailwind color from hex input
const TAILWIND_COLORS = {
  'red-500': [239, 68, 68],
  'blue-500': [59, 130, 246],
  'indigo-500': [99, 102, 241],
  'green-500': [34, 197, 94],
  // ... full palette (242 entries)
}

function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}

function nearestTailwind(hex) {
  const [r, g, b] = hexToRgb(hex)
  let best = '', bestDist = Infinity
  for (const [name, [r2, g2, b2]] of Object.entries(TAILWIND_COLORS)) {
    const d = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (d < bestDist) { bestDist = d; best = name }
  }
  return best
}

nearestTailwind('#6366f1') // → "indigo-500" (exact match)
nearestTailwind('#5a5de0') // → "indigo-500" (distance: 19.3)
nearestTailwind('#ff4500') // → "red-500" (distance: 57.2)
Python
import math

TAILWIND = {
    "red-500": (239, 68, 68),
    "blue-500": (59, 130, 246),
    "indigo-500": (99, 102, 241),
    "green-500": (34, 197, 94),
    # ... full palette
}

def hex_to_rgb(h: str) -> tuple[int, int, int]:
    h = h.lstrip("#")
    return int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)

def nearest_tailwind(hex_str: str) -> tuple[str, float]:
    r, g, b = hex_to_rgb(hex_str)
    name, dist = min(
        TAILWIND.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return name, round(dist, 1)

print(nearest_tailwind("#6366f1"))  # → ('indigo-500', 0.0)
print(nearest_tailwind("#1e293b"))  # → ('slate-800', 0.0)
print(nearest_tailwind("#333333"))  # → ('zinc-700', 17.5)
CLI (Tailwind config)
# tailwind.config.js — extend palette with a custom color
# mapped to its nearest default Tailwind shade
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          // Your brand color: #5a5de0
          // Nearest Tailwind: indigo-500 (#6366f1)
          // Use the exact brand color, reference Tailwind for context
          DEFAULT: '#5a5de0',
          light: '#8183f0',   // near indigo-300
          dark: '#3b3dab',    // near indigo-700
        }
      }
    }
  }
}

# Check Tailwind classes in markup:
# npx tailwindcss -o output.css --content ./src/**/*.html

常见问题

Tailwind CSS默认调色板包含多少种颜色？
Tailwind CSS v3和v4的默认调色板共包含242种颜色：22个颜色系列（slate、gray、zinc、neutral、stone、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose），每个系列11种深浅度（50、100、200、300、400、500、600、700、800、900、950）。black和white也可作为独立的实用类使用。
Tailwind颜色查找器与CSS颜色名称查找器有什么区别？
CSS颜色名称查找器将输入与148个CSS命名颜色（如Tomato、SlateBlue或Crimson）进行匹配。Tailwind颜色查找器则针对Tailwind默认调色板中的242种颜色进行匹配，返回red-500或indigo-400等类名。Tailwind查找器的输出是可以直接在HTML或JSX中使用的实用类名。
这个工具适用于Tailwind CSS v4项目吗？
适用。Tailwind v4的默认调色板使用与v3相同的颜色名称和深浅度编号，hex值也几乎完全一致。主要区别在于v4内部以OKLCH存储颜色，但对标准调色板而言，视觉效果与v3相同。如果你在v4主题中使用了非默认的OKLCH自定义值，查找器仅针对标准调色板进行匹配。
结果中的距离分数代表什么？
距离分数是你的输入颜色与匹配到的Tailwind颜色在RGB空间中的欧几里得距离。距离为0表示完全匹配。距离低于10时非常接近，人眼通常无法分辨差异。距离超过30时则有明显差别。这个分数有助于你判断是使用建议的Tailwind类名，还是添加自定义颜色。
是否应该始终用最接近的Tailwind颜色替代自定义hex值？
不一定。若与最接近的Tailwind深浅度的距离较小（低于10-15），切换到默认类名可以减少配置文件体积、保持调色板一致性。若距离较大，或该颜色是必须精确匹配的品牌色，则应将其作为自定义颜色添加到Tailwind配置中。查找器通过显示精确距离帮助你做出判断。
为什么会有五个灰色系列（slate、gray、zinc、neutral、stone）？
每个灰色系列的色调倾向各有不同。slate带有蓝色调，适合以蓝色为主题的UI设计。gray是冷暖平衡的中性灰。zinc略偏冷色，但不像slate那样明显偏蓝。neutral是真正的消色差灰，没有任何色偏。stone带有暖棕色调。Tailwind提供这五种灰色，是为了让你无需自定义配置，就能根据设计的色温选择合适的灰色。
如何将匹配到的颜色添加到我的Tailwind项目中？
若匹配结果是完全或近似完全匹配的默认深浅度，直接使用类名即可：bg-indigo-500、text-red-400、border-emerald-600，无需修改配置。若你希望使用接近但不完全等同于Tailwind深浅度的自定义颜色，在v3中将其添加到tailwind.config.js的theme.extend.colors中，在v4中则以CSS自定义属性的形式添加到@theme中。查找器会提供两种情况下适用的类名格式。

相关工具

颜色转换器在HEX、RGB、HSL和HSV格式之间转换颜色，内置可视化选色器颜色对比度检测器检测前景色与背景色之间的WCAG AA和AAA对比度配色方案生成器从任意基础色生成互补色、类似色、三色及四色配色方案CSS颜色名称查找器查找任意HEX或RGB值最接近的CSS命名颜色CSS渐变生成器可视化构建线性和径向CSS渐变，并复制CSS代码