颜色明暗调节器

调整颜色亮度并创建明暗变化版本

-100 20 100

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

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

关键信息

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

概览

颜色明暗调节器是一款专业的在线色彩工具，旨在帮助设计师和开发者快速调整颜色的亮度，并生成精确的明暗变化版本或渐变序列，从而轻松构建和谐的配色方案。

适用场景

  • •需要为 UI 界面创建悬停（Hover）或点击状态的颜色变化时。
  • •在设计系统中需要生成同一色相的深浅渐变色板时。
  • •需要快速微调现有颜色以符合视觉对比度要求时。

工作原理

  • •输入或选择您的基础颜色（Base Color）。
  • •选择调节类型，如变亮、变暗或生成渐变序列。
  • •通过滑动调节量（%）或设置步数来精确控制色彩变化幅度。
  • •获取生成的颜色代码并直接应用于您的设计项目。

使用场景

UI 交互设计：为按钮生成不同状态的颜色，如默认、悬停和禁用状态。
品牌色板扩展：基于品牌主色快速生成一系列深浅不一的辅助色。
数据可视化：为图表生成具有逻辑关联的渐变色系，增强数据可读性。

用户案例

1. 按钮交互状态设计

UI 设计师
背景原因
设计师需要为一套深蓝色按钮设计悬停效果，要求悬停时颜色比原色稍亮。
解决问题
手动调整颜色容易导致色相偏移，难以保持视觉统一。
如何使用
输入基础颜色 #4A90E2，选择“变亮”模式，调节量设置为 15%。
示例配置
baseColor: #4A90E2, adjustmentType: lighten, adjustmentValue: 15
效果
快速获得了一个视觉上更亮但色相一致的悬停色，确保了交互反馈的自然感。

2. 生成品牌色阶表

前端开发人员
背景原因
开发人员需要为项目构建一套包含 10 个层级的品牌色阶，用于背景、边框和文字。
解决问题
手动计算 10 个层级的颜色数值非常繁琐且容易出错。
如何使用
选择“渐变（全范围）”模式，设置步数为 10，并开启“保持相对饱和度”。
示例配置
baseColor: #4A90E2, adjustmentType: gradient, steps: 10, preserveSaturation: true
效果
一键生成了从深到浅的 10 个颜色序列，直接复制即可用于 CSS 变量定义。

用 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 工作流工具，快速找到相近能力。

常见问题

我可以同时生成互补色吗？

可以，勾选“包含互补色”选项，工具会在调整亮度的同时自动计算并展示对应的互补色。

渐变步数最多可以设置多少？

渐变步数支持在 2 到 20 之间进行设置，以满足不同精细度的配色需求。

调节量（%）的正负值代表什么？

正值表示增加亮度（变亮），负值表示降低亮度（变暗），范围支持 -100% 到 +100%。

“保持相对饱和度”有什么作用？

开启此选项后，在调整亮度时会尽量维持颜色的原始饱和度感，防止颜色在变亮或变暗时出现灰化。

该工具支持哪些颜色格式？

工具支持标准的十六进制（Hex）颜色输入，并能输出对应的色彩数值。

API 文档

请求端点

POST /zh/api/tools/color-lighten-darken

请求参数

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

响应格式

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

AI MCP 文档

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

{
  "mcpServers": {
    "elysiatools-color-lighten-darken": {
      "name": "color-lighten-darken",
      "description": "调整颜色亮度并创建明暗变化版本",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-lighten-darken",
      "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]