免费图片配色提取工具
直接从本地图片提取主色、HEX 色值和可复用配色 token,再去做设计评审或前端交接。
先在本地提取配色和 HEX,再做设计评审或前端交接。
关于这个工具:免费图片配色提取工具
Extract dominant colors and reusable HEX palette tokens from local images in the browser. 无需上传——全部处理都在你的浏览器本地完成,兼顾隐私与速度。
常见用法
- 做 UI token 交接时用 4-6 色就够,做情绪板时再开到 8 色。
- 工具会先在本地缩小预览图再采样,所以大图也能更稳更快。
从一张图片里取出真实配色
从作品本身取的配色,才会让页面看起来是「想过的」而不是「拼出来的」。先把真实颜色取出来,再从里面挑一两个当强调色,不要一次全用上。
做一套能用的配色
- 1
先取,再筛
提取器给的是「出现最多的颜色」,不是一套好配色。它们里大多数只是同一色调的近似值。
- 2
用之前先算对比度
当色卡好看的颜色,当文字可能根本读不清。要拿它和实际背景算一次对比度。
- 3
只留一个强调色
一个强强调色配中性色看起来是刻意设计;五个等权重颜色看起来是噪声。
取色常见问题
- 这能直接给我一套设计配色吗?
- 它给的是主色。选哪两三个来用属于设计决策,任何提取器都替不了你。
- 取出来的颜色准吗?
- 是从真实像素采样的,对「压缩后这张图」是准的,和原始素材可能略有差异。
- 图片会上传吗?
- 不会。取色在你的浏览器里完成,图片不会上传到任何服务器。
拖入文件或点击浏览
等待文件中
先添加一个文件再开始。
原始大小
-
颜色数量
-
主色
-
仅在浏览器本地处理,不上传。
提取出的调色板
等待文件中
CSS 变量
:root {
}调色板 JSON
[]
小提示
- 做 UI token 交接时用 4-6 色就够,做情绪板时再开到 8 色。
- 工具会先在本地缩小预览图再采样,所以大图也能更稳更快。
相关免费工具
Free Image Converter
Convert PNG, JPG, and WebP images locally in the browser for uploads, reviews, listings, and handoff.
Free JPG to PNG Converter
Convert JPG images to PNG locally in the browser for sharper screenshots, overlays, and design handoff.
Free WebP Converter
Convert images to or from WebP locally in the browser for smaller web assets and compatible downloads.
Free Transparent PNG Maker
Make a selected background color transparent and export a clean transparent PNG without uploading the image.
Related 3D guides and workspaces
- Photo to 3D ModelHow to shoot a photo that converts well, what fails, and what the GLB contains.
- 2D Image to 3D ModelPrepare illustrations, renders, and sprites, and know what the back side invents.
- 3D Pixel: Pixel-Aligned Image to 3DPixel-aligned criteria, source-image checks, and voxel/texel resolution for a GLB.
- 3D AI: AI 3D Model GenerationChoose between Pixal3D, Trellis 2, and Hunyuan Motion before spending credits.
- 3D Object CreatorWhich object classes convert well from one image, and how the presets steer the mesh.
- Image to MeshWhat the generated GLB geometry contains, and how to inspect and repair it.
- 3D Asset GeneratorThe handoff checklist for scale, textures, triangle budget, and engine import.
- 3D Printing AIGenerate a GLB from one photo, convert it to STL, and check it before slicing.
- Text to MotionDescribe an action and generate FBX motion plus motion JSON instead of a mesh.
- Image to 3D for ShopifyTurn a packshot into a GLB, inspect it, and test it on a product page.
- Image to 3D Model FreeExactly what a hosted job costs, and which browser tools need no account.
- Open Source Image to 3DWhich upstream models are public with their own licences, and what is hosted.
- AI Generated 3D ModelsWhat one image produces, and the checks to run before you use the result.
- Image to 3D Model GeneratorPixel-aligned image-to-3D with GLB preview, PBR textures, and motion output.
- AI Image Generator WorkspaceText-to-image, image-to-image, and photo editing in one hosted workbench.
- AI Video Generator WorkspaceSeedance 2.0 text-to-video, image-to-video, and reference-to-video.