星点 星点-颜色工具 本系列首页
关于
版本 v1.0.0

图片颜色工具(取色 / 主色 / 调色板 / 统计)

上传一张图片,即可点击取像素颜色、自动提取主色与调色板、统计各颜色占比,并进行颜色聚类与量化。全部在浏览器本地处理,图片不会上传。

图片颜色工具 · 工具介绍

从图片中获取颜色是设计与开发的常见需求。本工具提供四个子视图:取色、主色/调色板、颜色统计、聚类/量化。

“取色”支持在图片上点击任意位置读取像素颜色,配合放大镜与坐标显示,便于精确取色;“主色/调色板”使用中位切分(median cut)或 k-means 算法自动提取主要颜色。

“颜色统计”展示唯一颜色数、最常用颜色、背景色与前景色;“聚类/量化”可设置颜色数量,将图片压缩为指定数量的调色板并预览量化效果。

图片通过 Canvas 本地解码处理,大图自动降采样,支持中止,不上传任何图片数据。

图片颜色工具 · 功能特点

  • 点击图片取像素色,放大镜 + 坐标精确定位
  • 主色提取:中位切分(median cut)/ k-means 可选
  • 调色板数量可调,支持 HEX/RGB 复制
  • 颜色统计:唯一颜色数、占比、最常用、背景/前景
  • 颜色聚类与量化,可预览压缩后的图片
  • 支持 PNG/JPG/WebP/GIF/BMP/HEIC,大图降采样
  • 全程本地处理,图片不上传

图片颜色工具 · 使用方法

  1. 点击上传或拖拽图片到上传区;
  2. 在“取色”视图点击图片任意位置读取像素颜色,可开启放大镜;
  3. 切换到“主色/调色板”,设置颜色数量与算法后提取主色;
  4. 在“统计”视图查看颜色数量、占比与背景/前景色;
  5. 在“聚类/量化”视图设置颜色数并预览量化效果;
  6. 复制需要的颜色或调色板。

图片颜色工具 · 常见问题

Q:图片会上传吗?

不会。图片使用浏览器 Canvas 在本地解码与分析,全程没有任何上传行为。

Q:主色提取用什么算法?

默认使用中位切分(median cut),也可切换 k-means 聚类。算法会把像素颜色归并为指定数量的代表色,并按占比排序。

Q:大图会不会卡顿?

工具会先对图片降采样并限制采样点数量,像素超过阈值时自动抽样,处理可中止,避免大图卡顿。

Q:取色坐标准确吗?

预览图会按比例缩放显示,工具会把点击位置换算回原图像素坐标,因此取色位置与原始图片一致。

Q:支持 HEIC 图片吗?

支持。HEIC 会优先尝试浏览器解码,失败时使用内置 heic2any 转换;部分浏览器可能仍需系统先转换。

相关工具

继续使用本站其它颜色处理工具:

颜色选择器

色相/饱和度/明度面板取色,多格式实时同步与多点保存

打开工具

颜色格式转换

HEX/RGB/HSL/HSV/CMYK/LAB/XYZ/LCH/HWB/OKLab/OKLCH 互转

打开工具

配色方案生成器

按色彩关系生成单色/类似/互补/三角/四角等配色方案

打开工具

CSS 渐变生成器

可视化制作线性/径向/锥形渐变并复制 CSS

打开工具

对比度检测

WCAG AA/AAA 对比度检测,给出最佳文字色与替代色

打开工具

颜色调整

滑块实时调整亮度/饱和度/透明度/色相/明度/对比度

打开工具

批量颜色处理

批量转换/提取/替换/去重/排序颜色代码

打开工具

设计辅助

主色/辅助色/状态色 → UI 结构预览 + Design Token 导出

打开工具

专业色彩

LAB/OKLab/OKLCH 转换、DeltaE 色差、色温与色域分析

打开工具

色觉模拟

模拟多种色觉类型,检查图片与配色的可辨识度

打开工具

标准与色库

CSS/Material/Tailwind/Ant/品牌/传统色等色库查询复制

打开工具