Softonic

三元色生成器

步 1 / 2
下一步

三元配色使用色轮上彼此相隔 120° 的三种颜色；红、黄、蓝就是小学课本里的经典例子。这种配色天然均衡、充满活力，又不会显得杂乱。用取色器选择任意基础色：生成器会把它转换为 HSL，仅将色相精确旋转 +120° 和 +240°，饱和度与明度保持不变，然后展示三个带 HEX 色值的色块。点击任意色块即可复制其色值。

调色板的生成方式

  1. 1

    选择基础色

    用取色器选定整个调色板围绕的色相。

  2. 2

    计算两个配色伙伴

    工具在 HSL 空间中将色相旋转 +120° 和 +240°；饱和度与明度保持一致，配色因此浑然一体。

  3. 3

    查看 HEX 色值

    Base、Triadic +120° 与 Triadic +240° 并排显示，每个色块都标注六位 HEX 值。

  4. 4

    点击复制

    点击任意色块即可将其 HEX 色值复制到剪贴板，可直接粘贴到 CSS、Tailwind 配置或你的设计工具中。

为什么三元配色看起来均衡

色轮上等距分布的三种颜色不共享任何相邻色相：它们对比强烈，而 120° 的间隔又避免了互补色（相隔 180°）那种正面冲撞。人眼会把它们读作彼此分明却又和谐的组合。

色块背后的数学

生成器将你的 HEX 颜色转换为 HSL，给色相分别加上 120° 和 240°，再转换回来。因为只有色相在变，三种颜色始终共享相同的饱和度和明度。一个有趣的副产品：恰好旋转 120° 等价于把红、绿、蓝三个通道循环换位，所以默认色 #6366F1 的两个伙伴是 #F16366 和 #66F163，同样三对字节只是换了顺序。

本工具生成的三元配色示例：

基础色 Triadic +120° Triadic +240°
#FF0000（红色） #00FF00 #0000FF
#6366F1（靛蓝） #F16366 #66F163
#E67E22（橙色） #22E67E #7E22E6
#0EA5E9（天蓝） #E90EA5 #A5E90E
#2ECC71（翡翠绿） #712ECC #CC712E

用好三元配色而不过载

三种全饱和的鲜艳色相摆在一起太满了。行之有效的做法：

  • **一种主导色（60%）**用于主界面。
  • **一种辅助色（30%）**用于点缀和分区。
  • **一种点睛色（10%）**用于关键交互元素。

另一个调节手段是从柔和的基础色出发：两个伙伴色会继承它的饱和度，柔和的基础色自然带来柔和的三元组。

三元配色与其他配色方案对比

配色方案 结构 观感
互补色 2 色，相隔 180° 对比强烈，冲击力强
类似色 3 色，相邻 安静、统一
三元色 3 色，相隔 120° 均衡、有活力
四元色 4 色，矩形 丰富，但更难平衡
分裂互补 基础色 + 2 个近互补色 有力而不冲突

UI 设计小贴士

  • 逐对检查对比度。 三元配色不保证文字叠加时满足 WCAG AA 对比度要求，请逐一验证每个组合。
  • 为行动按钮只选一种颜色并坚持使用。按钮在三元色之间来回切换会让用户困惑。
  • 利用浅色调与深色调扩展调色板，而不必引入第四种色相。
  • 在深色模式下测试。 在白底上成立的三元组，放到深色背景可能难以区分；请调整明度。

常见问题

把 360° 的色轮三等分，可以让各色相之间的距离最大，且没有任何一色占主导。间隔更小会变成类似色配色；间隔更大则破坏等距关系，通常会演变成分裂互补配色。

适合，但通常要柔化处理。很多品牌以三元配色为基础，再对其中两种颜色降饱和或压暗，营造更成熟的气质。全饱和的三元配色显得活泼、有能量，请根据品牌个性来把握。

可以。生成器会把基础色的饱和度和明度原样应用到两个伙伴色上，低饱和的基础色会得到同样柔和的三元组。这是专业设计和编辑类设计的常用策略。

纯灰色的饱和度为零，没有可旋转的色相，三个色块自然完全相同。把基础色向任意色相稍作偏移，三个色块立刻就会分开。

无需注册，也不会保存任何内容。颜色只用于计算和展示调色板；在分步视图中它还会出现在页面 URL 里，方便你收藏或分享一套配色。

相关工具

PNG 转 SVG 矢量化工具

在浏览器中把 PNG 栅格图像转换为 SVG 路径。适合徽标、图标和线稿。可控制阈值、颜色数量和平滑度。

材质设计颜色选择器

浏览Material Design色板，单击即可将任意色号（50至A700）以HEX、RGB或 HSL 格式复制。

报纸制作工具

使用你自己的标题和文章制作报纸风格的头版，然后复制、下载纯文本，或打开浏览器打印对话框。

半色调生成器

将照片转换为可调节的 AM 式半色调，可选单色、取样色和 CMYK 风格模式，并下载 PNG 或矢量网点 SVG。

横线纸生成器

免费制作可打印的横线纸。选择宽格、中格或窄格，以毫米设置行距、纸张尺寸和一条页边线，然后打印或下载 SVG。

潘通（Pantone）转 HEX 转换器

将Pantone PMS色号转换为最接近的HEX、RGB及CMYK值，以确保屏幕显示与印刷效果一致，并提供色卡预览功能。

此工具还提供其他语言版本