颜色选择器工具

关于 颜色选择器工具

取色器是一款在浏览器里运行的在线拾色工具，能把你选中的一种颜色，一次性输出成 HEX、RGB、HSL、HSV、CMYK、OKLCH 等 10 种格式，并支持屏幕吸管取色、图片取色、配色方案生成和 WCAG 对比度检测。做外贸独立站和跨境电商的设计师、前端开发者常常为了一个颜色值来回切换三四个网站：查印刷用的 CMYK 要开一个站，转 OKLCH 要开一个站，测无障碍对比度又要再开一个。ToolsPivot 取色器把这些拆散在各处的功能集中到一个页面，全程在本地完成，不上传任何数据，也无需注册。

ToolsPivot 取色器概述

核心功能

ToolsPivot 取色器的核心，是把一个颜色转换成设计与开发所需的全部格式。工具内部用高精度的 HSV 浮点值作为唯一数据源，所有显示格式都由它实时换算，只在输出时才做四舍五入，因此拖动滑块反复调整也不会出现 HEX 与 HSL 互转时常见的数值漂移。你可以拖动饱和度／明度方块配合色相、透明度滑块取色，也可以直接输入 HEX、rgb() 或 CSS 颜色名，还能用系统吸管从屏幕任意像素取色。需要把颜色转成十六进制代码时，也可以搭配 RGB转HEX工具快速核对结果。

目标用户与使用场景

取色器最常被外贸独立站团队、UI／UX 设计师、跨境电商美工和前端开发者使用。设计师用它统一主图与详情页的品牌配色，前端用它取得可直接粘贴进 CSS 的颜色值，美工则从竞品截图或产品实拍里提取配色灵感，其中竞品截图可用网页截图工具抓取。对做包装、宣传单页印刷的卖家来说，工具给出的 CMYK 近似值可以在设计阶段就预估印刷效果，减少打样返工。

问题与解决方案

大多数免费取色器只给 HEX、RGB、HSL 三种格式，缺少 CMYK、OKLCH、对比度检测和图片取色。这意味着一次完整的配色工作往往要在多个工具之间来回跳转，颜色值还容易在复制粘贴中出错。取色器把 10 种格式、配色方案、色阶变化、对比度检测、图片取色和 CSS 渐变整合在同一界面，一次取色即可拿到所有需要的输出，配色效率明显提升。

取色器的主要优势

• 10 种格式一次输出：HEX、HEX8、RGB、RGBA、HSL、HSLA、HSV、CMYK、OKLCH 加最接近的 CSS 命名色，每种都能一键复制，无需再开转换网站。
• 内置对比度检测：直接给出两色的 WCAG 对比度比值及 AA、AA-Large、AAA 是否通过，把无障碍检查并入取色流程。做前端时可配合文章可读性检测工具一起把控页面阅读体验。
• 支持屏幕吸管：调用浏览器原生 EyeDropper，可从屏幕上任意窗口取色，不局限于当前网页。
• 图片取色带调色板：上传图片后点击任意像素取色，并自动生成主色调色板，省去单独的取色软件。
• 数值不漂移：内部高精度值保证滑块反复调整也不失真，复制出的代码始终准确。
• 完全本地运行：所有色彩运算在浏览器内完成，不上传、无需账号，隐私有保障。

取色器的核心功能

• 取色面板：饱和度／明度方块加色相、透明度滑块，实时预览，并附黑白文字可读性示例。
• 格式网格：10 种格式并排展示，每格独立复制，另有直接输入框方便粘贴已有颜色值。
• 配色方案：一键生成互补色、邻近色、三角色、四角色、分裂互补色和单色配色，快速搭出成套色板。
• 色阶变化：提供 Tint（加白）、Shade（加黑）、Tone（加灰）三条变化条，方便做深浅层次。
• 对比度检测：输入前景与背景两色，即时得出 WCAG 比值与合规等级。
• 图片取色：基于 canvas 的 getImageData 逐像素采样，配合自动调色板提取。取色前如需压缩大图，可先用图片压缩工具处理。
• CSS 渐变生成：加入第二种颜色，设定角度与线性／径向类型，直接导出可用的 CSS 渐变代码，粘贴进样式表前可用CSS压缩工具精简。
• 颜色收藏：常用色存入 localStorage，下次访问依然保留。
• 命名色匹配：自动从 148 个 CSS 标准命名色中找出最接近的关键字，方便写语义化样式。
• OKLCH 支持：基于 OKLab 变换输出感知均匀的现代 CSS 颜色，适配新一代浏览器。

ToolsPivot 取色器的使用方法

• 选定颜色：拖动取色方块和色相滑块，或直接输入 HEX、rgb() 与 CSS 颜色名，也可点开吸管从屏幕取色。
• 复制格式：在格式网格里找到需要的格式，点击右侧复制按钮即可粘贴使用。
• 生成配色：在配色方案区选择互补、三角等方案，得到成套色板。
• 检查对比度：把前景与背景两色放入对比度检测，确认是否达到 WCAG AA 或 AAA。
• 导出渐变或收藏：需要渐变就添加第二色并复制 CSS，常用色点击收藏留待下次使用。

