色轮配色器

关于色轮配色器介绍：

1、色轮配色器是一款基于经典色轮理论打造的在线配色工具：拖动色轮选定基准色，即可按类似色、三角色、互补色等六种配色法则一键生成和谐配色方案，并支持明度亮度微调、色块拖拽换基色、HEX/RGB/HSV/HSL 多格式色值复制与输入，帮助你快速找到美观协调的颜色搭配。

2、工具说明：

• 色轮取色：色轮平面同时编码两个颜色维度，指针在色轮上的角度位置决定色相（沿圆环 0-360 度分布），距圆心的距离决定饱和度（越靠边缘颜色越鲜艳饱满，越靠圆心颜色越接近纯白），点击或按住拖动即可精准选取基准色。
• 圆点标记：色轮上的大圆环为当前基准色标记，圆环内部实时填充实际颜色并随明暗调节变化；其余小圆点为当前配色法则下生成的衍生色，切换配色法则时小圆点会平滑移动到新的色相位置，直观展示各颜色在色轮上的角度关系。
• 六种配色法则：内置类似色（相邻约 30 度，柔和和谐）、三角色（等距 120 度，平衡活泼）、分裂互补色（150/210 度，强烈又不失协调）、互补色（正对 180 度，对比最强）、四色矩形（两对互补色构成矩形，丰富多变）与单色系（同一色相五级明度阶梯，干净统一）六种方案，覆盖从柔和到强烈的各类配色需求。
• 两种调节方式：系统统一调节模式下，全局「明度/亮度」滑块同步作用于所有色板，两个滑块按换算公式自动联动，拖动其一另一个实时跟随；手动单独调节模式下，每个色板拥有独立的明度亮度滑块，可对单个颜色单独微调；两种模式互相切换时颜色无缝继承，画面不跳变。
• 多格式色值：每个色板均提供 HEX、RGB、HSV、HSL 四种格式的色值展示与一键复制；顶部四个输入框同样支持对应格式的颜色输入，键入合法色值回车即可应用为新的基准色，反向换算自动完成。
• 本地运行：全部颜色计算均在浏览器本地完成，无需注册登录，不依赖任何服务器接口，不产生数据上传，打开即可使用。

3、工具使用说明：

• 选取基准色：在色轮上直接点击或按住拖动，色轮上出现大圆环标记，指针角度对应色相、离圆心距离对应饱和度，拖动过程中色值与色板实时刷新，松手即确定基准色。
• 输入指定颜色：在顶部 HEX/RGB/HSV/HSL 输入框中键入颜色值，例如 #FF5500、rgb(255, 85, 0)、hsv(20, 100%, 100%)、hsl(20, 100%, 50%) 等格式均可识别，按回车应用为基准色，按 Esc 放弃本次修改，非法输入会以红框提示并自动还原为原值。
• 切换配色法则：通过「配色法则」下拉框在六种方案之间切换，配色结果区的色板数量与布局会随法则自动调整，例如互补色显示两块大色板，四色矩形显示四色，单色系显示五级明度渐变条。
• 调节明暗层次：统一调节模式下拖动全局「明度/亮度」滑块，整体调整整套配色的明暗；切换到手动调节模式后，使用每个色板下方的独立滑块对单个颜色微调，适合拉开单个颜色的层次。
• 色板颜色设为基准：按住任意结果色块拖到色轮上方松开，即可把该颜色设为新的基准色重新生成方案，拖动过程中色轮会高亮并显示预落点提示；若按住后位移很小即松开，仍按点击处理，执行复制操作。
• 复制色值：点击色块主体复制 HEX 色值，点击色板下方 RGB/HSV/HSL 任意一行复制对应格式的完整色值字符串，可直接粘贴到设计软件、CSS 代码或文档中使用。
• 移动端使用：色轮与色板均支持触摸操作，手机上可直接拖动取色、拖拽换基色与点击复制。

4、适用场景：

• 网页与前端开发：为网站、落地页、专题页挑选主色与辅助色，生成的多格式色值可直接复制进 CSS，快速搭建和谐统一的界面配色体系。
• UI 与界面设计：App、后台管理系统、小程序的界面配色推演，借助三角色、互补色等法则快速确定按钮、标签、图表强调色与背景色的层级关系。
• 平面与品牌设计：LOGO、海报、宣传物料的主色调方案探索，单色系模式适合输出同一色相的品牌色阶，互补色模式适合需要强烈视觉冲击的促销物料。
• 插画与绘画创作：为插画作品建立统一色板，类似色方案适合柔和平静的场景，四色矩形方案适合元素丰富、对比鲜明的画面。
• 演示文稿与数据可视化：PPT 图表配色、报表与看板的数据系列配色，通过配色法则保证多组颜色既有区分度又不杂乱。
• 色彩理论学习：直观理解色相、饱和度、明度三要素的相互关系，以及六种配色法则在色轮上的几何分布规律，适合设计入门者随拖随学。