
点击查看大图

点击查看大图

点击查看大图

点击查看大图

点击查看大图

点击查看大图
全面介绍
HexPickr:5秒极速提取图片中的OKLCH与Tailwind色彩方案
告别猜测,拥抱精准。HexPickr是一款为现代开发者打造的色彩提取工具,它能将任何图片瞬间转化为生产就绪的代码资产,支持Tailwind配置、CSS变量和前沿的OKLCH/OKLAB格式。
✨ 从真实摄影到可用代码,我们历经两个月精心打磨,只为帮你跨越设计与开发之间的色彩鸿沟。
💡 为什么选择 HexPickr?
传统HEX拾色器已无法满足现代广色域(P3)屏幕和精准设计系统的需求。HexPickr为此而生:
- 面向未来:原生支持OKLCH/OKLAB色彩空间,提供更符合人眼感知、更均匀的色彩。
- 开箱即用:一键导出Tailwind v4 配置、CSS自定义属性和JSON,代码可直接复制到项目中。
- 精准高效:智能分析图片中的主色调,最多可提取24种主导色,并提供精确的HEX、RGB、HSL值。
- 简单直接:无需注册,拖放图片即可开始使用,整个过程不超过5秒。
🎯 只需三步,完成转换
- 上传图片:支持拖放、粘贴或点击上传。兼容 PNG、JPG、WebP、AVIF、SVG 格式,单文件最大5MB。
- 提取主色:工具将自动分析并展示图片中的核心色彩板,您也可以手动调整提取的颜色数量。
- 复制与导出:点击即可复制单个色值,或一键导出完整的CSS变量、Tailwind配置和JSON文件。
🛠 输出示例:立即可用的代码
HexPickr生成的代码旨在无缝集成到您的工作流中:
CSS 变量 (含OKLCH)
:root {
--color-1: #BEA883;
--color-1-oklch: oklch(0.725 0.054 65.8);
/* ... */
}
Tailwind 配置片段
theme: {
extend: {
colors: {
\"color1\": \"#FEFEFE\",
/* ... */
}
}
}
🌈 了解 OKLCH:现代色彩工作流的核心
OKLCH是一种基于人类视觉感知的色彩模型,相比传统的RGB/HSL,它能提供更均匀的亮度变化和更准确的色彩表现,特别适合构建可访问、可维护的设计系统。
- 感知均匀:调整明度(L)时,所有色相的视觉亮度变化一致。
- 面向未来:完美支持Display P3等广色域,解锁更多鲜艳色彩。
- 开发友好:CSS现已原生支持
oklch()函数,可直接在项目中使用。
📋 计划与功能
HexPickr提供免费和付费计划,以满足不同用户的需求。
- 免费版:每日5次提取,无广告,支持所有导出格式。
- Pro 月付/年付:无限制提取、永久去广告、保存调色板历史记录、优先获取更新。
所有计划均支持导出CSS变量、Tailwind配置和JSON。
产品评分
暂无评分
登录后即可评分
















