Protocol Launcher 系列：Pika 取色器的协议控制（上篇）

在设计和开发工作中，颜色选取是日常高频操作。今天，我们为你介绍如何通过 Protocol Launcher 深度集成 Pika------这款 macOS 上广受欢迎的颜色选择器工具，实现颜色拾取、格式转换和快速复制的一站式体验。

作为设计师或开发者，你可能经常遇到这些场景：

• 需要从屏幕任意位置快速取色，并复制为特定格式（如 HEX、RGB）。
• 在设计系统中需要批量处理多种颜色格式。
• 想通过快捷键或脚本自动化颜色相关的工作流。

现在，通过 Protocol Launcher，你可以用类型安全的方式调用 Pika 的各项功能，让颜色工作流更加高效。

---

Pika 与深度链接

Pika 是 macOS 平台上的一款优秀颜色选择器，凭借其简洁直观的界面和强大的取色功能，赢得了众多设计师和开发者的青睐。

Pika 支持多种颜色格式，包括 HEX、RGB、HSB、HSL、LAB、OpenGL 和 OKLCH，并且提供了丰富的深度链接协议，允许外部应用直接触发取色、复制和格式切换等操作。

然而，手动拼接这些 pika:// 协议链接既繁琐又容易出错。Protocol Launcher 为你封装了所有这些细节。

---

核心能力：一站式颜色工作流

Protocol Launcher 为 Pika 专门提供了 protocol-launcher/pika 模块，支持以下核心功能：

1. 精确取色：支持分别选取前景色和背景色。
2. 系统取色器集成：快速调用 macOS 系统颜色选择器。
3. 一键复制：支持复制单个颜色或批量导出为文本或 JSON。
4. 格式切换：支持七种常用颜色格式的即时切换。

---

快速上手

首先，确保你的项目中已安装：

npm install protocol-launcher

在代码中你可以根据场景选择两种导入方式：

• 按需加载（通过子路径导入），支持 Tree Shaking，体积更小；
• 全量导入（从根包导入），写法更简单，但会引入所有已支持应用的逻辑。

// ✅ 推荐：按需加载 Pika 模块
import { pickForeground, copyForeground, setFormat } from 'protocol-launcher/pika'

// 也可以从根包导入，但会包含所有应用模块
// import { pika } from 'protocol-launcher'

---

取色功能（Pick）

Pika 提供了精确的取色功能，可以分别获取前景色和背景色。

场景一：选取前景色 (pickForeground)

前景色是当前活动的主要颜色，适用于大多数取色场景：

import { pickForeground } from 'protocol-launcher/pika'

const url = pickForeground()

场景二：选取背景色 (pickBackground)

背景色用于获取次要颜色或背景区域的值：

import { pickBackground } from 'protocol-launcher/pika'

const url = pickBackground()

---

系统取色器（System Picker）

如果你需要使用 macOS 原生的系统颜色选择器，Pika 也提供了深度集成支持。

场景三：调用系统前景色选择器 (systemForeground)

import { systemForeground } from 'protocol-launcher/pika'

const url = systemForeground()

场景四：调用系统背景色选择器 (systemBackground)

import { systemBackground } from 'protocol-launcher/pika'

const url = systemBackground()

---

复制功能（Copy）

Pika 支持多种复制方式，满足不同场景的需求。

场景五：复制前景色 (copyForeground)

import { copyForeground } from 'protocol-launcher/pika'

const url = copyForeground()

场景六：复制背景色 (copyBackground)

import { copyBackground } from 'protocol-launcher/pika'

const url = copyBackground()

场景七：复制所有颜色为文本 (copyText)

将前景色和背景色以可读文本格式复制到剪贴板：

import { copyText } from 'protocol-launcher/pika'

const url = copyText()

场景八：复制所有颜色为 JSON (copyJSON)

将颜色数据以结构化 JSON 格式导出，方便程序处理：

import { copyJSON } from 'protocol-launcher/pika'

const url = copyJSON()

---

格式切换（Change Format）

Pika 支持七种常用的颜色格式，Protocol Launcher 提供了统一的切换接口。

场景九：切换到 HEX 格式 (setFormatHex)

import { setFormatHex } from 'protocol-launcher/pika'

const url = setFormatHex()

场景十：切换到 RGB 格式 (setFormatRgb)

import { setFormatRgb } from 'protocol-launcher/pika'

const url = setFormatRgb()

场景十一：切换到 HSB 格式 (setFormatHsb)

import { setFormatHsb } from 'protocol-launcher/pika'

const url = setFormatHsb()

场景十二：切换到 HSL 格式 (setFormatHsl)

import { setFormatHsl } from 'protocol-launcher/pika'

const url = setFormatHsl()

场景十三：切换到 LAB 格式 (setFormatLab)

import { setFormatLab } from 'protocol-launcher/pika'

const url = setFormatLab()

场景十四：切换到 OpenGL 格式 (setFormatOpengl)

import { setFormatOpengl } from 'protocol-launcher/pika'

const url = setFormatOpengl()

场景十五：切换到 OKLCH 格式 (setFormatOklch)

import { setFormatOklch } from 'protocol-launcher/pika'

const url = setFormatOklch()

---

为什么选择 Protocol Launcher？

1. 类型安全与自动补全：TypeScript 智能提示确保你不会拼错协议名称，所有函数都有完整的类型定义。
2. 统一的 API 设计：无论是取色、复制还是格式切换，都使用一致的调用模式，学习成本极低。
3. 按需加载优化 ：采用了模块化设计，支持按需加载以最小化包体积：
   • 推荐方式 ：使用子路径导入（如 import { pickForeground } from 'protocol-launcher/pika'），这样构建工具只会打包相关的代码。
   • 全量方式 ：也可以从根包导入（如 import { pika } from 'protocol-launcher'），建议生产环境始终使用按需加载。

---

下篇预告

在下一篇文章中，我们将继续介绍 Pika 的更多高级功能，包括：

• Actions：颜色交换、撤销与重做
• Set Colour：通过协议直接设置颜色值
• History：历史记录的管理
• Window：窗口控制（关于、帮助、偏好设置）
• Appearance：外观模式切换（浅色、深色、系统）

---

🔗 相关链接

• Protocol Launcher 官网: https://protocol-launcher.huayi-data.com/
• Pika 模块文档: Pika | Protocol Launcher