图片配色提取
图片配色提取可以自动从图片中提取主要配色（代表色），帮助你快速生成可用的调色板。上传照片或设计图后，工具会分析整张图片，提取至多 12 种代表色，并显示每种颜色的占比（在图片中所占的比例）。
将图片拖到这里
或
支持 PNG / JPG / WebP / GIF / BMP / SVG（最大 20MB）。.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg
相关工具
取色器
从图片中提取颜色并获取颜色代码的免费取色器，可用放大镜按像素精确拾取，支持 HEX / RGB / HSL 切换与调色板导出。免费、无需注册。
- 设计/配色
- 效率
配色生成器
只需选择一种基础色，即可基于配色理论自动生成互补色、类似色、三角配色等配色方案的免费在线配色工具。可导出为 CSS 变量、Tailwind、SCSS、JSON 格式，并能查看对比度参考，全程在浏览器中完成。
- 生成器
- 设计/配色
颜色代码转换
在 HEX、RGB、HSL、HSV、OKLCH 颜色代码之间相互转换的免费工具，支持透明度（RGBA、8 位 HEX）与 CMYK 参考值，一键复制任意格式，全程在浏览器中完成。
- 转换
- 设计/配色
对比度检查器
实时计算前景色与背景色对比度的免费颜色对比度检查器，判定 WCAG 2.1/2.2 AA、AAA 是否达标，并支持达标色建议、色盲（色觉）模拟与 APCA，全程在浏览器中完成。
- 检查
- 设计/配色
- 无障碍
CSS 渐变生成
通过可视化界面调整颜色、方向和色标，即可自动生成 CSS 渐变代码的免费在线工具。支持线性、径向、圆锥（conic）渐变，可调整不透明度，并能导出为 CSS 变量、Tailwind、SCSS 格式，还支持分享 URL。复制即用，全程在浏览器中完成。
- 生成器
- 开发
- 设计/配色
CSS 阴影生成
box-shadow 生成器，拖动滑块即可实时生成 CSS 阴影（box-shadow、drop-shadow）。支持多图层、inset 内阴影，以及新拟态、长阴影、发光等预设，可导出为 CSS、CSS 变量、Tailwind、SCSS。还支持分享 URL，全程在浏览器中完成。
- 生成器
- 设计/配色
图片配色提取是什么?
图片配色提取可以自动从图片中提取主要配色（代表色），帮助你快速生成可用的调色板。上传照片或设计图后，工具会分析整张图片，提取至多 12 种代表色，并显示每种颜色的占比（在图片中所占的比例）。
提取的颜色可在 HEX（#RRGGBB）、RGB、HSL 三种格式之间切换查看，并支持一键复制。你可以选择提取的颜色数量（4–12 种），并将整套调色板导出为 JSON、CSS 变量、SCSS 或 Tailwind 配置，直接用于网站或设计规范。此外，可通过提取模式（主色优先 / 平衡 / 点缀色优先）选择提取策略，控制面积小但鲜明的点缀色保留多少。
与每次只取一个像素颜色的"拾色器"不同，本工具会从整张图片中生成最能代表配色平衡的颜色。上传的图片不会发送到服务器，配色提取全程在浏览器中完成。免费使用，无需注册。
使用方法
- 拖放想要分析的图片，或点击选择文件上传。
- 工具会从整张图片中自动提取代表色，并以调色板形式显示每种颜色的占比。
- 选择"提取模式"（主色优先 / 平衡 / 点缀色优先），控制保留多少面积小但鲜明的点缀色。
- 选择"提取的颜色数量"（4–12 种），即可按该数量重新提取配色。
- 在 HEX / RGB / HSL 之间切换颜色代码格式，点击任意颜色即可复制。
- 使用"导出配色"将整套调色板复制为 JSON、CSS 变量、SCSS 或 Tailwind。
使用场景
- 需要从照片或设计图确定配色的网页设计师与前端工程师，可将提取的代表色直接用作 CSS 变量或 Tailwind 配置。
- 希望从参考网站或截图分析配色平衡的 UI/UX 设计师。
- 需要从产品照片或品牌素材中提取主色（基础色、强调色）以制作配色规范的品牌负责人。
- 想快速了解插画或照片整体色调的插画师与摄影师。
- 希望根据参考图片快速统一文档或幻灯片配色的商务用户。
注意事项
- 代表色通过 median-cut（中位切分）颜色量化算法计算得出。即使是同一张图片，改变提取的颜色数量也会使各颜色的数值和占比发生变化。
- 相近的颜色（色差很小的颜色）会被合并，因此实际显示的颜色数量可能少于所选数量。
- 可通过提取模式（主色优先 / 平衡 / 点缀色优先）切换权重：点缀色优先更易保留面积小但鲜明的颜色，主色优先则偏向占面积大的颜色。
- 为加快提取速度，图片会在内部缩小后再进行分析，因此占比仅供大致参考。
- 颜色以 sRGB 色彩空间处理。广色域（如 Display P3）图片会以转换为 sRGB 后的数值显示。
- 透明度较高（接近全透明）的像素会被排除在代表色之外。
- 如需逐像素获取颜色，请使用"拾色器"。本工具适用于生成整张图片的代表色。