分类

← View All Tools

色相偏移器

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

关键信息

分类: Design
输入类型: color, select, range, number, checkbox
输出类型: html
样本覆盖: 2
支持 API: Yes

概览

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

适用场景

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

工作原理

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

使用场景

生成 UI 设计中的状态颜色（如成功、警告、错误状态的色相变体）。

创建具有视觉连贯性的品牌配色板，通过旋转色相获取和谐的辅助色。

为数据可视化图表生成一系列等距的色相序列，确保图表色彩区分度高。

用户案例

1. 生成品牌辅助色板

UI 设计师

背景原因: 设计师需要为品牌主色（蓝色）寻找一组和谐的辅助色，用于界面中的次要按钮和图标。
解决问题: 手动调整色相容易导致色彩不协调，且难以保持亮度一致。
如何使用: 输入品牌主色 #4A90E2，选择“渐变（全色轮）”模式，设置步数为 5，并勾选“保持亮度值”。
示例配置: baseColor: #4A90E2, adjustmentType: gradient, steps: 5, preserveValue: true
效果: 工具生成了 5 个亮度一致、色相均匀分布的蓝色系变体，完美适配 UI 设计需求。

2. 创建互补色方案

前端开发者

背景原因: 开发者正在构建一个深色模式的仪表盘，需要为高亮色寻找对应的互补色以增强对比度。
解决问题: 需要快速获取精确的互补色，并确保其在深色背景下依然清晰可见。
如何使用: 输入基础颜色，选择“自定义色相偏移”，设置偏移量为 180°，并勾选“包含互补色”。
示例配置: baseColor: #4A90E2, adjustmentType: custom, adjustmentValue: 180, includeComplementary: true
效果: 成功获取了与基础色对比强烈的互补色，提升了界面的视觉层次感。

用 Samples 测试

design

颜色代码示例

用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色）

title token color

sample

PDF示例

2026-02-01 到 2026-02-10 工具生成的PDF示例

task generate

sample

常见问题

什么是色相偏移？

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

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

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

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

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

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

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

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

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

API 文档

请求端点

POST /zh/api/tools/color-hue-shifter

请求参数

参数名	类型	必填	描述
baseColor	color	是	-
adjustmentType	select	是	-
adjustmentValue	range	否	颜色旋转的色相偏移量（0°到360°）
steps	number	否	仅在选择"渐变（全色轮）"时生效。控制色相渐变序列中生成的颜色数量（2-20步）
includeComplementary	checkbox	否	-
preserveValue	checkbox	否	-

响应格式

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

HTML: HTML

AI MCP 文档

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

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

分类