何时使用取色器

当你需要精确获取、转换或搭配颜色，而手头工具又给不全所需格式时，取色器就是最合适的选择。它尤其适合从设计稿到上线代码的整个链路，帮你在一个页面里完成取色、转换与校验。以下场景最能体现它的价值：

• 统一独立站配色：确定品牌主色后一次导出全部格式，供设计与开发共用。
• 准备印刷物料：把屏幕色转成 CMYK 近似值，预估电商包装或宣传单页的印刷效果。做产品图前也常搭配图片尺寸调整工具统一规格。
• 提取竞品配色：上传竞品主图或截图取色，快速复刻小红书、抖音上流行的视觉风格。
• 核对无障碍标准：为海外市场页面检查文字与背景对比度，满足可访问性要求。
• 写现代 CSS：取得 OKLCH 值，用于支持广色域的前端项目。
• 制作图标与素材：取好主色后再用Favicon生成器生成站点图标。

如果你只是偶尔查一个颜色代码，工具同样够用；而在需要成套配色、批量转换或团队协作时，它的整合优势会更加明显。

实际应用案例

外贸独立站品牌配色

背景：一家做家居用品的外贸独立站要在 Shopify 站点上统一按钮、标题与背景色。

操作流程：

• 用吸管从品牌 logo 取出主色，得到 HEX 与 OKLCH 值。
• 生成邻近色与单色配色，确定辅助色与背景色。
• 把前景文字与背景色放入对比度检测，确认通过 WCAG AA。

效果：全站配色一次定稿，设计与前端共用同一份颜色规范，改版返工大幅减少。导出的代码在在线HTML编辑器里即可实时预览。

跨境电商详情页与印刷

背景：一位亚马逊卖家要让详情页的主视觉与实体包装印刷色保持一致。

操作流程：

• 从详情页设计稿取出主色的 HEX 值。
• 读取工具给出的 CMYK 近似值，交给印刷厂做参考。
• 用色阶变化生成深浅版本，用于不同尺寸的包装元素。

效果：屏幕与印刷的色差在打样阶段就被预估到位，减少了一轮返样成本。相关产品图可先用在线图片裁剪工具处理构图。

前端组件的可访问性调整

背景：一名前端要为面向欧美用户的后台系统调整文字与控件配色，满足无障碍要求。

操作流程：

• 取出现有主题色，读取 OKLCH 值以便微调明度。
• 逐组检测文字与背景的对比度比值。
• 对未通过 AA 的组合，用色阶条调深或调浅后复测。

效果：关键界面全部达到 WCAG AA，改动直接以 CSS 变量落地，布局阶段还可用占位图生成工具先撑起版面，样式表可再用JS压缩工具一并优化构建体积。

内容创作者的视觉素材配色

背景：一位小红书博主想让封面图配色统一、辨识度高。

操作流程：

• 上传一张满意的旧封面，点击取色并生成主色调色板。
• 用互补色方案定出标题与点缀色。
• 复制 CSS 渐变代码，用于图文模板背景。

效果：系列封面形成统一视觉记忆点，还能用图片素描效果工具做风格化处理。若需要把文字排进图里，可配合文字转图片工具快速出图。

10 种颜色格式该怎么选

不同格式对应不同用途，选对格式能避免颜色在屏幕与印刷之间失真。HEX 和 RGB 是网页标准，适合日常前端开发；带 8 位的 HEX8 和 RGBA 用于需要透明度的场景。HSL 与 HSV 以人更好理解的色相、饱和度方式描述颜色，方便手动微调。CMYK 是印刷近似值，适合包装与单页设计参考，但屏幕的 sRGB 色域和印刷有天然差异，最终仍以打样为准。OKLCH 是感知均匀的现代 CSS 格式，在调整明度时视觉过渡更自然，适合广色域项目。若要把小图标内联进 CSS，还能配合图片转Base64工具生成 data URI。

核心要点：

• 网页开发：优先用 HEX、RGB，需要透明度时用 RGBA 或 HEX8。
• 印刷参考：看 CMYK 近似值，正式生产以打样为准。
• 现代前端：用 OKLCH 获得更均匀的明度过渡。

无障碍配色与 WCAG 对比度

WCAG 对比度衡量文字与背景之间的明暗差异，直接决定内容是否清晰可读。标准要求正文文字对比度至少达到 4.5∶1（AA 级），大号文字为 3∶1，更严格的 AAA 级正文则需 7∶1。对做外贸独立站的团队来说，欧美市场对网站可访问性的要求日趋严格，欧盟《无障碍法案》已对相关数字服务提出合规要求，提前用对比度检测把关能降低后续整改成本。ToolsPivot 取色器把检测直接嵌进取色流程，取色的同时就能看到是否达标，不必再跳到第三方工具。

核心要点：

• AA 正文：对比度不低于 4.5∶1。
• AA 大字：18px 加粗或 24px 以上，达到 3∶1 即可。
• AAA 正文：要求更高，达到 7∶1。

常见问题