메뉴
Generate distinct, accessible colors for charts, graphs, and data visualizations. Uses color harmonies for maximum perceptual distinction.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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