在线配色生成器

按下空格键即可生成和谐的调色板，锁定你喜欢的颜色，然后复制 HEX 色值，或导出为 CSS 变量、Tailwind 和 JSON。一切都在你的浏览器中完成，不会上传任何内容。

调色板在你的浏览器中生成和检查，不会上传任何内容。分享链接只在 # 之后的部分携带颜色代码，你选择的模式、风格和颜色数量只会记在这台设备上。

用 Tailwind 配色生成器生成完整的色阶

关于 配色生成器

配色生成器会生成一组彼此搭配的颜色。按下空格键或点击「Generate」按钮，就会出现由两到十种颜色组成的新调色板：既可以是尽可能拉开距离的完全随机配色，也可以是围绕基础色的经典配色规则，包括邻近色、互补色、分裂互补色、三角配色、四角配色、单色、暗色调和亮色调。锁定任何一种你喜欢的颜色，其余颜色就会围绕它不断变化；你可以用撤销功能回退最近三十个调色板，也可以拖动色块重新排序。每种颜色都会显示它的 HEX、RGB 和 HSL 值、最接近的颜色名称，以及它与白色文字和黑色文字之间精确的 WCAG 对比度。调色板完成后，可以把它复制为 HEX 色值、CSS 变量、SCSS、Tailwind 代码片段或 JSON，也可以分享一个只包含颜色代码的链接。

功能特性

• 九种生成模式：随机、邻近色、互补色、分裂互补色、三角配色、四角配色、单色、暗色调和亮色调
• 按所选风格（任意、鲜艳、粉彩、低饱和、深色或浅色）生成随机调色板，颜色之间始终保持明显差距
• 基础色输入框，可围绕你的品牌色或喜欢的色调构建各种配色规则
• 锁定按钮会让选中的颜色保持不动，其余颜色重新生成，这样你可以一步步完善调色板
• 两到十种颜色，支持拖动或用箭头按钮重新排序，并可在最近 30 个调色板之间撤销和重做
• 每个色块都显示 HEX、RGB 和 HSL 值、最接近的颜色名称，以及白色和黑色文字的精确 WCAG 对比度
• 对比度检查器，可按 AA 和 AAA 标准评估调色板中任意文字色与背景色的组合
• 可导出为 HEX 列表、CSS 变量、SCSS、Tailwind 代码片段或 JSON，还有一个只包含颜色代码的分享链接

如何使用 配色生成器

1. 选择一种模式（选择「Random」时还要选一种风格）；如果想让调色板围绕某种颜色构建，就添加一个基础色
2. 按空格键或点击「Generate」，直到出现你喜欢的颜色，然后锁定它，让它保持不变，其余颜色继续变化
3. 点击色块即可复制它的 HEX 色值，展开详情可查看 RGB、HSL 和对比度，也可以把色块拖动成你想要的顺序
4. 检查任意一组颜色的文字对比度，然后打开「Export」，把调色板复制为 CSS 变量、SCSS、Tailwind 或 JSON

示例

输入

Mode: Analogous · base color #2a9d8f · 5 colors

输出

#3d4dc3  #2b668a  #2a9d8f  #69d391  #5aca4b
White text: AA on #3d4dc3 (6.89) and #2b668a (6.23) · black text: AA or better on the other three

邻近色在色轮上彼此相邻，间隔不超过 30 度。对比度采用 WCAG 公式计算，所以每个色块都会告诉你应该配什么颜色的文字。

常见错误与故障排除

• 按空格键没有生成新的调色板。 — 只有在没有按钮、链接或文本框获得键盘焦点时，空格键才会生成，因为这些元素要把空格键留给自己用。请按 Tab 键，直到没有任何元素高亮，或者直接点击「Generate」按钮。
• 「Generate」按钮是灰色的。 — 所有颜色都被锁定了，没有可以更换的颜色。请用锁定按钮或 L 键至少解锁一种颜色。
• 分享的调色板链接打开后是空的，或者是另一组调色板。 — 颜色保存在地址中 # 号之后的部分。如果聊天应用把链接截断了，请重新复制完整的地址；# 之后的内容如果不是两到十个有效的六位 HEX 色值，就会被忽略。
• Tailwind 代码片段没有改变我现有的颜色。 — 它添加的是 theme.extend.colors 下的一个调色板分组。请把它粘贴进配置文件的 colors 对象，然后使用 bg-palette-1 或 text-palette-3 这样的类名。

常见问题

配色生成器的和谐模式是怎样工作的？

