# 四色组工具

生成四色组配色方案，四个颜色在色轮上形成矩形分布，创造丰富复杂的色彩关系

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

- **分类:** Design

- **关键词:** 颜色, 四色组, 矩形, 四色, 色彩和谐, 配色方案, 复杂关系, 互补色对

## 概述

四色组工具是一款专业的配色方案生成器。它基于您选择的基础颜色，在色轮上以矩形分布计算出另外三个颜色，从而创造出丰富、复杂且和谐的四色组合，适用于需要高对比度和视觉冲击力的设计项目。

## 输入项

- **基础颜色** (color)
- **矩形类型** (select)
- **色相调整（度）** (number): 矩形类型的自定义角度调整
- **饱和度调整** (number): 饱和度倍数（0.5-2.0）
- **亮度调整** (number): 调整亮度（-0.3到0.3）
- **包含基础颜色** (checkbox)
- **显示HEX代码** (checkbox)
- **显示RGB值** (checkbox)
- **显示HSL值** (checkbox)
- **生成颜色变体** (checkbox)

## 适用场景

- 当您需要为设计项目寻找一组既对比鲜明又和谐统一的四种颜色时。
- 当您想探索基于特定基础颜色的不同矩形分布（如互补色对、正方形）的配色方案时。
- 当您需要微调生成颜色的饱和度、亮度或色相，以获得更符合需求的精确色调时。

## 工作原理

- 选择或输入一个基础颜色（HEX、RGB或HSL格式）作为配色起点。
- 从预设的矩形类型中选择一种分布模式，如互补色对、矩形或正方形。
- 根据需要调整色相偏移、饱和度和亮度等参数，以微调生成的颜色。
- 工具即时计算并展示四个颜色的预览，以及它们的HEX、RGB、HSL代码。

## 使用案例

- 网页设计：为网站创建具有高视觉吸引力的主色、辅助色、强调色和背景色组合。
- 品牌视觉：为品牌标识或营销材料开发一套独特且富有表现力的四色色彩系统。
- UI/UX设计：为应用程序界面设计一套层次分明、对比清晰的配色方案，用于区分不同功能和状态。

## 常见问题

### 什么是四色组（Tetradic）配色方案？

四色组配色方案由色轮上呈矩形分布的四个颜色组成。它包含两对互补色，能创造出强烈、丰富且平衡的视觉效果。

### 工具提供哪些矩形类型？

提供四种类型：互补色对（90°+90°）、矩形（60°+120°）、正方形（四个90°角）以及允许自定义角度的类型。

### 如何调整生成的颜色？

您可以通过“色相调整”微调矩形角度，通过“饱和度调整”和“亮度调整”滑块来整体改变颜色的鲜艳度和明暗度。

### 可以将基础颜色也包含在最终方案中吗？

可以。勾选“包含基础颜色”选项后，生成的方案将包含您最初选择的颜色以及工具计算出的另外三个颜色。

### 如何获取生成颜色的具体代码？

工具默认会显示每个颜色的HEX、RGB和HSL值。您可以取消勾选对应的显示选项来隐藏不需要的代码格式。

## 相关工具

- [类似色工具](https://elysiatools.com/zh/tools/color-analogous): 生成和谐的类似色配色方案，使用色轮上相邻的颜色创造统一平静的组合
- [互补色工具](https://elysiatools.com/zh/tools/color-complement): 查找互补色并创建和谐的颜色方案，支持三元色、四色和类似色关系
- [颜色梯度生成器](https://elysiatools.com/zh/tools/color-gradient-generator): 在多种颜色之间生成平滑的颜色渐变，支持自定义步数和格式
- [色相偏移器](https://elysiatools.com/zh/tools/color-hue-shifter): 调整颜色色相并创建色相变化版本
- [颜色反转器](https://elysiatools.com/zh/tools/color-inverter): 反转颜色并创建负片版本，支持RGB、HSL和亮度反转方法
- [配色方案生成器](https://elysiatools.com/zh/tools/color-scheme-generator): 为设计项目生成专业的配色方案和调色板
- [阴影色生成器](https://elysiatools.com/zh/tools/color-shade): 通过添加黑色生成颜色的深色变化，为设计提供深度和对比度
- [分离互补色工具](https://elysiatools.com/zh/tools/color-split-complement): 生成分离互补色配色方案，使用基础色和其互补色两侧的相邻颜色创造和谐的对比效果

## 示例

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