最直接方式是使用，它提供原生UI并返回7位小写十六进制颜色值（如"#ff0000"），通过监听input事件可实时获取值用于筛选；但不支持透明度、HSV调节或视觉相似度计算，需借助delta-e等库转换至CIELAB空间进行Delta E比对。

怎么用 做基础筛选

直接用原生 是最轻量的方案，但它只返回十六进制颜色值（如 "#ff0000"），不提供 HSV/HSL 调节、透明度或取色器扩展能力。适合只需要让用户挑一个纯色、且你后续只做简单比对的场景。

常见错误是监听 change 事件却漏掉 input 事件——用户拖动滑块时不会触发 change，必须用 input 才能实时响应：

const colorInput = document.querySelector('input[type="color"]');
colorInput.addEventListener('input', (e) => {
  const hex = e.target.value; // 始终是7位字符串，如 "#a3c4ff"
  // 这里做筛选逻辑，比如匹配某组预设色卡
});

• 注意：该控件在 Safari 13.1+ 才支持，旧版 iOS/Safari 会退化为文本框
• 它不支持 alpha 通道，#rrggbbaa 或 rgba() 都会被自动截断或忽略
• 值始终以小写、7 字符格式返回（#abc → #aabbcc），比对前别用正则粗暴去“#”

怎么把颜色值转成可比较的数值（RGB → Lab / Delta E）

人眼对颜色差异的感知不是线性的。用 RGB 差值（Math.abs(r1-r2) + ...）做“相近色筛选”会出很多反直觉结果——比如 #ffffff 和 #fefefe 看起来几乎一样，但 RGB 差值可能比 #ff0000 和 #ee0000 还大。真要按视觉相似度筛选，得转 CIELAB 空间再算 Delta E。

推荐用轻量库 delta-e（仅 2KB）：

import { deltaE } from 'delta-e';
const lab1 = deltaE.rgb2lab([255, 0, 0]); // red
const lab2 = deltaE.rgb2lab([255, 30, 30]); // slightly desaturated red
const diff = deltaE.deltaE76(lab1, lab2); // 

• 别自己手写 RGB→Lab 转换，浮点精度和白点（D65）处理很容易出错
• deltaE76 足够日常用；追求更高精度可用 deltaE2000，但计算稍慢
• 输入 RGB 必须是 [0–255] 整数数组，parseInt(hex.slice(1,3), 16) 别忘了补零解析

怎么让筛选器支持多条件叠加（颜色 + 其他属性）

颜色筛选很少单独存在。更常见的是“选个蓝色系的、价格低于 200 的商品”。这时候别把颜色逻辑硬塞进 SQL WHERE 或前端 filter() 主流程，容易耦合、难调试。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

建议拆成独立函数，返回布尔值，并支持缓存中间结果：

const isColorMatch = memoize((hex, targetHueRange, maxSaturation) => {
  const [h, s, l] = rgbToHsl(hexToRgb(hex));
  return h >= targetHueRange[0] && h  
  isColorMatch(item.color, [180, 240], 60) && 
  item.price 

• 用 rgbToHsl 比直接比 HEX 更符合设计语义（比如“所有蓝色”对应 H∈[180,240]）
• 如果数据量大（>1000 条），提前把 item.color 对应的 HSL 存到对象上，避免每次重复计算
• 别在循环里调 document.getElementById 或重排版操作——颜色筛选本身应是纯函数

为什么用 Canvas 取色但总拿到模糊/偏色的像素

用 canvas.getContext('2d').getImageData(x,y,1,1) 取图上某点颜色，常遇到两个坑：图像被缩放、或启用了抗锯齿。

• Canvas 绘制图片时若没设置 imageSmoothingEnabled = false，浏览器会对像素做双线性插值，导致取到的不是原始色
• 用 img.width/img.height 设置 canvas 尺寸，但实际显示靠 CSS 缩放（如 width: 100%），此时 getPixel(x,y) 的坐标需按缩放比换算
• 部分图片含 ICC 配置文件，Canvas 默认忽略，导致 sRGB 和 Display P3 显示不一致（尤其 Mac 上）

安全做法是：先确保 canvas 尺寸与图片自然尺寸一致；禁用平滑；必要时用 ctx.webkitImageSmoothingEnabled = false 兼容旧版 Safari。

颜色筛选真正难的不是取值或比对，而是定义“什么是用户想要的相近”。设计师说的“莫兰迪色”，前端得拆成明度区间、饱和度上限、色相容忍度——这些业务规则一旦写死，就很难随设计迭代调整。留个配置入口，比写死一堆 if 更可持续。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！