Menu
Generate neutral gray palettes with subtle brand color tinting. Use when you want grays that feel connected to your brand rather than pure neutral grays.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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 distinct, accessible colors for charts, graphs, and data visualizations. Uses color harmonies for maximum perceptual distinction.
| name | tinted-neutrals |
| description | Generate neutral gray palettes with subtle brand color tinting. Use when you want grays that feel connected to your brand rather than pure neutral grays. |
| license | SEE LICENSE IN LICENSE.md |
| metadata | {"author":"ismael.fyi","version":"1.0.0"} |
Create neutral palettes that carry a subtle hint of your brand color. Instead of pure grays, get warm or cool neutrals that feel cohesive with your design system.
npx @basiclines/rampa
Start with neutrals derived from your brand color's hue but heavily desaturated:
rampa -C "<brand-color>" -L 98:5 -S 3:8 --size=10 -O css --name=neutral
Apply your brand color as a subtle overlay tint:
rampa -C "<brand-color>" -L 98:5 -S 3:8 --tint-color="<brand-color>" --tint-opacity=8 --tint-blend=overlay --size=10 -O css --name=neutral-tinted
Key: The --tint-color uses the same brand color - no hardcoded values!
Barely noticeable but adds warmth/coolness:
--tint-opacity=6 --tint-blend=overlay
Clearly tinted but still neutral:
--tint-opacity=12 --tint-blend=overlay
Obviously colored neutrals:
--tint-opacity=20 --tint-blend=soft-light
| Mode | Effect |
|---|---|
overlay | Balanced tint, good default |
soft-light | Gentler, more subtle |
multiply | Darker, richer tones |
screen | Lighter, airier tones |
color | Applies hue without changing lightness |
For brand color #7c3aed (purple):
# Pure neutral (cool-ish from purple hue)
rampa -C "#7c3aed" -L 98:5 -S 3:8 --size=10 -O css --name=gray
# Tinted neutral (purple tint)
rampa -C "#7c3aed" -L 98:5 -S 3:8 --tint-color="#7c3aed" --tint-opacity=8 --tint-blend=overlay --size=10 -O css --name=gray-tinted
# Compare: extra warm variant
rampa -C "#7c3aed" -L 98:5 -S 3:8 --tint-color="#7c3aed" --tint-opacity=15 --tint-blend=soft-light --size=10 -O css --name=gray-warm
:root {
/* Pure neutral */
--gray-0: #fafafa;
--gray-1: #f4f4f5;
--gray-9: #18181b;
/* Tinted neutral */
--gray-tinted-0: #faf8fc;
--gray-tinted-1: #f3f0f7;
--gray-tinted-9: #1a1720;
}
overlay blend mode works for most cases