# 颜色明暗调节器

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

> 标准页面: https://elysiatools.com/zh/tools/color-lighten-darken

- **分类:** Design

- **关键词:** 颜色, 调亮, 调暗, 亮度, 调节, 色调, 阴影, 颜色调整, 明度

## 概述

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

## 输入项

- **基础颜色** (color)
- **调节类型** (select)
- **调节量(%)** (range): 颜色亮度调节量（-100%到+100%）
- **渐变步数** (number): 仅在选择"渐变（全范围）"时生效。控制渐变序列中生成的颜色数量（2-20步）
- **包含互补色** (checkbox)
- **保持相对饱和度** (checkbox)

## 适用场景

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

## 工作原理

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

## 使用案例

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

## 常见问题

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

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

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

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

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

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

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

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

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

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

## 相关工具

- [互补色工具](https://elysiatools.com/zh/tools/color-complement): 查找互补色并创建和谐的颜色方案，支持三元色、四色和类似色关系
- [色相偏移器](https://elysiatools.com/zh/tools/color-hue-shifter): 调整颜色色相并创建色相变化版本
- [颜色反转器](https://elysiatools.com/zh/tools/color-inverter): 反转颜色并创建负片版本，支持RGB、HSL和亮度反转方法
- [颜色饱和度调节器](https://elysiatools.com/zh/tools/color-saturate-desaturate): 调整颜色饱和度并创建饱和度变化版本
- [阴影色生成器](https://elysiatools.com/zh/tools/color-shade): 通过添加黑色生成颜色的深色变化，为设计提供深度和对比度
- [色调生成器](https://elysiatools.com/zh/tools/color-tint): 通过添加白色生成颜色的浅色变化，为设计创造明亮清新的色调
- [霓虹色生成器](https://elysiatools.com/zh/tools/neon-colors): 生成充满活力、发光的霓虹色，具有高饱和度和亮度，创造引人注目的电光效果，非常适合数字显示和现代设计
- [类似色工具](https://elysiatools.com/zh/tools/color-analogous): 生成和谐的类似色配色方案，使用色轮上相邻的颜色创造统一平静的组合

## 示例

- [颜色代码示例](https://elysiatools.com/zh/samples/color-code): 用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色）
- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换

## 相关内容

- [无障碍颜色系统设计工具](https://elysiatools.com/zh/hubs/color-design-tools): 通过颜色转换、配色生成、对比度与色觉检查，建立可复用的颜色系统并记录设计令牌。
- [色彩系统与 CSS 效果设计工作流](https://elysiatools.com/zh/hubs/design-generate): 从色板提取、配色关系、可访问性校验到 token 生成，再把 CSS 效果落到真实组件状态中。