Menú
Generate mathematically accurate color palettes using OKLCH color space. Use when creating design systems, color ramps, accessible palettes, CSS variables for themes, or when user asks about color generation.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| name | rampa-colors |
| description | Generate mathematically accurate color palettes using OKLCH color space. Use when creating design systems, color ramps, accessible palettes, CSS variables for themes, or when user asks about color generation. |
| license | SEE LICENSE IN LICENSE.md |
| metadata | {"author":"ismael.fyi","version":"1.0.1"} |
Generate perceptually uniform color palettes from a base color using the OKLCH color space.
# Run directly
npx @basiclines/rampa -C "#3b82f6"
# Or install globally
npm install -g @basiclines/rampa
rampa -C "#3b82f6"
rampa -C "#3b82f6" -O css --name=primary
Output:
:root {
--primary-0: #000000;
--primary-1: #1e3a5f;
--primary-2: #2d5a8a;
...
}
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
rampa -C "#3b82f6" --size=5 --add=triadic -O css --name=brand
| Flag | Alias | Description | Default |
|---|---|---|---|
--color | -C | Required. Base color (hex, rgb, hsl, or named) | - |
--size | - | Number of colors in palette | 10 |
--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-distribution | - | Distribution curve for lightness | linear |
--saturation-distribution | - | Distribution curve for saturation | linear |
--hue-distribution | - | Distribution curve for hue | linear |
--add | - | Add harmony ramp | - |
--tint-color | - | Tint overlay color | - |
--tint-opacity | - | Tint opacity (0-100) | 10 |
--tint-blend | - | Tint blend mode | overlay |
--no-preview | - | Hide color preview blocks | false |
Control how values are distributed across the palette:
linear - Even spacing (default)fibonacci - Fibonacci sequencegolden-ratio - Golden ratio progressionease-in - Slow start, fast endease-out - Fast start, slow endease-in-out - Slow start and endgeometric - Exponential growthlogarithmic - Logarithmic curveGenerate 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)normal · multiply · screen · overlay · darken · lighten · color-dodge · color-burn · hard-light · soft-light
-L 5:85 to avoid pure black/white-S 60:20--add=analogous for harmonious multi-color themes-O json when you need to process colors programmatically--size=5 for minimal palettesAudit and update all rampa project documentation after code changes. Use when adding features, changing defaults, modifying APIs, or before a release.
Create cohesive color themes for code editors, terminals, and IDEs. Generates semantic token systems from a brand color with reusable palette variables for rapid iteration.
Generate color ramps designed for WCAG-compliant contrast pairing. Creates 11-step scales with predictable foreground/background combinations.
Expand a single brand color into a complete multi-hue color system using harmonies. Creates primary, analogous, complementary, and split-complementary ramps.
Generate distinct, accessible colors for charts, graphs, and data visualizations. Uses color harmonies for maximum perceptual distinction.
Generate success, warning, danger, and info status colors that harmonize with your brand using square harmony. All colors mathematically derived from one input.