预设色

预设色模式在 12 列网格中展示 120 个固定色块。第一行从白色过渡到黑色，其余各行涵盖 12 种色相，由深色逐渐过渡到浅色。向 pencils 传入你自己的颜色字符串，就能替换这组颜色。如果需要带搜索的命名分组，请使用调色板模式。

结构

import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/pencils";
 
<ChromaPanel modes={["pencils"]} pencils={myColors} />;

不传 pencils 时使用内置的 120 色网格。如果想以它为基础修改，可以调用 defaultPencils()，它会以字符串数组的形式返回这 120 种颜色。这个函数只从主入口 chroma-panel 导出。

演示

"use client";
 
import { ChromaPanel } from "chroma-panel";
 
export default function ChromaPanelPencilsDemo() {
  return (
    <ChromaPanel
      defaultValue="#3366cc"
      modes={["pencils"]}
      showTitleBar={false}
      injectStyles={false}
    />
  );
}

模式 id

'pencils'。把它加入 modes 就会显示这个标签页，标签页的顺序与它们在 modes 中的顺序一致。