关键信息
- 分类
- 设计与颜色
- 输入类型
- color, select, number, checkbox
- 输出类型
- html
- 样本覆盖
- 3
- 支持 API
- Yes
概览
四色组工具是一款专业的配色方案生成器。它基于您选择的基础颜色，在色轮上以矩形分布计算出另外三个颜色，从而创造出丰富、复杂且和谐的四色组合，适用于需要高对比度和视觉冲击力的设计项目。
适用场景
- •当您需要为设计项目寻找一组既对比鲜明又和谐统一的四种颜色时。
- •当您想探索基于特定基础颜色的不同矩形分布（如互补色对、正方形）的配色方案时。
- •当您需要微调生成颜色的饱和度、亮度或色相，以获得更符合需求的精确色调时。
工作原理
- •选择或输入一个基础颜色（HEX、RGB或HSL格式）作为配色起点。
- •从预设的矩形类型中选择一种分布模式，如互补色对、矩形或正方形。
- •根据需要调整色相偏移、饱和度和亮度等参数，以微调生成的颜色。
- •工具即时计算并展示四个颜色的预览，以及它们的HEX、RGB、HSL代码。
使用场景
网页设计：为网站创建具有高视觉吸引力的主色、辅助色、强调色和背景色组合。
品牌视觉：为品牌标识或营销材料开发一套独特且富有表现力的四色色彩系统。
UI/UX设计：为应用程序界面设计一套层次分明、对比清晰的配色方案，用于区分不同功能和状态。
用户案例
1. 为科技博客设计醒目配色
网页设计师- 背景原因
- 设计师正在为一个科技博客重新设计界面，希望配色方案既现代专业，又能突出关键内容，如标题、按钮和链接。
- 解决问题
- 需要一组对比强烈但不刺眼的颜色，用于区分页面不同区域并引导用户视线。
- 如何使用
- 选择一个稳重的深蓝色作为基础颜色，矩形类型选择“互补色对（90°+90°）”，生成方案。
- 示例配置
-
基础颜色：#2563EB（深蓝），矩形类型：互补色对（90°+90°），包含基础颜色：是。 - 效果
- 生成了以深蓝为基础，搭配亮橙色、蓝绿色和紫红色的四色方案。深蓝用于主导航，亮橙色用于主要行动按钮，蓝绿色用于次级标题，紫红色用于链接悬停状态，整体视觉层次清晰。
2. 生成品牌活力配色板
品牌设计师- 背景原因
- 一个新兴的健身应用需要一套充满活力且平衡的配色，用于其App图标、营销海报和社交媒体素材。
- 解决问题
- 品牌希望颜色能传达能量、健康与和谐，避免使用单一的高饱和度颜色造成视觉疲劳。
- 如何使用
- 以充满活力的橙色为基础，选择“正方形”矩形类型，并略微降低整体饱和度，使颜色更柔和耐看。
- 示例配置
-
基础颜色：#F97316（橙色），矩形类型：正方形（90°+90°+90°+90°），饱和度调整：0.8。 - 效果
- 获得了一组包含橙色、青绿色、紫色和黄绿色的配色板。四种颜色在色轮上均匀分布，既保持了活力与对比，又因饱和度调整而显得更加协调高级，完美契合品牌调性。
用 Samples 测试
design相关专题
常见问题
什么是四色组（Tetradic）配色方案？
四色组配色方案由色轮上呈矩形分布的四个颜色组成。它包含两对互补色，能创造出强烈、丰富且平衡的视觉效果。
工具提供哪些矩形类型？
提供四种类型：互补色对（90°+90°）、矩形（60°+120°）、正方形（四个90°角）以及允许自定义角度的类型。
如何调整生成的颜色？
您可以通过“色相调整”微调矩形角度，通过“饱和度调整”和“亮度调整”滑块来整体改变颜色的鲜艳度和明暗度。
可以将基础颜色也包含在最终方案中吗？
可以。勾选“包含基础颜色”选项后，生成的方案将包含您最初选择的颜色以及工具计算出的另外三个颜色。
如何获取生成颜色的具体代码？
工具默认会显示每个颜色的HEX、RGB和HSL值。您可以取消勾选对应的显示选项来隐藏不需要的代码格式。