交互式色轮，内置互补、类比、三角、分裂互补、四方配色方案浏览器与调色演示，适合美术教师与学生。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
#368CE2色轮上正相对的两种颜色（间隔 180°）。对比最强——互相衬托，使对方更鲜艳。
混合两个配色颜色，实时预览混色结果。
#8C8C8C这个工具能做什么
为美术教师和学生设计的课堂级交互色轮。在 360° HSL 色轮上点击任意 位置选取基准色，立即查看该颜色的互补色、类比色、三角配色、分裂 互补色或四方配色，每种方案以清晰标注的色块展示。每种配色类型 都附有简短的中文说明，方便教师当场解释配色规则，无需离开页面 查阅资料。
内置调色器可将任意两个配色颜色按可拖动的比例混合，实时预览混色 结果，非常适合演示红色+蓝色=紫色，或互补色互混趋向灰色的效果。 调节色相、饱和度、亮度滑块，可在色轮上移动，观察配色关系如何在 不同明暗变化下保持稳定。
每个色块均显示 HEX 色号并支持一键复制，方便学生将调色结果直接 用到 Canva、PowerPoint 或设计作业中。当前色轮状态（选中颜色、 配色类型、调色设置）会自动编码到页面 URL，分享一个链接即可把 预设好的色轮发给全班学生。
100% 浏览器本地运行：不上传图片、不需注册、不追踪用户数据，加载 后可离线使用。
工具细节
- 输入
- 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 22 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 教师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
课堂色轮 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
用课堂投影仪讲互补色对比
美术教师在投影上打开色轮，选取一个鲜亮的红色，切换到「互补色」， 让学生猜对面会出现什么颜色。色轮立即验证答案。接着沿 360° 拖动 色相选择器，学生抢答互补色，十分钟互动，零准备材料。
让每个学习小组从不同基准色出发，探索三角配色
课前为每组配置不同色相（A 组 0°、B 组 40° 等），切换到三角配色， 复制各自的 URL。学生打开链接，记录三个三角配色颜色，课后汇总 比较：虽然基准色不同，每组的三个色块始终等间距分布，用具体例子 强化了配色背后的几何规律。
演示混色，展示互补色为何趋向灰色
将基准色设为橙色（#FF8C00），切换到互补色，将调色比例从 0% 拖到 50%。学生看着预览色从橙色经过棕色趋向灰色，两种互补色互相抵消。 这是颜料混色演示的数字替代方案：不需要清理，适配任何设备， 演示可随时暂停并分享 URL。
隐私说明
所有颜色计算完全在浏览器本地完成。颜色数据、URL、使用记录均不会 发送到任何服务器。选取的色相、配色类型和调色设置仅存储在页面 URL 中以便分享，不会被追踪或保存到其他地方。无需注册账号。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。