彩色地图
没有依赖的彩色地图生成器。
灵感来自 colormap。
图书馆
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． 使用捆绑器时，根路径消耗的字节数与子路径相同。在没有捆绑器的情况下运行的代码可以导入子路径以减少加载。看到 库文件 获取完整的API。
遗留的API
原始API存在于 color-map/legacy． 根 color-map 仍然在2中导出它。X，标记为deprecated，并在3.0中停止。
createColors(from, to, shades, alpha?)
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)
import { rgbHex } from 'color-map/legacy'
rgbHex([0, 128, 255]) // '#0080ff'
rgbHex([0, 128, 255, 0.3]) // '#0080ff'
rgbaString(rgba)
import { rgbaString } from 'color-map/legacy'
rgbaString([0, 128, 255, 0.2]) // 'rgba(0,128,255,0.2)`
createColorsFromMap(colormap, shades, alpha?)
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 而不是:
import { createGradient } from 'color-map'
const colors = createGradient(['rgb(0 128 102)', 'rgb(255 255 102)'], 60, { in: 'srgb' })
它返回通道从0到1的颜色对象，而不是整数。看到 梯度 看完整的食谱。
这个 color-map 命令
该包附带了一个代理命令，不需要额外的安装和运行时依赖：
npx color-map palette '#3b82f6'
输出是 图恩 默认情况下，使用 --format json 为JSON。它遵循 阿喜 原则：默认和基本字段 --full 对于其余部分，使用预先计算的对比度、显式空结果、带有退出代码的编码错误（1失败，2错误调用）、没有提示以及在每个结果之后建议的next命令。
| 命令 | 它是做什么的 |
|---|---|
convert <color> --to <space> | 转换为任何CSS颜色空间，可选的色域映射 |
mix <a> <b> | 混合, color-mix() 做 |
contrast <fg> <bg> | WCAG 2比率与AA和AAA裁决 |
find-contrast <bg> --target 4.5 | 找一种达到比例的颜色 |
scale <seed> | “顺风”、“基数”、“音调”甚至“刻度”、“品牌刻度”或“对比刻度” |
palette <brand> | 语义调色板；每个文本对都有其比例 |
harmony <color> | 互补色、分裂色、类比色、三色或四色 |
export [color] | CSS变量、DTCG JSON或顺风v4主题 |
schema [command] | 命令选项的JSON模式 |
对比WCAG 2。
为代理
- 每个命令的参数和选项的JSON模式
schemas/(例如color-map/schemas/scale.schema.json)，并以color-map schema <command>。 - 这个
color-map代理技能船在这个包作为插件克劳德代码，光标，Codex和Copilot CLI (plugin.json，skills/color-map）. llms.txt映射命令。
该命令是一个单独的bundle (bin/color-map.js)，将其解析器内联。没有库入口点加载它，所以导入 color-map 它不需要任何成本。
致谢
color-map 遵循CSS颜色4和5 (W3C)，使用 Björn Ottosson的OKLab，并写道 设计令牌 颜色值。它的尺度和调色板学习 基数的颜色， 材料设计3 和 顺风CSS。它开始于 colormap。这个 比较页面 将其与culori、color .js、chroma-js、@texel/color、@colordx/core、lightningcss和colord进行比较。没有第三方源代码捆绑。这个 学分页面 说明每个人贡献了什么以及在哪个许可下。
贡献
# after fork and clone
npm install
# begin making changes
git checkout -b <branch>
npm run watch
# after making change(s)
git commit -m "<commit message>"
git push
# create PR
npm run size 根据每个入口点的预算检查其gzip大小。 npm run build && npm run bench 乘以在color-map， culori和colorjs中相同的操作。IO并为每个输出ops/秒； --filter <name> 只运行匹配的操作。