Menú
Generate distinct, accessible colors for charts, graphs, and data visualizations. Uses color harmonies for maximum perceptual distinction.
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
Audit and update all rampa project documentation after code changes. Use when adding features, changing defaults, modifying APIs, or before a release.
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.
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 success, warning, danger, and info status colors that harmonize with your brand using square harmony. All colors mathematically derived from one input.
| name | data-viz-palette |
| description | Generate distinct, accessible colors for charts, graphs, and data visualizations. Uses color harmonies for maximum perceptual distinction. |
| license | SEE LICENSE IN LICENSE.md |
| metadata | {"author":"ismael.fyi","version":"1.0.0"} |
Generate color sets optimized for charts, graphs, and dashboards. Colors are mathematically spaced for maximum distinction and equal visual weight.
npx @basiclines/rampa
Perfect for pie charts, simple bar charts:
rampa -C "<brand-color>" --add=triadic --size=2 -L 50:50 -S 70:70 -O css
Outputs: base, triadic-1, triadic-2 (120° apart)
Good for quarterly data, four-category comparisons:
rampa -C "<brand-color>" --add=square --size=2 -L 50:50 -S 70:70 -O css
Outputs: base, square-1, square-2, square-3 (90° apart)
Alternative with complementary + split for more nuance:
rampa -C "<brand-color>" --add=compound --size=2 -L 50:50 -S 75:75 -O css
Combine triadic with complementary:
rampa -C "<brand-color>" --add=triadic -L 50:50 -S 70:70 --size=2 -O json
# Then run complementary of each triadic color
Or use two interlocking triads at different lightness:
# Primary triad
rampa -C "<brand-color>" --add=triadic --size=2 -L 45:45 -S 70:70 -O css
# Offset triad (shift hue by 60°)
rampa -C "<brand-color>" --add=triadic --size=2 -L 60:60 -S 70:70 -H 60:60 -O css
For brand color #3b82f6:
# 4-color chart palette
rampa -C "#3b82f6" --add=square --size=2 -L 50:50 -S 70:70 -O css
Output:
:root {
--base-0: #3b82f6; /* Blue */
--square-1-0: #a855f7; /* Purple */
--square-2-0: #f97316; /* Orange */
--square-3-0: #22c55e; /* Green */
}
| Background | Recommended Lightness |
|---|---|
| White (#fff) | 45-55% |
| Light gray (#f5f5f5) | 45-55% |
| Dark (#1a1a1a) | 55-65% |
| Black (#000) | 60-70% |
| Use Case | Saturation |
|---|---|
| Bold, attention-grabbing | 75-85% |
| Professional, muted | 55-65% |
| Accessible (colorblind-friendly) | 60-70% |
For colorblind-safe palettes:
Example with lightness variation:
rampa -C "#3b82f6" --add=square --size=1 -L 40:40 -S 70:70 -O css # darker
rampa -C "#3b82f6" --add=square --size=1 -L 60:60 -S 70:70 -O css # lighter
--size=2 gives minimal ramps (2 shades each) - good for data viz