颜色饱和度调节器

调整颜色饱和度并创建饱和度变化版本

-100 20 100

颜色饱和度调节量（-100%到+100%）

仅在选择"渐变（全范围）"时生效。控制饱和度渐变序列中生成的颜色数量（2-20步）

关键信息

分类
设计与颜色
输入类型
color, select, range, number, checkbox
输出类型
html
样本覆盖
3
支持 API
Yes

概览

颜色饱和度调节器是一款在线设计工具，用于精确调整颜色的饱和度（鲜艳度或强度）。您可以选择增加饱和度使颜色更鲜艳，或降低饱和度使其更柔和，甚至生成从全饱和到无色的完整渐变序列，以满足不同的设计需求。

适用场景

  • •需要微调品牌色或主题色的鲜艳度，使其更符合设计氛围时。
  • •创建一套基于单一色相、但饱和度不同的配色方案时。
  • •需要将彩色图像或元素转换为去饱和度的灰度或柔和色调时。

工作原理

  • •输入一个基础颜色（HEX值）作为调节的起点。
  • •选择调节类型：增加饱和度、降低饱和度、生成渐变或自定义调节。
  • •根据所选类型，设置具体的调节量（百分比）或渐变步数等参数。
  • •工具将实时计算并输出调节后的颜色值或颜色序列。

使用场景

品牌设计：为主色创建一套从鲜艳到柔和的辅助色板。
UI/UX设计：快速生成按钮或界面元素的悬停、激活状态色（通常通过增减饱和度实现）。
平面设计：为海报或宣传材料创建具有统一色调但层次丰富的配色。

用户案例

1. 创建品牌辅助色板

品牌设计师
背景原因
设计师已确定品牌主色为 #4A90E2（蓝色），需要基于此生成一套饱和度不同的辅助色，用于不同层级的界面和背景。
解决问题
手动计算和调整多个饱和度变体费时且难以保证色相一致。
如何使用
输入基础颜色 #4A90E2，选择“渐变（全范围）”调节类型，设置渐变步数为 5，并确保勾选“保持色相特征”。
效果
工具生成了5个从全饱和蓝色到中性灰的渐变色值，设计师可直接将这些颜色用于背景、边框和次要文本。

2. 为UI组件生成去饱和度状态

背景原因
一个UI组件库的主按钮颜色为 #22C55E（绿色），设计规范要求禁用状态的按钮颜色为原色的去饱和版本。
解决问题
需要精确地将绿色降低到特定的灰度，同时保持其色相倾向，避免变成难看的脏色。
如何使用
输入基础颜色 #22C55E，选择“降低饱和度（降低强度）”类型，将调节量滑块拖动至 -70%。
效果
工具输出一个柔和、略带绿调的灰色（#A3A3A3），完美符合禁用状态的设计要求。

用 Samples 测试

design
颜色代码示例
用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色）
title token color
sample
时区协作排期器 ICS 样本
与 Time Zone Workflow Scheduler 返回结构一致的 ICS 文件样本，包含多个候选会议 VEVENT
task generate
sample
PDF示例
2026-02-01 到 2026-02-10 工具生成的PDF示例
task generate
sample

相关专题

DesignGenerate工具专题
探索 19 个围绕 design 的 generate 工作流工具，快速找到相近能力。
DesignConvert工具专题
探索 98 个围绕 design 的 convert 工作流工具，快速找到相近能力。
JsonGenerate工具专题
探索 33 个围绕 json 的 generate 工作流工具，快速找到相近能力。
PdfGenerate工具专题
探索 11 个围绕 pdf 的 generate 工作流工具，快速找到相近能力。

常见问题

“增加饱和度”和“降低饱和度”有什么区别？

“增加饱和度”使颜色更鲜艳、强烈；“降低饱和度”使颜色更灰暗、柔和，趋向于灰色。

“包含互补色”选项有什么作用？

勾选后，在生成的颜色结果中会额外包含与基础色互补（色轮上相对）的颜色，便于创建对比色方案。

“保持色相特征”是什么意思？

勾选后，在调节饱和度时会尽量保持颜色的原始色相（如红色、蓝色）不变，避免颜色偏向其他色调。

“渐变步数”如何影响结果？

步数决定了从全饱和到完全去饱和之间生成多少个中间颜色。步数越多，渐变越平滑。

调节量的范围是多少？

调节量范围为-100%到+100%。负值降低饱和度，正值增加饱和度，0%表示不改变。

API 文档

请求端点

POST /zh/api/tools/color-saturate-desaturate

请求参数

参数名 类型 必填 描述
baseColor color 是 -
adjustmentType select 是 -
adjustmentValue range 否 颜色饱和度调节量（-100%到+100%）
steps number 否 仅在选择"渐变（全范围）"时生效。控制饱和度渐变序列中生成的颜色数量（2-20步）
includeComplementary checkbox 否 -
preserveHue checkbox 否 -

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-color-saturate-desaturate": {
      "name": "color-saturate-desaturate",
      "description": "调整颜色饱和度并创建饱和度变化版本",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-saturate-desaturate",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]