Skip to content
data-viz-palette logo

Data Visualization Palette

data-viz-palette

Generate distinct, accessible colors for charts, graphs, and data visualizations. Uses color harmonies for maximum perceptual distinction.

NeverSight/skills_feed0installs215stars

SKILL.md

Full skill instructions

Data Visualization Palette

Generate color sets optimized for charts, graphs, and dashboards. Colors are mathematically spaced for maximum distinction and equal visual weight.

When to Use

  • "Create colors for my chart"
  • "I need a data visualization palette"
  • "Generate distinct colors for a graph"
  • "Colors for dashboard charts"

Installation

npx @basiclines/​rampa

Key Principles

  1. Fixed lightness - All colors at same lightness = equal visual weight
  2. Fixed saturation - Consistent vibrancy across the palette
  3. Maximum hue spacing - Use harmonies for perceptual distinction
  4. Single shade per color - Data viz needs distinct hues, not ramps

Recipes by Color Count

3 Colors (Triadic)

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)

4 Colors (Square)

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)

4 Colors (Compound)

Alternative with complementary + split for more nuance:

rampa -C "<brand-color>" --add=compound --size=2 -L 50:50 -S 75:75 -O css

6 Colors

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

Complete Example

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 */
}

Lightness Recommendations

BackgroundRecommended Lightness
White (#fff)45-55%
Light gray (#f5f5f5)45-55%
Dark (#1a1a1a)55-65%
Black (#000)60-70%

Saturation Guidelines

Use CaseSaturation
Bold, attention-grabbing75-85%
Professional, muted55-65%
Accessible (colorblind-friendly)60-70%

Colorblind Considerations

For colorblind-safe palettes:

  1. Avoid red-green pairs as primary distinction
  2. Vary lightness slightly if using similar hues
  3. Use patterns/​shapes as backup identifiers

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

Tips

  1. --size=2 gives minimal ramps (2 shades each) - good for data viz
  2. Keep saturation consistent across all colors
  3. Test on both light and dark chart backgrounds
  4. For legends, the order should match visual prominence
  5. Add a neutral gray for "no data" or baseline values

More skills from NeverSight

devops-deployer logo
NeverSight/skills_feed

devops-deployer

Comprehensive DevOps and deployment workflow that orchestrates infrastructure automation, CI/CD pipelines, container orchestration, and cloud deployment. Handles everything from infrastructure as code and pipeline setup to monitoring, scaling, and disaster recovery.

215 1
View
avnu logo
NeverSight/skills_feed

avnu

Integrate avnu SDK for Starknet DeFi: token swaps with best-price routing, DCA recurring buys, native staking, gasless transactions via paymaster, and market data. Use when building Starknet trading, DEX aggregation, or DeFi automation features.

215 0
View
post-to-x logo
NeverSight/skills_feed

post-to-x

发布内容和文章到 X (Twitter)。支持带图片的普通推文和 X Articles(长文)。使用真实的 Chrome 和 CDP 来绕过自动化检测。

215 0
View
ralph-prompt-builder logo
NeverSight/skills_feed

ralph-prompt-builder

Master orchestrator for generating Ralph Wiggum-compatible prompts. Analyzes task requirements and routes to appropriate generator (single-task, multi-task, project, or research). Use when you need to create any Ralph loop prompt and want automatic selection of the right generator.

215 0
View
branch-comparison logo
NeverSight/skills_feed

branch-comparison

Use when the user asks to compare branches, analyze git diffs, review changes between branches, update specifications based on code changes, or analyze what changed. Triggers on keywords like "compare branches", "git diff", "what changed", "branch comparison", "code changes", "spec update".

215 0
View
fastapi-development logo
NeverSight/skills_feed

fastapi-development

Build high-performance FastAPI applications with async routes, validation, dependency injection, security, and automatic API documentation. Use when developing modern Python APIs with async support, automatic OpenAPI documentation, and high performance requirements.

215 0
View
zendesk-chat logo
NeverSight/skills_feed

zendesk-chat

Enables Claude to manage Zendesk Chat conversations, support tickets, and customer service operations

215 0
View
forge logo
NeverSight/skills_feed

forge

Mine transcripts for knowledge - decisions, learnings, failures, patterns. Triggers: "forge insights", "mine transcripts", "extract knowledge".

215 0
View
mixpanel logo
NeverSight/skills_feed

mixpanel

Track product analytics and user behavior with Mixpanel's event-based platform.

215 0
View
ocpp logo
NeverSight/skills_feed

ocpp

OCPP protocol reference for EV charging infrastructure development. Covers OCPP 2.0.1 and OCPP 1.6J. Use when working with OCPP messages, charging station code, CSMS/Central System backends, smart charging, transaction handling, or EV charging protocols. Activates on keywords: OCPP, charging stat...

215 0
View
bee-collect logo
NeverSight/skills_feed

bee-collect

Gather scattered ideas into organized GitHub issues. The bee collects pollen from every flower, checks if the hive already has it, and carefully deposits new work in the comb for later. Never edits code—only organizes the work ahead. Use when creating issues from TODOs or planning work.

215 0
View
vercel-react-native-skills logo
NeverSight/skills_feed

vercel-react-native-skills

Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.

215 0
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View