pickr

业精于勤，荒于嬉。—— 韩 愈《进学解》

https://github.com/simonwep/pickr

Pickr：一个简单、多主题、响应式且可定制的颜色选择器库

在网页设计和前端开发中，颜色选择器是一个不可或缺的工具。虽然许多框架提供了内置的颜色选择器，但它们往往难以扩展或自定义。Pickr 是一个轻量级、无依赖的颜色选择器库，它提供了丰富的功能，同时完全兼容所有主流 CSS 框架。

---

什么是 Pickr？

Pickr 是一个开源的颜色选择器库，支持多种颜色格式（如 rgba、hsla、hsva 等），并提供多种主题和自定义选项。它专为现代前端开发设计，具有以下特点：

核心特点：

1. 无依赖：不依赖任何第三方库（如 jQuery）。
2. 多格式支持：支持 rgba、hsla、hsva、hex 和 CMYK 格式。
3. 多主题：内置多种主题样式，兼容主流 CSS 框架（如 Bootstrap、Materialize）。
4. 响应式设计：适配移动端和桌面端。
5. 自定义能力：可通过 JavaScript 和 CSS 轻松自定义外观和功能。
6. 支持透明度：包括 alpha 通道的选择。
7. 轻量级：小巧的体积，加载速度快。

---

使用场景

Pickr 适用于以下场景：

1. Web 表单
   为用户提供颜色选项，适合用于主题选择器或个性化设置。

2. 设计工具
   嵌入网页设计工具，支持多种颜色格式的输入和输出。

3. 实时预览
   提供实时颜色预览功能，适用于调色板和画布应用。

4. 跨框架项目
   由于它的无依赖特性，可以轻松集成到任何框架或纯 JavaScript 项目中。

---

快速上手指南

以下是使用 Pickr 的基本步骤：

1. 安装

通过 npm 安装 Pickr：

npm install @simonwep/pickr

或者通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr"></script>

2. 初始化 Pickr

在 HTML 文件中添加一个容器：

<div id="color-picker"></div>

使用 JavaScript 初始化：

const pickr = Pickr.create({
  el: '#color-picker',
  theme: 'classic', // 可选主题：classic、monolith、nano
  components: {
    preview: true,
    opacity: true,
    hue: true,
    interaction: {
      hex: true,
      rgba: true,
      hsla: true,
      input: true,
      save: true
    }
  }
});

---

高级功能

1. 自定义主题

Pickr 提供了三种内置主题：classic、monolith 和 nano。你也可以通过 CSS 自定义样式：

.pickr .pcr-button {
  background-color: #f00;
}

2. 支持事件监听

Pickr 提供多种事件回调函数，方便开发者处理颜色变化：

pickr.on('change', (color, instance) => {
  console.log('当前选中的颜色：', color.toRGBA().toString());
});

3. 支持透明度和渐变

通过 opacity 和 hue 模块，Pickr 支持透明度和颜色渐变的选择。

4. 设置默认值

你可以为 Pickr 设置初始颜色：

const pickr = Pickr.create({
  el: '#color-picker',
  default: 'rgba(255, 0, 0, 1)', // 设置默认颜色
  components: { /* 配置项 */ }
});

---

示例项目

以下是一些使用 Pickr 的实际应用场景：

• 主题生成器：提供实时颜色选择功能，帮助用户生成配色方案。
• 图片编辑器：集成到在线图片编辑工具中，用于选择绘画或字体的颜色。
• 前端框架集成：与 Bootstrap 或 Materialize 一起使用，增强表单功能。

---

社区与支持

Pickr 是一个活跃的开源项目，目前在 GitHub 上拥有 4395 个星标 和 287 个分支，受到开发者社区的广泛关注。你可以通过以下方式获取支持：

• 访问项目主页：GitHub 仓库
• 官方文档：Pickr 官方文档
• 提交 Issue：报告问题或提出新功能建议。
• 参与讨论：通过 GitHub Discussions 与社区互动。
• 贡献代码：通过 Pull Request 为项目做出贡献。

---

适用项目

Pickr 适合各种类型的项目，特别是在以下场景中表现出色：

1. 设计工具和编辑器：如 Photoshop、Canva 等在线设计工具。
2. 前端框架扩展：为 Bootstrap 或 Materialize 表单组件增加颜色选择功能。
3. 个性化网站：提供用户自定义主题和颜色的能力。

---

结语

Pickr 是一个功能强大且灵活的颜色选择器库。无论是简单的表单应用，还是复杂的网页设计工具，它都能提供高效的解决方案。如果你正在寻找一个轻量级、无依赖且易于使用的颜色选择器，不妨试试 Pickr！它将为你的项目增添色彩。