适合使用
- 从商品图、截图或设计稿中提取主色。
- 在图片预览上悬停读取实时颜色。
- 复制 HEX、RGB、HSL 或 CSS 变量格式。
TUXIA 图匣工具
图片配色提取工具
从图片中提取主色，并在预览图上悬停读取实时 HEX、RGB、HSL 颜色值，适合设计取色、品牌配色和前端开发。
主色提取
悬停取色
复制格式
色彩分析
提取配色并实时取色
上传图片后查看 6 色配色，移动鼠标即可读取并复制实时颜色值。
拖拽图片到这里，或 点击选择文件
PNG、JPG、WebP
悬停取色
移动鼠标查看颜色
图片取色板
从上传图片中提取主色，点击色块即可复制。
点击色块或复制按钮即可复制当前格式。
工具指南
图片配色提取工具指南和常见问题
从图片中提取主色，并在预览图上悬停读取实时 HEX、RGB、HSL 颜色值，适合设计取色、品牌配色和前端开发。
图片取色图片配色提取HEX取色RGB取色HSL取色在线取色器TUXIA
色彩是视觉设计中最有力的元素之一，从图片中提取合适的颜色可以为品牌配色、网站主题或 UI 组件库提供灵感。TUXIA 的图片取色工具兼具两大功能：通过对主色调和颜色分布的分析，从上传图片中提取一组有代表性的 6 色配色板；同时在图片预览上提供实时悬停取色，读取光标所在位置的精确像素颜色。颜色以四种格式展示——HEX（如 #3B82F6）、RGB（rgb(59, 130, 246)）、HSL（hsl(217, 91%, 60%)）和 CSS 自定义属性（--color: #3B82F6）——每种格式均可一键复制。配色板和取色功能完全在浏览器中运行，你的图片不会上传。
使用场景
品牌色提取
上传 Logo、主视觉图或情绪板照片，提取定义品牌视觉特征的主色调，将 HEX 值直接复制到品牌规范文档或 CSS 变量文件中。
UI 与网页设计
从头图、插画或产品照中提取配色，为按钮、强调色、背景和文字创建与主打图片自然协调的界面配色方案。
艺术与摄影分析
通过提取和对比配色来研究艺术作品、摄影或设计参考的色彩构成，理解专业图片如何平衡冷暖色调、饱和度和对比度。
与其他方案比较
浏览器扩展和专用取色器应用可以从屏幕任意位置采样，跨应用工作流更强大。但 TUXIA 的工具将配色提取和实时像素取色集成在一个无需安装的工作区中。对于精细色彩分级、ICC 配置文件管理或印刷色空间（CMYK），Adobe Color 或 Capture One 等专业工具更为合适。
技术说明
- HEX 格式（#RRGGBB）是网页和 CSS 中使用最广泛的颜色格式，每对字符分别代表红、绿、蓝的十六进制值。
- RGB 格式以 0-255 的红绿蓝数值表示颜色，便于 JavaScript 和 Canvas 编程操作。
- HSL 格式（色相、饱和度、亮度）对设计师更直观——色相是色轮角度 (0-360)、饱和度是色彩强度 (0-100%)、亮度是明暗 (0-100%)。
- 如果图片颜色范围较窄，提取的配色板可能出现相近色，要获得多样配色请使用色彩丰富、变化多样的图片。
最佳实践
- 按工作流程在 HEX、RGB 和 HSL 间切换——前端开发者常用 HEX，UI 设计师更偏好 HSL，Canvas/JS 开发者用 RGB。
- 构建完整配色方案时使用「复制全部」按钮一键获取六个配色。
- 颜色采样准确性取决于你的浏览器和显示器校准，颜色在其他屏幕上可能呈现不同效果。
- 提取配色板前先用悬停取色检查兴趣区域的像素颜色，验证后再正式提取。
使用方式
- 上传图片并生成配色板。
- 在预览图上移动鼠标，查看当前位置颜色。
- 切换颜色格式，复制单个颜色或整组配色。
常见问题
支持哪些颜色格式？
支持 HEX、RGB、HSL 和 CSS 变量格式。
可以读取鼠标位置的颜色吗？
可以。上传图片后在预览区域悬停即可看到当前位置颜色。