Back to Details

rampa-colors

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Rampa Color Palette Generator

Rampa 调色板生成器

Generate perceptually uniform color palettes from a base color using the OKLCH color space.
基于基础色，使用OKLCH色彩空间生成视觉感知一致的调色板。

Installation

安装

bash
undefined
bash
undefined

Run directly

直接运行

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

Or install globally

或全局安装

npm install -g @basiclines/rampa
undefined
npm install -g @basiclines/rampa
undefined

Quick Examples

快速示例

Generate a basic 10-color palette

生成基础10色调色板

bash
rampa -C "#3b82f6"
bash
rampa -C "#3b82f6"

Output as CSS variables

以CSS变量格式输出

bash
rampa -C "#3b82f6" -O css --name=primary
Output:
css
:root {
  --primary-0: #000000;
  --primary-1: #1e3a5f;
  --primary-2: #2d5a8a;
  ...
}
bash
rampa -C "#3b82f6" -O css --name=primary
输出:
css
:root {
  --primary-0: #000000;
  --primary-1: #1e3a5f;
  --primary-2: #2d5a8a;
  ...
}

Output as JSON

以JSON格式输出

bash
rampa -C "#3b82f6" -O json
bash
rampa -C "#3b82f6" -O json

Add complementary harmony

添加互补色调和

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

Custom lightness and saturation ranges

自定义亮度与饱和度范围

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

Use Fibonacci distribution scale

使用斐波那契分布缩放

bash
rampa -C "#3b82f6" --lightness-scale=fibonacci
bash
rampa -C "#3b82f6" --lightness-scale=fibonacci

Generate 5 colors with triadic harmony

生成5色三元调色板

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

All Options

所有选项

FlagAliasDescriptionDefault
--color
-C
Required. Base color (hex, rgb, hsl, or named)-
--size
-Number of colors in palette10
--output
-O
Output format: 
text
, 
json
, 
css
text
--format
-F
Color format: 
hex
, 
rgb
, 
hsl
, 
oklch
hex
--name
-Palette name (for CSS/JSON output)base
--lightness
-L
Lightness range (e.g., 
15:95
)		0:100
--saturation
-S
Saturation range (e.g., 
100:20
)		100:0
--hue
-H
Hue shift range (e.g., 
-10:10
)		-10:10
--lightness-scale
-Distribution scale for lightnesslinear
--saturation-scale
-Distribution scale for saturationlinear
--hue-scale
-Distribution scale for huelinear
--add
-Add harmony ramp-
--tint-color
-Tint overlay color-
--tint-opacity
-Tint opacity (0-100)10
--tint-blend
-Tint blend modeoverlay
--no-preview
-Hide color preview blocksfalse
标识别名描述默认值
--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-scale
-亮度的分布缩放类型linear
--saturation-scale
-饱和度的分布缩放类型linear
--hue-scale
-色相的分布缩放类型linear
--add
-添加调和色阶-
--tint-color
-色调叠加颜色-
--tint-opacity
-色调叠加透明度（0-100）10
--tint-blend
-色调叠加混合模式overlay
--no-preview
-隐藏颜色预览块false

Scale Types

缩放类型

Control how values are distributed across the palette:
  • linear
    - Even spacing (default)
  • fibonacci
    - Fibonacci sequence
  • golden-ratio
    - Golden ratio progression
  • ease-in
    - Slow start, fast end
  • ease-out
    - Fast start, slow end
  • ease-in-out
    - Slow start and end
  • geometric
    - Exponential growth
  • logarithmic
    - Logarithmic curve
控制调色板中数值的分布方式：
  • linear
    - 均匀分布（默认）
  • fibonacci
    - 斐波那契序列
  • golden-ratio
    - 黄金比例递进
  • ease-in
    - 慢启动，快结束
  • ease-out
    - 快启动，慢结束
  • ease-in-out
    - 慢启动和结束
  • geometric
    - 指数增长
  • logarithmic
    - 对数曲线

Harmony Types

色彩调和类型

Generate related color ramps:
  • complementary
    - Opposite on color wheel (+1 ramp)
  • triadic
    - 3 colors, 120° apart (+2 ramps)
  • analogous
    - Adjacent colors, 30° apart (+2 ramps)
  • split-complementary
    - 2 colors near opposite (+2 ramps)
  • square
    - 4 colors, 90° apart (+3 ramps)
生成相关的色彩色阶：
  • complementary
    - 补色（色轮上相对的颜色，+1组色阶）
  • triadic
    - 三元色（3种颜色，间隔120°，+2组色阶）
  • analogous
    - 邻近色（相邻颜色，间隔30°，+2组色阶）
  • split-complementary
    - 分裂补色（补色附近的2种颜色，+2组色阶）
  • square
    - 四方色（4种颜色，间隔90°，+3组色阶）

Blend Modes (for tinting)

混合模式（用于色调叠加）

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

When to Use This Skill

何时使用该工具

  • User asks to "generate a color palette"
  • User needs "CSS color variables"
  • User wants "accessible colors" or "design system colors"
  • User mentions "color ramp" or "color scale"
  • User needs "complementary/triadic/analogous colors"
  • User wants "perceptually uniform" colors
  • User is building a theme or design tokens
  • 用户要求“生成调色板”
  • 用户需要“CSS颜色变量”
  • 用户想要“无障碍色彩”或“设计系统色彩”
  • 用户提到“色彩色阶”或“色彩缩放”
  • 用户需要“互补/三元/邻近色”
  • 用户想要“视觉感知一致”的色彩
  • 用户正在构建主题或设计令牌

Tips

小贴士

  1. For dark mode themes, use 
    -L 5:85
    to avoid pure black/white
  2. For muted palettes, use 
    -S 60:20
  3. Use 
    --add=analogous
    for harmonious multi-color themes
  4. Use 
    -O json
    when you need to process colors programmatically
  5. Combine with 
    --size=5
    for minimal palettes
  1. 对于深色模式主题，使用 
    -L 5:85
    避免纯黑/纯白
  2. 对于低饱和度调色板，使用 
    -S 60:20
  3. 使用 
    --add=analogous
    创建和谐的多色主题
  4. 当需要以编程方式处理色彩时，使用 
    -O json
  5. 结合 
    --size=5
    创建极简调色板