图片取色器：上传照片点一下，颜色代码随手就复制

设计师和前端同学最常做的一件事，就是从一张图上「吸」个颜色出来。这个工具上传图片后，鼠标划到哪就实时显示哪的颜色，点一下直接锁住，HEX、RGB、HSL 三种色值一次给全，旁边还有放大镜帮你按像素精确定位。先看成品，再讲怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把「图片取色」做成一个纯本地处理的单页工具：

• 上传本地图片：直接拖入或选择图片，不上传服务器，私密图也能用。
• 实时预览颜色：鼠标在图片上移动，取色框跟着更新，实时显示当前像素颜色。
• 点击锁定：点一下锁定任意像素，不再跟着鼠标漂移。
• 三种色值：HEX、RGB、HSL 同时显示，并且都支持一键复制。
• 局部放大镜：把鼠标附近放大，方便对准细小文字或渐变边缘。
• 最近 10 色：取过的颜色自动存成色板，翻历史不用再吸一次。
• 配色推荐：锁定某色后，自动推荐互补色、类似色、三色等 5 组常见配色。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

1. 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

开发一个「图片取色器」单文件网页应用：上传本地图片后，鼠标在图片上移动实时预览颜色，点击锁定任意像素的颜色，同时显示 HEX、RGB、HSL 三种色值并支持一键复制；提供局部放大镜方便精确定位，保存最近取过的 10 个颜色色板，并推荐几组常见配色。界面简洁美观，所有代码写在一个 index.html 里。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这次项目里的实际动作：

• 创建一个单文件 index.html 项目，把图片加载、Canvas 采样、色值换算、放大镜和配色推荐全部写进去，没有任何第三方依赖。
• 探测到 3002 端口空闲后起服务并自检，给出内部预览地址。
• 输出里把「鼠标移动取色」和「点击锁定」拆成两条交互链路，锁定后自动触发配色推荐和最近色板更新。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. Canvas 坐标换算，取到鼠标下的真实像素

图片显示尺寸和原始像素不一定一致，getPixel 先按 canvas.width / rect.width 算出缩放比例，再把鼠标位置换算回原图坐标，用 getImageData 取那一个像素的红绿蓝：

function getPixel(e){
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / rect.width, scaleY = canvas.height / rect.height;
    const x = Math.floor((e.clientX - rect.left) * scaleX);
    const y = Math.floor((e.clientY - rect.top) * scaleY);
    if(x < 0 || y < 0 || x >= canvas.width || y >= canvas.height) return null;
    const d = ctx.getImageData(x, y, 1, 1).data;
    return { r: d[0], g: d[1], b: d[2], x, y };
}

2. RGB → HSL 的换算函数

颜色代码里 HSL 对设计师更友好，代码用标准公式把 RGB 转成 HSL，色相按 360 度、饱和度和明度按百分比输出：

function rgbToHsl(r, g, b){
    r /= 255; g /= 255; b /= 255;
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    let h = 0, s = 0, l = (max + min) / 2;
    if(max !== min){
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      if(max === r) h = (g - b) / d + (g < b ? 6 : 0);
      else if(max === g) h = (b - r) / d + 2;
      else h = (r - g) / d + 4;
      h /= 6;
    }
    return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

3. 锁定颜色后抽最近色板 + 触发推荐

lockColor 同时填充 HEX / RGB / HSL 三处结果，调用 addRecent 把颜色加入最近 10 色，再 renderPalettes 生成 5 组推荐配色：

function lockColor(r, g, b){
    lockedColor = { r, g, b };
    const hex = rgbToHex(r, g, b), rgb = `rgb(${r}, ${g}, ${b})`, hsl = rgbToHslStr(r, g, b);
    lockedBox.innerHTML = `<div class="locked-swatch" style="background:${hex}"></div>`;
    valHex.textContent = hex; valRgb.textContent = rgb; valHsl.textContent = hsl;
    addRecent(hex);
    renderPalettes(r, g, b);
}

4. 最近 10 色去重 + localStorage 记忆

addRecent 先把同名颜色去掉再插到最前，超过 10 个就截断，最后写进 localStorage，刷新页面还在：

function addRecent(hex){
    hex = hex.toUpperCase();
    recent = recent.filter(c => c !== hex);
    recent.unshift(hex);
    if(recent.length > 10) recent = recent.slice(0, 10);
    localStorage.setItem('colorpicker_recent', JSON.stringify(recent));
    renderRecent();
}

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-image-color-picker

总结

图片取色器把「从图上吸颜色」压成一个纯前端的页面：getPixel 先做 Canvas 坐标换算再 getImageData 采样，rgbToHsl 用标准公式补上 HSL，锁定后一次性刷新三处结果并触发配色推荐，最近 10 色走 localStorage 去重记忆。整个过程没有第三方依赖，图片也不上传服务器。后续可以再接从剪贴板粘贴图片、导出色板为 JPG/JSON，或支持多张图片对比取色。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz