# 阴影色生成器

通过添加黑色生成颜色的深色变化，为设计提供深度和对比度

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

- **分类:** Design

- **关键词:** 颜色, 阴影, 变暗, 黑色, 深度, 对比度, 变化, 更深, 影子, 色调

## 概述

阴影色生成器是一款专业的设计辅助工具，通过在基础颜色中添加黑色或调整色彩空间参数，快速生成一系列深浅不一的阴影变化，帮助设计师轻松构建具有深度和视觉对比度的配色方案。

## 输入项

- **基础颜色** (color)
- **阴影方法** (select)
- **阴影数量** (number): 生成多少个阴影变化
- **阴影强度** (number): 最大暗度（0.1-1.0）
- **步长分布** (select)
- **自定义步长值** (text): 逗号分隔的值（例如：0.1,0.3,0.5,0.7,0.9）
- **包含原始颜色** (checkbox)
- **显示HEX代码** (checkbox)
- **显示RGB值** (checkbox)
- **显示HSL值** (checkbox)
- **生成扩展调色板** (checkbox)

## 适用场景

- 为 UI 界面设计按钮悬停状态或阴影效果时
- 需要为品牌色创建完整的深色调色板时
- 在进行数据可视化设计，需要区分不同层级的数据颜色时

## 工作原理

- 输入或选择您的基础颜色（Base Color）。
- 选择阴影生成方法（如线性、HSL 或 LAB 色彩空间）并设置阴影数量。
- 调整阴影强度和步长分布，以控制颜色变暗的节奏。
- 点击生成，即可获取包含 HEX、RGB 和 HSL 值的完整色板。

## 使用案例

- 创建一致的 UI 组件状态（如悬停、点击、禁用状态的颜色）。
- 为数据图表生成具有层级感的深色系配色方案。
- 快速生成品牌设计的辅助深色调，增强视觉层次感。

## 常见问题

### 什么是阴影方法？

阴影方法决定了颜色变暗的算法。例如，线性方法直接添加黑色，而 LAB 或 HSL 方法则在特定的色彩空间内调整亮度，能产生更自然的视觉过渡。

### 步长分布有什么作用？

步长分布决定了颜色变暗的速率。指数分布会让颜色在后期变暗更快，而对数分布则在初期变化更明显，适合不同的视觉需求。

### 我可以自定义阴影的深浅吗？

可以，通过设置“阴影强度”参数，您可以控制生成的颜色最大暗度，或者使用“自定义步长”输入具体的数值序列。

### 工具支持导出哪些格式？

工具会直接在页面展示生成的颜色，并提供 HEX、RGB 和 HSL 代码，方便您直接复制到设计软件或代码中使用。

### 生成的颜色可以直接用于 CSS 吗？

完全可以，生成的 HEX 和 RGB 代码可以直接粘贴到 CSS 样式表中作为背景色、边框色或阴影颜色使用。

## 相关工具

- [类似色工具](https://elysiatools.com/zh/tools/color-analogous): 生成和谐的类似色配色方案，使用色轮上相邻的颜色创造统一平静的组合
- [颜色梯度生成器](https://elysiatools.com/zh/tools/color-gradient-generator): 在多种颜色之间生成平滑的颜色渐变，支持自定义步数和格式
- [色相偏移器](https://elysiatools.com/zh/tools/color-hue-shifter): 调整颜色色相并创建色相变化版本
- [颜色明暗调节器](https://elysiatools.com/zh/tools/color-lighten-darken): 调整颜色亮度并创建明暗变化版本
- [颜色饱和度调节器](https://elysiatools.com/zh/tools/color-saturate-desaturate): 调整颜色饱和度并创建饱和度变化版本
- [配色方案生成器](https://elysiatools.com/zh/tools/color-scheme-generator): 为设计项目生成专业的配色方案和调色板
- [分离互补色工具](https://elysiatools.com/zh/tools/color-split-complement): 生成分离互补色配色方案，使用基础色和其互补色两侧的相邻颜色创造和谐的对比效果
- [四色组工具](https://elysiatools.com/zh/tools/color-tetrad): 生成四色组配色方案，四个颜色在色轮上形成矩形分布，创造丰富复杂的色彩关系

## 示例

- [颜色代码示例](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 效果落到真实组件状态中。