# 色相偏移器

调整颜色色相并创建色相变化版本

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

- **分类:** Design

- **关键词:** 颜色, 色相, 偏移, 旋转, 色轮, 调节, 色调, 阴影, 色彩调整

## 概述

色相偏移器是一款专业的色彩调节工具，旨在帮助设计师和开发者通过旋转色轮轻松调整颜色色相，快速生成和谐的色彩方案或渐变序列。

## 输入项

- **基础颜色** (color)
- **调节类型** (select)
- **色相偏移量（度）** (range): 颜色旋转的色相偏移量（0°到360°）
- **渐变步数** (number): 仅在选择"渐变（全色轮）"时生效。控制色相渐变序列中生成的颜色数量（2-20步）
- **包含互补色** (checkbox)
- **保持亮度值** (checkbox)

## 适用场景

- 需要为品牌设计生成一系列互补或邻近的配色方案时。
- 在 UI 设计中需要快速创建同一色调的多种变体时。
- 需要将特定颜色进行色相旋转以适配不同视觉风格时。

## 工作原理

- 输入或选择一个基础颜色作为色彩调整的起点。
- 选择调节类型，如顺时针、逆时针旋转或生成全色轮渐变。
- 通过滑块精确设置色相偏移角度，并根据需要开启亮度保持或互补色生成。
- 点击生成即可获取调整后的色彩预览及详细数值。

## 使用案例

- 生成 UI 设计中的状态颜色（如成功、警告、错误状态的色相变体）。
- 创建具有视觉连贯性的品牌配色板，通过旋转色相获取和谐的辅助色。
- 为数据可视化图表生成一系列等距的色相序列，确保图表色彩区分度高。

## 常见问题

### 什么是色相偏移？

色相偏移是指在色轮上移动颜色的位置，从而改变颜色的基本属性（如将蓝色变为紫色或绿色）。

### “保持亮度值”选项有什么作用？

开启此选项后，工具会在调整色相的同时锁定颜色的明度，确保生成的颜色在视觉感知上具有一致的亮度。

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

在选择“渐变（全色轮）”模式时，您可以设置 2 到 20 步的渐变序列。

### 我可以自定义偏移角度吗？

可以，选择“自定义色相偏移”模式，即可通过滑块在 0° 到 360° 之间精确控制旋转角度。

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

工具支持标准的十六进制（Hex）颜色输入，并能实时输出调整后的色彩结果。

## 相关工具

- [类似色工具](https://elysiatools.com/zh/tools/color-analogous): 生成和谐的类似色配色方案，使用色轮上相邻的颜色创造统一平静的组合
- [互补色工具](https://elysiatools.com/zh/tools/color-complement): 查找互补色并创建和谐的颜色方案，支持三元色、四色和类似色关系
- [颜色反转器](https://elysiatools.com/zh/tools/color-inverter): 反转颜色并创建负片版本，支持RGB、HSL和亮度反转方法
- [颜色明暗调节器](https://elysiatools.com/zh/tools/color-lighten-darken): 调整颜色亮度并创建明暗变化版本
- [颜色饱和度调节器](https://elysiatools.com/zh/tools/color-saturate-desaturate): 调整颜色饱和度并创建饱和度变化版本
- [阴影色生成器](https://elysiatools.com/zh/tools/color-shade): 通过添加黑色生成颜色的深色变化，为设计提供深度和对比度
- [四色组工具](https://elysiatools.com/zh/tools/color-tetrad): 生成四色组配色方案，四个颜色在色轮上形成矩形分布，创造丰富复杂的色彩关系
- [色调生成器](https://elysiatools.com/zh/tools/color-tint): 通过添加白色生成颜色的浅色变化，为设计创造明亮清新的色调

## 示例

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