24 栏目 · 288 站点 · 更新于 2026-10-16 榜单 关于

配色工具

从找灵感、定色板,到交付能直接用的色值

9 个入选条目 配色 · UI 更新于 2026-09-29

配色工具其实不是一类东西。有的帮你找感觉(现成色板),有的帮你生成(算法配平),有的帮你把颜色落到代码里(导出变量、对比度校验)。混着用就会出现「看着好看但用不了」的色板。这篇按阶段拆开。

评选标准

  1. 能导出可用的格式——HEX、RGB、CSS 变量、SVG、PNG 色卡,至少给一个。只能截图取色的工具不合格。
  2. 看得到真实场景——色块并排和真实界面是两回事,能预览到文字、按钮上的效果才有意义。
  3. 免费可用——配色是高频动作,每改一次颜色都要登录或付费的工具会被弃用。

怎么用

  1. 第一步:定主色。 有品牌色就用品牌色,没有就从参考里挑一个,不要用算法生成主色——主色需要理由,不需要随机。
  2. 第二步:配辅助色与中性色。 中性色(灰阶)比彩色更容易出错:同一个灰在不同背景上看起来不一样,要按实际背景调,不要直接用一个灰阶系列。
  3. 第三步:验对比度。 正文与背景的对比度至少到 4.5:1,大字到 3:1。这是可访问性要求,也是「看着累不累」的客观标准。
  4. 第四步:导出并落成变量。 别在交付文档里给一张色卡图片,给 CSS 变量或设计 token,前端才不用手工描色。

榜单

  1. 生成类里最顺手的一个:锁定 + 快捷键 + 导出全

    Coolors 的核心体验是快:空格键换一组配色,锁定满意的色再继续换其他位,最后导出为 HEX、RGB、CSS、SVG、PNG 或链接。「锁定 + 随机」这个交互是它真正的价值——它让你在几秒内得到几十个候选,而不是从一个空色盘开始想。

    要注意生成结果偏现代、饱和度较高,做传统、雅致、低饱和方向的项目要手动压。部分功能(保存调色板、团队协作)需要账号。

  2. 02 color hunt 调色板 图标
    color hunt 调色板 colorhunt.co
    ↗

    不想自己调,直接拿现成的四色板

    Color Hunt 是人肉筛选的配色板集合,每套四色,以卡片形式展示。它的价值在于「已经被人选过一遍」——不用自己判断这组颜色能不能用,直接挑顺眼的拿走。

    要注意只有四色,做完整设计系统不够用,需要自己扩展中性色与语义色。色板偏流行风格,时效性强。

  3. 03 Adobe color 图标
    Adobe color color.adobe.com
    ↗

    需要从色彩理论出发调色时的标准工具

    Adobe Color 以色轮为基础,可以按互补、类似、三角等配色规则生成,也能提取图片配色。它还有可访问性工具,能直接检查文字与背景的对比度是否达标。要跟甲方解释「为什么这几个颜色搭」,用它出图最有说服力。

    要注意免费账号有保存数量限制。界面偏重,快速取色的场景不如 Coolors 利索。

  4. 04 zhongguose 图标
    zhongguose zhongguose.com
    ↗

    中文项目的文化底色:把传统色名对应到色值

    中国传统颜色,把「胭脂」「天青」「月白」这类传统色名对应到具体色值。它解决的是中文语境里最难传达的一件事:把「青」这种模糊的说法变成十六进制。做国风、文创、茶酒食品牌时比通用配色工具贴得多。

    要注意它提供的是颜色参考与文化背景,不是配色方案,不会告诉你哪几个搭在一起好看。

  5. 05 color leap 图标
    color leap colorleap.app
    ↗

    做复古、年代感项目时最有用

    Color Leap 按年代整理历史配色(从古埃及到六十年代),每套都配了当时的设计作品与背景说明。做复古风、怀旧主题、年代叙事的内容时,它给的不只是色值,还有依据。

    要注意配色偏时代风格,现代界面直接用会显得陈旧。适合当灵感与依据,不适合当生产色板。

  6. 06 Webgradients 图标
    Webgradients webgradients.com
    ↗

    需要渐变时,别自己拖,直接拿现成的

    WebGradients 收录上百种线性渐变,每个都能一键复制 CSS 代码,也能下载成 PNG、Sketch 或 PSD 文件。渐变的难点在于「两个颜色之间过渡会不会发脏」,现成的方案已经被人筛过一遍了。

    要注意渐变风格偏网页背景类,做品牌主视觉可能不够精细。颜色不能改,想要微调得自己拿代码改。

  7. 07 Grabient 图标
    Grabient grabient.com
    ↗

    要改渐变角度与色标时用它

    Grabient 能可视化调整渐变的角度、色标位置与颜色,实时看到结果并复制 CSS。需要把一个大致方向调成精确值的时候,它比在代码里改十六进制快得多。

    要注意功能集中在渐变这一件事上,不提供配色方案。

  8. 做竞品分析、品牌致敬时查色值用

    BrandColors 收录各大品牌的官方色值与色板,能直接复制 HEX,也有下载包。做品牌对标、竞品视觉分析、或者需要「看起来像那个层次」的配色时,它是数据源。

    要注意色值不授予商标使用权。参考配色方向没问题,直接拿别人的品牌色做主色就是另一回事了。

  9. 09 Colorkit 配色工具 图标
    Colorkit 配色工具 colorkit.io
    ↗

    一站式:生成色板 + 检查对比度 + 导出

    Colorkit 提供色板生成、色阶扩展、对比度检查与导出,把几个常用动作收在一个页面里。适合不想在四五个工具之间来回跳的时候。

    要注意每个单项功能都不是最强的,胜在集成。深度使用仍会回到专项工具。

还可以看看

  • 0to255 ↗ 选一个颜色,直接给出从深到浅的同色系色阶。做 hover 态、边框、分隔线这类「同一色的不同深浅」时最快。
  • Flat UI Colors ↗ 扁平风格的基础色板集合,含多个国家的配色方案,一键复制。做快速原型、后台界面时够用。
  • Material UI Colors ↗ Material Design 的完整色阶体系(每个色 50–900)。做后台、组件库时直接用这套体系,比自己造色阶省事。

常见问题 · 配色工具

为什么生成的配色放到界面里就不好看了?
因为色板工具给你的通常是几个高饱和度的彩色,而真实界面里 80% 的面积是中性的白、灰、深色,彩色只占很小一块。正确做法是先定中性色阶(背景、边框、正文),再拿一两个彩色当强调色,而不是反过来。
同一个灰在不同背景上看起来不一样,怎么办?
这是正常的视觉现象。不要用一个固定的灰色去应付所有背景,而是按实际背景分别微调:浅底上的灰要更浅,深底上的灰要更亮,才能看起来「一样灰」。这也是为什么设计系统里灰阶总是成套出现。
对比度 4.5:1 是硬指标吗?
对正文来说是。WCAG 2.1 的 AA 级要求:普通文字与背景对比度至少 4.5:1,大号文字(18pt 以上或 14pt 粗体)至少 3:1。这不是「建议」,是国际通用的可访问性标准,政府、金融、大企业项目往往当成硬性验收项。
深色模式的配色要重新做一遍吗?
要,但不是简单反色。深色模式下的高饱和色会显得刺眼,需要降饱和、提亮;阴影在深色背景上无效,得改用浅色描边或发光。直接把浅色模式的色值反转,是深色模式最常见的翻车方式。

相关页面

排序与描述是编辑判断,不构成法律意见;授权、价格和服务条款以原站为准。描述有误或链接失效,告诉我们。