Build color ramps in OKLCH, OKHSL, HSL, or RGB
Pick the color space your palette lives in and watch the same ramp travel a different path in each: OKLCH, OKHSL, HSL, and RGB.
Updated July 19, 20268 min read
- color
- palettes
- color-spaces
- design-systems
Rampancy Blog
Tutorials on building accessible color ramps, APCA contrast workflows, and new Rampancy features.
Generate a Linked Dark Mode Palette from Your Light Theme
Build a light palette, generate its Dark counterpart in one click, and keep both groups in sync while you edit. Unlink whenever you want.
Updated July 19, 20264 min read- dark mode
- groups
- OKLCH
Soft Select: Move One Point, Shape the Whole Curve
Drag one curve point and let its neighbors follow with a tunable falloff. Set the radius and weights in the Soft Select panel, then compare the modes.
Updated July 19, 20265 min read- editor
- curves
- soft-select
Lock a Brand Color Step So It Never Drifts
Pin one step of a ramp to an exact color. Curve effects, drags, and master ramp edits reshape everything around it while the brand color stays put.
Updated July 19, 20265 min read- tutorial
- palette-editor
- brand-colors
Sync Palettes to Figma with the Rampancy Plugin
Pair the Rampancy Figma plugin with a personal access token and sync saved palettes into Figma Variables that update in place on every re-sync.
Updated July 19, 20265 min read- figma
- plugin
- variables
- sync
Auto Rename: From ramp-1 to Real Color Names
Auto Rename turns a generic ramp-1 into a real color family name like Yellow, using a Tailwind-style vocabulary instead of misleading CSS color names.
Updated July 15, 20263 min read- editor
- naming
- workflow
Organize at Scale: Group Palettes into Projects
Group palettes into projects, move them between projects, reorder the sidebar by drag and drop, and see exactly what deleting a project removes.
Updated July 16, 20263 min read- projects
- organization
- workflow
Share a Palette Without an Account
Rampancy palettes can be shared as a read-only link. Whoever opens it sees swatches, APCA contrast, and can export, all without signing up.
Updated July 15, 20263 min read- sharing
- collaboration
- workflow
Export Anywhere: CSS, Tailwind, Design Tokens & Figma
Download your Rampancy palette as CSS, Tailwind v4/v3, W3C design tokens, or Figma variables, no plugin needed, all from one Export modal.
Updated July 19, 20264 min read- export
- tailwind
- design-tokens
- figma
Accessible by Default: APCA Contrast & Sync APCA Values
See APCA contrast pass or fail on every ramp step as you edit, set a Master ramp, and sync any other ramp to match its contrast while keeping its own hue.
Updated July 19, 20265 min read- accessibility
- apca
- contrast
Shaping Color: Curves, Easing Presets & the Color Info Bar
Drag lightness, chroma, and hue curves by hand or apply an easing preset, then read exact HEX, RGB, HSL, and OKLCH for any step you select.
Updated July 19, 20265 min read- editor
- curves
- oklch
One Click, 22 Ramps: Rampancy's Tailwind Preset
Rampancy's Tailwind preset fills a blank palette with all 22 Tailwind ramps in one click, a real starting point you can reshape, not a static demo.
Updated July 19, 20263 min read- tailwind
- workflow
- editor