# color-map 中文文档 规范地址：https://npmcn.com/package/color-map/ 版本：2\.3\.1 npm 元数据更新时间：2026-11-03T08:15:44.333Z 中文译文更新时间：2026-11-03T08:43:17.093Z 软件包许可：MIT 本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/color-map 原文对照：https://npmcn.com/package/color-map/?lang=original 项目主页：https://github.com/cyberuni/color-map 源码仓库：https://github.com/cyberuni/color-map ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.1 MB，356 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>= 20\.19 - 运行依赖：0 个 - 首次发布：2017-01-08T19:41:57.869Z - 最新版本发布：2026-11-03T08:15:43.817Z - 已发布版本数：38（近 12 个月 6 个） ## 中文简介 颜色地图生成器和颜色工具包：一个库，一个CLI和一个代理技能 ## 安装 ```sh npm install color-map ``` 也可以使用：`pnpm add color-map`、`yarn add color-map`、`bun add color-map` ## README # 彩色地图 [![NPM version](https://img.shields.io/npm/v/color-map.svg?style=flat)](https://npmjs.org/package/color-map) [![NPM downloads](https://img.shields.io/npm/dm/color-map.svg?style=flat)](https://npmjs.org/package/color-map) [![Github NodeJS](https://github.com/cyberuni/color-map/actions/workflows/pull-request.yml/badge.svg)](https://github.com/cyberuni/color-map/actions) [![Codecov](https://codecov.io/gh/cyberuni/color-map/branch/main/graph/badge.svg)](https://codecov.io/gh/cyberuni/color-map) [![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Visual Studio Code](https://img.shields.io/badge/vscode-ready-green.svg)](https://code.visualstudio.com/) 没有依赖的彩色地图生成器。 灵感来自 [`colormap`](https://github.com/bpostlethwaite/colormap)。 ## 图书馆 ```ts import { parse, toCss, convert, semanticPalette, toTailwindTheme } from 'color-map' toCss(convert(parse('#3b82f6'), 'oklch')) // oklch(0.62308 0.18801 259.81453) toTailwindTheme(semanticPalette({ brand: '#3b82f6', mode: 'light' })) // an @theme { ... } block ``` `color-map` 重新导出子路径 `color-map/color`， `color-map/scale`， `color-map/palette` 和 `color-map/tokens`． 使用捆绑器时，根路径消耗的字节数与子路径相同。在没有捆绑器的情况下运行的代码可以导入子路径以减少加载。看到 [库文件](https://cyberuni.github.io/color-map/library/) 获取完整的API。 ## 遗留的API 原始API存在于 `color-map/legacy`． 根 `color-map` 仍然在2中导出它。X，标记为deprecated，并在3.0中停止。 ### `createColors(from, to, shades, alpha?)` ```ts import { createColors } from 'color-map/legacy' // creates array of [r,g,b,a] const rgbaRange = createColors([0, 0, 255], [0, 255, 128], 72, [0, 1]) // creates array of [r,g,b,1] const rgbRange = createColors([0, 0, 255], [0, 255, 128], 72) ``` ### `rgbHex(rgb)` ```ts import { rgbHex } from 'color-map/legacy' rgbHex([0, 128, 255]) // '#0080ff' rgbHex([0, 128, 255, 0.3]) // '#0080ff' ``` ### `rgbaString(rgba)` ```ts import { rgbaString } from 'color-map/legacy' rgbaString([0, 128, 255, 0.2]) // 'rgba(0,128,255,0.2)` ``` ### `createColorsFromMap(colormap, shades, alpha?)` ```ts import { createColorsFromMap, ColorMap } from 'color-map/legacy' const summer: ColorMap = [{ index: 0, rgb: [0,128,102] }, { index: 1, rgb: [255,255,102] }] const colors = createColorsFromMap(summer, 60) ``` `createColorsFromMap` 弃用。使用 `createGradient` 而不是: ```ts import { createGradient } from 'color-map' const colors = createGradient(['rgb(0 128 102)', 'rgb(255 255 102)'], 60, { in: 'srgb' }) ``` 它返回通道从0到1的颜色对象，而不是整数。看到 [梯度](https://cyberuni.github.io/color-map/library/#gradients) 看完整的食谱。 ## 这个 `color-map` 命令 该包附带了一个代理命令，不需要额外的安装和运行时依赖： ```sh npx color-map palette '#3b82f6' ``` 输出是 [图恩](https://github.com/toon-format/toon) 默认情况下，使用 `--format json` 为JSON。它遵循 [阿喜](https://github.com/kunchenguid/axi) 原则：默认和基本字段 `--full` 对于其余部分，使用预先计算的对比度、显式空结果、带有退出代码的编码错误（1失败，2错误调用）、没有提示以及在每个结果之后建议的next命令。 | 命令 | 它是做什么的 | | --- | --- | | `convert --to ` | 转换为任何CSS颜色空间，可选的色域映射 | | `mix ` | 混合, `color-mix()` 做 | | `contrast ` | WCAG 2比率与AA和AAA裁决 | | `find-contrast --target 4.5` | 找一种达到比例的颜色 | | `scale ` | “顺风”、“基数”、“音调”甚至“刻度”、“品牌刻度”或“对比刻度” | | `palette ` | 语义调色板；每个文本对都有其比例 | | `harmony ` | 互补色、分裂色、类比色、三色或四色 | | `export [color]` | CSS变量、DTCG JSON或顺风v4主题 | | `schema [command]` | 命令选项的JSON模式 | 对比WCAG 2。 ### 为代理 - 每个命令的参数和选项的JSON模式 `schemas/` (例如 `color-map/schemas/scale.schema.json`)，并以 `color-map schema `。 - 这个 `color-map` 代理技能船在这个包作为插件克劳德代码，光标，Codex和Copilot CLI (`plugin.json`， `skills/color-map`）. - [`llms.txt`](https://npmcn.com/package/color-map/llms.txt) 映射命令。 该命令是一个单独的bundle (`bin/color-map.js`)，将其解析器内联。没有库入口点加载它，所以导入 `color-map` 它不需要任何成本。 ## 致谢 `color-map` 遵循CSS颜色4和5 (W3C)，使用 [Björn Ottosson的OKLab](https://bottosson.github.io/posts/oklab/)，并写道 [设计令牌](https://www.designtokens.org/) 颜色值。它的尺度和调色板学习 [基数的颜色](https://www.radix-ui.com/colors)， [材料设计3](https://m3.material.io/styles/color/system/overview) 和 [顺风CSS](https://tailwindcss.com/)。它开始于 [`colormap`](https://github.com/bpostlethwaite/colormap)。这个 [比较页面](https://cyberuni.github.io/color-map/compare/) 将其与culori、color .js、chroma-js、@texel/color、@colordx/core、lightningcss和colord进行比较。没有第三方源代码捆绑。这个 [学分页面](https://cyberuni.github.io/color-map/credits/) 说明每个人贡献了什么以及在哪个许可下。 ## 贡献 ```sh # after fork and clone npm install # begin making changes git checkout -b npm run watch # after making change(s) git commit -m "" git push # create PR ``` `npm run size` 根据每个入口点的预算检查其gzip大小。 `npm run build && npm run bench` 乘以在color-map， culori和colorjs中相同的操作。IO并为每个输出ops/秒； `--filter ` 只运行匹配的操作。 ## 常见问题 ### color-map 是什么？ 颜色地图生成器和颜色工具包：一个库，一个CLI和一个代理技能 ### 如何安装 color-map？ 在项目目录运行 npm install color-map，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 color-map，可以用 npx color-map 直接运行。 ### color-map 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### color-map 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### color-map 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>= 20\.19。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### color-map 可以商用吗？ color-map 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### color-map 还在维护吗？ 最新版本 2\.3\.1 发布于 2026/11/03（今天）；至今共发布 38 个版本，其中过去 12 个月发布了 6 个；首次发布于 2017/01/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。