HexPickr

HexPickr

5秒极速提取图片中的OKLCH与Tailwind色彩方案

0点赞
2026-01-12
HexPickr screenshot 1
点击查看大图
HexPickr screenshot 2
点击查看大图
HexPickr screenshot 3
点击查看大图
HexPickr screenshot 4
点击查看大图
HexPickr screenshot 5
点击查看大图
HexPickr screenshot 6
点击查看大图

全面介绍

HexPickr:5秒极速提取图片中的OKLCH与Tailwind色彩方案

告别猜测,拥抱精准。HexPickr是一款为现代开发者打造的色彩提取工具,它能将任何图片瞬间转化为生产就绪的代码资产,支持Tailwind配置、CSS变量和前沿的OKLCH/OKLAB格式。

✨ 从真实摄影到可用代码,我们历经两个月精心打磨,只为帮你跨越设计与开发之间的色彩鸿沟。

💡 为什么选择 HexPickr?

传统HEX拾色器已无法满足现代广色域(P3)屏幕和精准设计系统的需求。HexPickr为此而生:

  • 面向未来:原生支持OKLCH/OKLAB色彩空间,提供更符合人眼感知、更均匀的色彩。
  • 开箱即用:一键导出Tailwind v4 配置、CSS自定义属性和JSON,代码可直接复制到项目中。
  • 精准高效:智能分析图片中的主色调,最多可提取24种主导色,并提供精确的HEX、RGB、HSL值。
  • 简单直接:无需注册,拖放图片即可开始使用,整个过程不超过5秒。

🎯 只需三步,完成转换

  1. 上传图片:支持拖放、粘贴或点击上传。兼容 PNG、JPG、WebP、AVIF、SVG 格式,单文件最大5MB。
  2. 提取主色:工具将自动分析并展示图片中的核心色彩板,您也可以手动调整提取的颜色数量。
  3. 复制与导出:点击即可复制单个色值,或一键导出完整的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。

产品评分

暂无评分
登录后即可评分
访问官网

相关产品