R

rampa-colors

rampa-colors

github.com/basiclines设计与 UI1650 次安装32 周前更新

关于 rampa-colors

基于 OKLCH 从基础颜色生成感知均匀调色板的命令行工具。它支持自定义颜色范围、配色关系、分布曲线，并可输出文本、JSON 或 CSS。

主要功能

01基于 OKLCH 生成调色板
02自定义颜色范围
03生成配色关系色阶
04多种分布曲线
05输出文本、JSON 和 CSS

适用场景

01为主题创建 CSS 变量
02生成互补或三角色阶
03导出 JSON 调色板供程序处理

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/basiclines/rampa-studio --skill rampa-colors

安装后在 Claude Code 中输入/rampa-colors确认已加载。

附带文件scripts/generate.sh

详细介绍

Rampa 色板生成器

使用 OKLCH 色彩空间，根据基础色生成感知均匀的色板。

安装

# Run directly
npx @basiclines/rampa -C "#3b82f6"

# Or install globally
npm install -g @basiclines/rampa

快速示例

生成包含 10 种颜色的基础色板

rampa -C "#3b82f6"

输出为 CSS 变量

rampa -C "#3b82f6" -O css --name=primary

输出：

:root {
  --primary-0: #000000;
  --primary-1: #1e3a5f;
  --primary-2: #2d5a8a;
  ...
}

输出为 JSON

rampa -C "#3b82f6" -O json

添加互补色协调

rampa -C "#3b82f6" --add=complementary -O css

自定义亮度和饱和度范围

rampa -C "#3b82f6" -L 15:95 -S 100:20

使用斐波那契分布

rampa -C "#3b82f6" --lightness-distribution=fibonacci

生成包含 5 种颜色的三色协调色板

rampa -C "#3b82f6" --size=5 --add=triadic -O css --name=brand

所有选项

标志	别名	说明	默认值
`--color`	`-C`	必填。基础色（十六进制、rgb、hsl 或命名颜色）	-
`--size`	-	色板中的颜色数量	10
`--output`	`-O`	输出格式：`text`、`json`、`css`	text
`--format`	`-F`	颜色格式：`hex`、`rgb`、`hsl`、`oklch`	hex
`--name`	-	色板名称（用于 CSS/JSON 输出）	base
`--lightness`	`-L`	亮度范围（例如 `15:95`）	0:100
`--saturation`	`-S`	饱和度范围（例如 `100:20`）	100:0
`--hue`	`-H`	色相偏移范围（例如 `-10:10`）	-10:10
`--lightness-distribution`	-	亮度分布曲线	linear
`--saturation-distribution`	-	饱和度分布曲线	linear
`--hue-distribution`	-	色相分布曲线	linear
`--add`	-	添加协调色阶	-
`--tint-color`	-	着色叠加颜色	-
`--tint-opacity`	-	着色不透明度（0-100）	10
`--tint-blend`	-	着色混合模式	overlay
`--no-preview`	-	隐藏颜色预览块	false

分布类型

控制数值在色板中的分布方式：

linear - 均匀间隔（默认）
fibonacci - 斐波那契数列
golden-ratio - 黄金比例递进
ease-in - 开始缓慢，结束快速
ease-out - 开始快速，结束缓慢
ease-in-out - 开始和结束缓慢
geometric - 指数增长
logarithmic - 对数曲线

协调类型

生成相关的颜色阶：

complementary - 色环上的对向颜色（+1 个色阶）
triadic - 3 种颜色，彼此相隔 120°（+2 个色阶）
analogous - 相邻颜色，彼此相隔 30°（+2 个色阶）
split-complementary - 接近对向的 2 种颜色（+2 个色阶）
square - 4 种颜色，彼此相隔 90°（+3 个色阶）

混合模式（用于着色）

normal · multiply · screen · overlay · darken · lighten · color-dodge · color-burn · hard-light · soft-light

何时使用此技能

用户要求“生成色板”
用户需要“CSS 颜色变量”
用户需要“无障碍颜色”或“设计系统颜色”
用户提到“颜色阶”或“颜色刻度”
用户需要“互补色／三色协调色／类似色”
用户需要“感知均匀”的颜色
用户正在构建主题或设计令牌

提示

对于深色模式主题，使用 -L 5:85，避免纯黑和纯白
对于低饱和度色板，使用 -S 60:20
使用 --add=analogous 创建协调的多色主题
需要以编程方式处理颜色时，使用 -O json
配合 --size=5 使用，生成精简色板

评论

支持 Markdown

登录后评论