在 AI 编程大赛中，色彩提取与配色是视觉设计类题目常见的应用场景。用户上传图片后，需要快速获取图片中的某个像素颜色，并自动提取主要色调生成调色板，以指导设计或为 AI 模型生成主题颜色。与传统取色工具不同，项目要求纯前端实现，所有图像处理在浏览器内完成，不依赖后端服务。
在开发过程中，我们参考了一些现有的在线取色和色卡提取工具，借鉴了它们在用户界面设计和功能实现方面的优点。
本项目旨在实现一个纯 HTML + JS + CSS的取色与调色盘生成工具，要求界面友好、功能完整，支持用户交互式取色并展示主要颜色及深浅变化。
-
图片上传与显示
- 用户通过文件选择器或拖放方式上传本地图像文件。支持常见格式（JPG/PNG/WebP）。
- 显示上传的图片并自动适配画布尺寸（保持比例）。
-
像素取色
- 用户点击图像任意位置时，系统读取该像素的 RGB/HEX 值，并在信息栏显示。
- 提供复制按钮，便于将色码复制到剪贴板。
- 若浏览器支持 EyeDropper API，可提供"屏幕取色"按钮，使用户在整个屏幕范围选色。
-
主要颜色提取
- 系统自动分析图像，提取主要颜色，使用改进的聚类算法根据图像内容自适应确定颜色数量（通常在5-16个之间）。
- 提取算法需尽可能还原图像的主要色调，并输出每个颜色所占的比例（以百分比表示）。
- 支持按照占比大小、色相值等方式排序。
-
色卡展示
- 生成的主色以色块方式展示，显示对应 HEX 值和（可选）中文/英文色名。根据用户设置显示或隐藏色占比。
- 当用户点击某个色块时，工具显示该颜色的深浅变化表格，类似菜鸟工具的色卡，从 0 %（原色）到 100 %（全黑），按 10 % 步长生成 11 个色块，并标注百分比及 HEX 值。
-
调色板导出
- 提供"下载色卡"功能，将生成的调色板绘制到隐藏 canvas 并导出为 PNG 图像，以便用户保存。
-
界面设置与反馈
- 控制面板提供参数设置：
- 调色板组成模式：例如平均色调、突出明亮色、排除极暗色等（可拓展）。
- 颜色格式：HEX、RGB、HSL 等，可同时显示或单独显示；可选择是否显示颜色名称。
- 显示颜色占比：勾选时在色卡上显示百分比。
- 提供清除/重新上传按钮重置界面。
- 控制面板提供参数设置：
-
色彩理论辅助（扩展）
- 类似 Adobe Color 的色轮调和功能：当用户选择一个基色时，提供相似色、互补色、三元色等组合建议。
- 对比检查器：检测颜色组合的对比度，提示是否满足 WCAG 2.1 无障碍标准。
- 色盲模拟/色盲友好主题：模拟不同色觉缺陷下的配色效果，以辅助配色设计。
- 纯前端实现：所有运算（上传、像素读取、色彩分析）在浏览器内完成，不向服务器上传图像或数据。
- 浏览器兼容性：支持现代桌面浏览器（Chrome、Firefox、Safari）；在支持 EyeDropper API 的浏览器启用全屏取色功能，否则自动隐藏该按钮并提供 Canvas 点击取色方案。
- 性能要求：对于不超过 5 MB、分辨率不超过 4000×4000 的图片，色彩分析应在 1 秒内完成；大文件可提示用户压缩。必要时使用 Web Worker 处理色彩计算，避免阻塞 UI。
- 用户体验：界面简洁易用；重要操作提供提示或反馈（如加载进度、错误提示）。
- 隐私安全：所有处理在本地执行，不留存用户图片数据。
- 响应式设计：页面在桌面和移动设备上都能良好显示，布局自适应。
- 可国际化：界面文本使用语言包，默认中文，可扩展英文。
- 用户访问网页，看到文件上传区域和控制面板。
- 用户上传图片 → 前端使用 FileReader 读取并绘制到 canvas。
- 用户可以：
- 在画面上点击取色：获取鼠标位置像素颜色，显示 HEX/RGB。可继续点击查看不同像素。
- 点击"生成调色板"：根据设置的提取数量及模式分析图片，生成主要颜色列表和对应比例，并展示为色卡；用户可再次点击某个色卡查看深浅变化表格。
- 使用"屏幕取色"（若浏览器支持 EyeDropper）在整个屏幕任意位置选取颜色。
- 用户根据需要调整参数或重新上传图片。
- 可下载生成的色卡图或复制单个颜色代码。
| 模块 | 描述 |
|---|---|
| 文件上传区 | 包括"选择文件"按钮和拖放区域；显示当前已上传图片名称；支持粘贴/拖拽上传。 |
| 图片显示区 | 使用 HTML <canvas> 渲染上传的图片；监听鼠标点击事件读取像素颜色。 |
| 控制面板 | 包含参数设置（调色板模式、提取颜色数量、排序方式、显示占比、颜色格式等）；支持切换语言。 |
| 信息栏 | 显示当前点击颜色的 HEX、RGB 值，并提供复制按钮；显示提取出的主要颜色列表。 |
| 调色板显示区 | 展示主色列表及对应比例；点击色卡可展开深浅变化表格；提供下载和清除按钮。 |
| 色轮与对比工具（扩展） | 显示色轮和调和模式，允许用户基于一个颜色选择相邻色、互补色等组合，并显示对比度结果。 |
-
读取图像并绘制到 Canvas
- 使用
<input type="file">配合FileReader异步读取图片文件，在onload事件中将文件内容传入Image对象并绘制到<canvas>。 - 加载图片到 canvas 后可以使用
getImageData()读取像素信息。
- 使用
-
点击取色
- 为
<canvas>添加click事件监听，根据鼠标点击坐标(x,y)调用getImageData(x,y,1,1)获取单个像素的 RGBA 值并转换为 HEX/RGB 字符串。 - 在支持 EyeDropper API 的浏览器中，创建
const eyedropper = new EyeDropper();，调用eyedropper.open()即可启用系统取色器，将返回的sRGBHex结果显示给用户。
- 为
-
主要颜色提取算法
- 流程包括：加载图像→提取像素→构建 RGB 数组→颜色量化。
- 颜色量化可使用中值切割(Median Cut)或K-Means算法。中值切割的步骤为：
- 找出 RGB 中范围最大的通道（最大值与最小值差）；
- 按该通道值对像素排序并平分为两组；
- 对每组递归执行步骤 1 和 2 直到达到所需的颜色数；
- 计算每组像素的平均颜色作为调色板颜色。
- 可在前端实现简化版算法，或使用成熟库例如 ColorThief、Vibrant.js，这些库使用聚类算法提取主要颜色，效果稳定且性能佳。
- 计算每个颜色的占比：统计每个聚类中像素数量占全部像素的比例。
- 如果启用 Web Worker，则可将颜色量化运算放到独立线程，避免阻塞主线程。
-
色卡与深浅变化生成
- 主色生成后，通过 DOM 渲染出多个色卡元素，每个元素包含色块、HEX 值以及 (可选) 比例和颜色名称。
- 当用户点击某个主色卡时，计算该颜色的渐变色表。可按以下方式生成 11 个深浅变化：
- 浅色(tints)：用原色与白色按不同比例混合（例如
tint = (1−p)*color + p*white，p依次为 10 %、20 %、…）； - 深色(shades)：用原色与黑色按不同比例混合。
- 浅色(tints)：用原色与白色按不同比例混合（例如
- 将深浅变化排列成表格， 并标注每个色块的百分比及 HEX 值。
-
导出调色板图像
- 使用另一个
<canvas>绘制生成的调色板图形，包括色块、文本和比例，调用toDataURL('image/png')获取数据 URL，并通过<a download>触发下载。
- 使用另一个
-
界面与交互
- 使用现代框架（如 Vue/React）或原生 JS + CSS Flex 布局，实现响应式界面；使用 CSS 变量管理主题色。
- 所有动态数据状态（图片、颜色列表、设置参数）应在前端维护；用户刷新页面时清空。
- 提供实时反馈：颜色复制成功提示、分析进度条、错误处理（例如图片格式不支持）。
-
色轮调和方案
- 根据所选基色计算相似色、互补色、三元色等配色方案。可以将基色转换到 HSL 空间，根据色相位置 ±30°、±60° 等计算相邻色，模仿 Adobe Color 的色轮调和功能。
- 使用一个圆形色轮 SVG 展示基色和推荐色，用户可以拖动基色标记改变选择。
-
对比检查与色盲模拟
- 对比度检查：依据 W3C 的 WCAG 2.1 标准计算文本与背景颜色的对比度，并用图标提示是否符合 AA/AAA 要求。
- 色盲友好主题：使用算法模拟常见色觉缺陷（如 Deuteranopia、Protanopia），在色卡下方展示模拟效果，或在配色建议中标注哪些组合更适合色盲用户。
-
颜色名称映射
- 构建一个颜色名称数据库，通过计算主色与列表中颜色的欧氏距离，找出最接近的名称，为用户提供更具语义的参考。
-
云端保存（非必须）
- 若后期允许结合后端，可提供登录和云端保存配色方案的功能。但本次比赛要求纯前端实现，可暂不实现。
- 浏览器兼容性：EyeDropper API 目前支持性有限；应检测支持与否，必要时提供替代方案。
- 性能问题：色彩量化算法对大尺寸图像耗时较长，可通过缩放缩略图、采样像素、使用 Web Worker 等方式优化。
- 颜色感知差异：不同颜色空间转换可能产生误差；同时，人眼对于亮度敏感，算法需兼顾感知均衡，避免生成的主色过暗或过浅。
- 视觉设计：界面需避免色彩干扰，确保取色区与调色板区分明确；同时注意无障碍性与响应式布局。
本项目在参考现有工具的基础上，实现了以下创新点：
-
自适应颜色提取算法：
- 采用改进的K-means聚类算法进行颜色提取，能够根据图像内容自动调整提取的颜色数量
- 通过计算图像颜色分布的熵值来衡量复杂度，动态确定最适合的颜色数量
- 实现了颜色相似度阈值控制，避免提取过多相似颜色
-
智能采样优化：
- 采用智能采样策略，在保证颜色提取准确性的同时提高处理性能
- 可配置采样率，平衡处理速度和结果准确性
-
响应式色卡展示：
- 实现了多行自适应布局的色卡展示，确保在不同屏幕尺寸下都能完整显示色卡
- 色卡设计具有良好的交互体验，支持点击选择和查看详情
-
AI协同开发模式：
- 采用AI编程方式实现快速原型开发和迭代优化
- 通过人机协同的方式，快速实现复杂功能并进行多次优化
-
纯前端实现的高性能处理：
- 所有图像处理操作均在浏览器端完成，保护用户隐私
- 优化算法性能，确保在各种设备上都能流畅运行
本项目是基于 AI 编程实现的图像取色与色卡提取工具。在开发过程中，我们采用了以下技术和方法：
- 使用AI编程模型辅助开发
- 通过网页端+IDE的协同 AI Vibe Coding实现
- 开发过程中，编程者进行了多次 prompt 提示修改优化和测试
- 开发者名字为：木人
这种AI协同开发方式大大提高了开发效率，使得项目能够在短时间内完成复杂的功能实现和界面优化。
通过分析现有在线取色和色卡提取工具，我们设计并实现了一个功能完整、界面友好的纯前端图像取色与色卡提取工具。该工具不仅具备基础的取色和调色板生成功能，还引入了自适应颜色提取算法、智能采样优化等创新点。所有处理都在浏览器端完成，兼顾了用户隐私和使用体验。该工具适合用于设计辅助、教育和日常使用等场景。