每种模式都从一个基础色相出发，在色轮上按固定间隔选取色相：邻近色彼此相隔不超过 30 度，互补色使用相对的色相，分裂互补色使用它两侧的两个色相，三角配色把三个色相均匀分布在相隔 120 度的位置，四角配色则把四个色相分布在相隔 90 度的位置。单色、暗色调和亮色调保持一个色相不变，只改变它的明度和饱和度，而随机模式会把颜色尽可能拉开。

怎样围绕我的品牌色生成调色板？

输入或选取你的品牌色作为基础色，然后选择一种和谐模式。基础色会被放进调色板并保持不变，每次按空格键，其余颜色都会围绕它重新生成。你可以在邻近色、互补色和三角配色之间切换，看看调色板要离品牌色多远才合适。

怎样在配色生成器里保留一部分颜色，只更换其余的？

用色块上的锁定按钮或 L 键锁定你喜欢的颜色。被锁定的颜色会留在原来的位置，新调色板围绕它生成；如果新的效果更差，撤销可以回到上一个调色板。锁定所有颜色会使「Generate」按钮无法使用。

配色生成器是怎样检查文字对比度的？

它使用 WCAG 公式，比较两种颜色的相对亮度。普通文字要达到 AA 级，对比度至少为 4.5 比 1，达到 AAA 级则至少为 7 比 1；大号文字分别需要 3 比 1 和 4.5 比 1。每个色块都会显示白色文字和黑色文字的对比度，对比度检查工具还能评估调色板中任意文字色与背景色的组合。

怎样把调色板导出为 CSS 变量或 Tailwind？

打开「Export」面板并选择格式。「CSS variables」会给出带有 --color-1 到 --color-5 的 :root 代码块，SCSS 给出 $color 变量，Tailwind 给出可粘贴到 theme.extend.colors 的调色板分组，JSON 和 HEX 列表则给出纯数组。每种格式都有复制按钮。

我用配色生成器做的调色板可以分享吗？

可以。浏览器地址中 # 号之后始终保存着当前的颜色，例如 #264653-2a9d8f-e9c46a，点击「Copy link」即可复制。任何人打开它，都会看到同一组调色板。# 之后的部分绝不会发送到服务器，而你的模式、风格和颜色数量选择只会记在这台设备上。

相关工具

• 图片配色提取器 — 从图片提取主色与配色，导出 HEX、RGB、HSL、CSS 与 Tailwind。
• 颜色格式转换器 — 把任意 CSS 颜色转换为 HEX、RGB、OKLCH 等
• 对比度检查工具 — 检查两种颜色之间的 WCAG 对比度以及是否通过 AA/AAA。
• Tailwind 配色生成器 — 把一个品牌色转换为完整的 OKLCH 50-950 色阶
• CSS渐变生成器 — 通过实时色标设计线性、径向和圆锥渐变。
• 图片取色器 — 在浏览器中从图片取任意像素的 HEX、RGB 和 HSL 颜色值。
• 色盲模拟器 — 查看图片在红色盲或绿色盲眼中的样子。
• CSS 颜色转换工具 — 在 HEX、RGB 和 HSL 之间转换，并实时显示色样。

更多Web 与 DevOps工具

• chmod 计算器 — 在八进制与符号（rwx）之间转换 Unix 文件权限。
• .gitignore 生成器 — 从常见的语言和工具模板创建 .gitignore。
• HTTP 状态码与 MIME 类型 — HTTP 状态码和 MIME 内容类型的可搜索参考。
• Open Graph 生成器 — 生成 Open Graph 和 Twitter 元标签，并预览社交卡片。
• robots.txt 生成器 — 可视化构建带 User-agent 规则与 sitemap 的 robots.txt。
• XML Sitemap 生成器 — 将一组 URL 转换为符合标准的 sitemap.xml。
• .htaccess 生成器 — 通过开关构建 Apache 重写、重定向与安全响应头。
• Nginx 配置生成器 — 通过简单开关构建完整的 nginx server 块。
• Semver 计算器 — 解析、比较、范围检查、递增并强制转换语义化版本。
• Cache-Control 头生成器 — 用简单开关构建正确的 HTTP Cache-Control 头。
• Meta 标签生成器 — 在浏览器中通过表单生成 SEO、Open Graph 和 Twitter Card meta 标签。
• CSP 生成器 — 在浏览器中逐条指令地构建 Content-Security-Policy 请求头，并生成 meta、nginx 和 Apache 片段。

查看全部Web 与 DevOps工具 (27) · 全部工具