免费工具，无需注册
从任意网站提取配色方案
粘贴网址，获取网站的品牌色、文字色、背景色和强调色，附 hex 色值，按使用量排序。免费，无需注册。查看完整示例，比如 Stripe 的 DESIGN.md 和 Linear 的 DESIGN.md，或者了解 DESIGN.md 还能提供什么。
在代码中使用这套配色
提取器按角色（背景、表面、文字、品牌、强调和边框）对颜色分组，并按每种颜色覆盖页面的面积排序。要复用它们，请为每个角色起一个名字，而不是在样式中到处粘贴 hex 色值，这样改一处就能更新这个颜色出现的所有位置。
1. 按角色而不是色相为颜色命名。--color-text-muted 在改版之后依然说得通；--gray-600 却看不出它该用在哪里。把你复制的 hex 色值换进去。
:root {
--color-brand: #635bff;
--color-text: #0a2540;
--color-text-muted: #425466;
--color-surface: #ffffff;
--color-surface-muted: #f6f9fc;
--color-border: #e3e8ee;
}
body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }2. 在 Tailwind 中使用。每个变量都会变成一组工具类，比如 bg-surface、text-ink-muted 和 border-line。
/* app.css, Tailwind CSS v4 */
@theme {
--color-brand: #635bff;
--color-ink: #0a2540;
--color-ink-muted: #425466;
--color-surface: #ffffff;
--color-surface-muted: #f6f9fc;
--color-line: #e3e8ee;
}3. 检查你用到的颜色搭配。正文文字与背景的对比度至少要达到 4.5:1，大号文字至少 3:1。提取器会显示主要文字颜色在页面背景上的对比度；其他准备使用的颜色搭配，请在上线前自行检查。
颜色只是设计系统的一层。DESIGN.md 把颜色和字号层级、间距、组件规则放在一起，让你的编程智能体在正确的地方使用正确的颜色。
常见问题
配色提取常见问题
关于免费工具“网站配色提取器”的简短解答。
页面会在真实浏览器中加载，然后按页面上绘制的颜色所覆盖的面积进行测量。每种颜色都会被推测一个最可能的角色：背景、面板、文字、品牌、强调或边框。
配色方案只列出页面实际使用的颜色，按覆盖面积排序，最多十二种。图片或视频中的颜色、只在悬停时出现的颜色，以及网站其他页面使用的颜色都不计算在内。
不能。它读取的是首次访问者默认看到的主题，通常是浅色。默认就是深色的网站，结果也会是深色。如果网站有深色模式，完整的 DESIGN.md 会涵盖它。
不能导出为文件。你可以复制 hex 色值：选择一个色块复制单个色值，或者一次全部复制，每行一个。
可以，一次取一个像素。在 Chrome 或 Edge 中，右键点击元素，选择“检查”（Inspect），然后点击“样式”（Styles）窗格中任意颜色旁边的色块；颜色选择器里有一个吸管工具，可以读取页面上任意一点的颜色。Firefox 的查看器（Inspector）工具栏中也有同样的吸管工具。
这个工具只列出颜色。DESIGN.md 涵盖网站的颜色及其角色、字号层级、间距和组件规则，全部放在一个你的编程智能体可以遵循的文件中。