色轮配色工具
色轮配色工具基于色彩理论，帮助设计师快速生成和谐的配色方案。工具提供 9 种配色模式，支持实时调整基础色，自动生成对应的色彩组合。
什么是色轮
色轮(Color Wheel)是一个圆形的色彩分布图，按照色相的顺序排列颜色。色轮将色彩空间可视化，帮助理解颜色之间的关系，是配色设计的重要工具。
色轮基于色彩理论，通过特定的几何关系（如互补色、类似色、三角色等）生成和谐的配色方案。
配色模式
互补色(Complementary)
选择色轮上相对位置的两种颜色，形成强烈对比。
配色数量：2 色
适用场景：需要突出重点、制造视觉冲击的设计，如按钮与背景、标题与正文的对比。
单色(Monochromatic)
基于同一色相，通过改变明度和饱和度生成的配色。
配色数量：多色
适用场景：简约设计、渐变效果、营造统一氛围。
类似色(Analogous)
选择色轮上相邻的颜色，形成柔和过渡。
配色数量：3-5 色
适用场景：自然和谐的配色，如风景设计、界面背景渐变。
分裂互补色(Split Complementary)
选择基础色的互补色两侧的颜色，比纯互补色更柔和。
配色数量：3 色
适用场景：需要对比但又不想过于强烈的设计。
三角色(Triad)
选择色轮上等距的三种颜色，形成活力感。
配色数量：3 色
适用场景：儿童产品、活泼风格设计、品牌视觉。
四角色(Tetradic)
选择色轮上形成矩形的四种颜色，色彩丰富。
配色数量：4 色
适用场景：复杂设计、多元素场景、信息可视化。
正方形(Square)
选择色轮上等距的四种颜色，比四角色更均衡。
配色数量：4 色
适用场景：需要均衡且丰富配色的设计。
复合色(Compound)
互补色的变体，增加更多色彩层次。
配色数量：多色
适用场景：复杂的设计项目，需要更多配色选择。
双分裂互补色(Double Split Complementary)
两组分裂互补色的组合，色彩更丰富。
配色数量：5 色
适用场景：复杂界面设计、多层次信息展示。
功能特点
工具提供交互式色轮，支持拖动选择基础色或输入十六进制颜色值。选择配色模式后，自动生成对应的和谐配色，并实时显示颜色的十六进制值和最接近的 Tailwind CSS 颜色名称。
点击生成的配色色块可快速复制颜色值，方便在设计软件或代码中使用。
使用方法
- 输入基础颜色的十六进制值，或使用色轮选择颜色
- 选择配色模式（互补色、类似色、三角色等）
- 查看自动生成的配色方案
- 点击颜色色块复制十六进制值
- 将配色应用到设计项目中
应用场景
品牌设计
为品牌定义主色、辅助色、强调色，确保配色和谐统一。
网页设计
快速生成网站配色方案，包括背景色、主题色、按钮色、链接色等。
UI 设计
为移动应用或桌面软件设计界面配色，保持视觉一致性。
平面设计
海报、宣传册、名片等平面设计的配色选择。
数据可视化
为图表、仪表盘选择区分度高且和谐的配色。
插画设计
为插画作品选择协调的色彩组合。
使用建议
选择合适的配色模式
需要强烈对比:使用互补色
需要和谐柔和:使用类似色或单色
需要活泼丰富:使用三角色或四角色
需要简约统一:使用单色
主次分明
使用多色配色方案时，明确主色、辅助色、强调色的层级关系，避免颜色权重相同造成视觉混乱。
调整明度和饱和度
色轮生成的配色是基础方案，实际应用时可能需要调整明度（亮度）和饱和度（鲜艳度）,以适应具体场景。
考虑无障碍
确保文本与背景色有足够对比度，参考 WCAG 标准，使用颜色对比度检查器验证。
测试不同屏幕
配色在不同屏幕、不同光线下可能呈现不同效果，建议在多种环境下测试。
注意事项
工具生成的配色方案是基于色彩理论的建议，实际应用时需根据品牌定位、目标用户、文化背景等因素调整。
色彩感知因人而异，特别是色盲色弱用户可能看到的效果与常人不同。设计时应考虑无障碍需求。
配色方案的选择应与设计目标、品牌调性、目标受众相符，避免为了配色和谐而忽略品牌特性。
常见问题
如何选择基础色$1
基础色通常是品牌主色或设计主题色。如果还没有确定，可以从目标情绪、行业特点、竞品分析等角度选择。例如蓝色代表专业可信，红色代表热情活力，绿色代表自然健康。
生成的配色不满意怎么办$2
可以尝试以下方法：
- 切换不同的配色模式
- 调整基础色的色相、明度、饱和度
- 微调生成的颜色以适应具体场景
- 结合多个配色方案，提取满意的部分
可以同时使用多种配色模式吗$3
可以。复杂项目可能需要更多配色选择，可以分别尝试不同模式，提取合适的颜色组合。
Tailwind CSS 颜色名称是什么$4
工具会显示生成颜色最接近的 Tailwind CSS 颜色名称（如 red-500、blue-300),方便使用 Tailwind CSS 框架的开发者快速应用配色。
配色方案中哪个颜色应该作为主色$5
通常基础色作为主色，其他颜色作为辅助色或强调色。具体选择取决于设计目标，建议主色占据 60%,辅助色 30%,强调色 10%。
如何应用到设计软件中$6
点击颜色色块复制十六进制值，然后粘贴到 Figma、Sketch、Adobe XD、Photoshop 等设计软件的颜色选择器中。大多数设计软件支持直接粘贴十六进制颜色值。
