A Figma plugin that generates perfectly balanced color palettes for design systems. Uses superellipse curves to create natural color progressions with mathematical precision.
- Natural Distribution — Uses superellipse curves
((x/a)^n + (y/b)^n = 1)for perfect color distribution - Smart Spacing — Proportional color distribution based on selected color position
- Contrast Control — Power distribution for custom contrast levels
- Black & White — Optional pure black and white endpoints
- Figma Variables — Import as native Figma color variables with automatic binding
- 10 Presets — Beautiful pre-configured color palettes
- HEX/RGB — Switch between color formats
- Reverse Order — Flip palette from dark to light or light to dark
- Saturation — Smooth palettes for neutral colors such as
cool grayorwarm gray
A superellipse is defined by the equation:
Where n controls the curve's shape:
n = 1→ Diamond shapen = 2→ Perfect circlen > 2→ Rounded rectanglen → ∞→ Square
Traditional linear color interpolation creates unbalanced palettes. Superellipse curves:
- Find optimal curve — Algorithm finds
nvalue that passes through your selected color - Arc-length distribution — Colors distributed evenly along the curve's arc length
- Natural progression — Creates perceptually balanced lightness/saturation transitions
- Open Figma
- Go to Plugins → Browse plugins in Community
- Search for "Shade Perfection"
- Click Open in...
- Clone the project:
git clone https://github.com/ninsent/shade-perfection.git- Go to the project directory
cd shade-perfection- Install dependencies:
npm install- Build the plugin:
npm run buildThe plugin uses Vite to bundle the UI. All source files are in src/, build output goes to dist/.
- Test in Figma:
- Open Figma Desktop
- Go to Plugins → Development → Import plugin from manifest
- Select
manifest.jsonfrom the project directory
-
Choose a color
- Use the color picker or enter HEX/RGB value
- The superellipse curve updates in real-time
-
Adjust settings
- Color Count (1-50): Number of shades to generate
- Contrast (0.1-5.0): Distribution curve intensity
< 1.0= More colors in midtones= 1.0= Even distribution> 1.0= More colors in extremes
-
Enable features
- Import with Variables: Creates Figma color variables with automatic frame binding
- Reverse Order: Flips palette direction
- Include Black & White: Adds pure endpoints
- Smart Spacing: Proportional distribution based on color position
- RGB Format: Toggle HEX to RGB display
-
Name your palette
- Enter a color name (e.g., "Ocean Blue")
- Generated shades will be named: "Ocean Blue 10", "Ocean Blue 20", etc.
-
Import to Figma
- Click "Import to Figma"
- Colors appear as frames
When "Import with Variables" is enabled:
- Creates Figma color variables in "Global" collection
- Generated frames automatically bind to their corresponding variables
- Re-importing palettes with identical names updates variables without breaking design connections
- Variables are named:
PaletteName/10,PaletteName/20, etc. - Black/White colors create
Neutral/BlackandNeutral/Whitevariables
The plugin uses two different distribution algorithms for two features that control how colors are placed along the superellipse curve.
When enabled, distributes colors proportionally based on the selected color's position on the curve:
// Selected color at 70% arc length:
// Standard: [5 color tints] [SELECTED COLOR] [5 color shades]
// Smart Spacing: [7 color tints] [SELECTED COLOR] [3 color shades]Use when:
- Selected color is very light or dark
- Need balanced palette with extreme colors
- Creating accessible color systems
Power function controls distribution density:
// Linear (contrast = 1.0):
arcLength = (i / total) * selectedArc
// Curved (contrast ≠ 1.0):
powered = normalizedDistance^(1/1.5)
arcLength = selectedArc * poweredUse when:
contrast < 1.0— More colors in midtones, subtle gradientscontrast = 1.0— Even distributioncontrast > 1.0— More colors in extremes, high contrast
Smart Spacing and Contrast cannot be used together because both of them fundamentally change the distribution mathematics in different ways:
- Smart Spacing adjusts the ratio of colors before/after the selected color based on its position
- Contrast modifies the spacing density using power distribution
Both algorithms replace the standard linear distribution. When Smart Spacing is enabled, Contrast is automatically set to 1.0 (linear)
const CONFIG = {
// Canvas dimensions
PALETTE_SIZE: 180,
HUE_SLIDER_SIZE: 180,
// Curve calculation
CURVE_RESOLUTION: 400,
SUPERELLIPSE_N_MIN: 0.1,
SUPERELLIPSE_N_MAX: 25,
SUPERELLIPSE_TOLERANCE: 0.001,
SUPERELLIPSE_MAX_ITERATIONS: 100,
// Input constraints
CONTRAST_MIN: 0.1,
CONTRAST_MAX: 5.0,
CONTRAST_STEP: 0.1,
COLOR_COUNT_MIN: 1,
COLOR_COUNT_MAX: 50,
// Saturation control
SATURATION_MIN: 0,
SATURATION_MAX: 100,
SATURATION_DEFAULT: 100,
SATURATION_MIN_THRESHOLD: 1,
// UI interactions
DRAG_SENSITIVITY: 0.3,
TOOLTIP_DELAY: 1000,
ERROR_TOOLTIP_DELAY: 500,
TAB_TRANSITION_DELAY: 150,
// Visual styles
CURVE_STROKE_WIDTH: 2,
CURVE_PRIMARY_OPACITY: 0.9,
CURVE_SECONDARY_OPACITY: 0.4,
POINT_SECONDARY_OPACITY: 0.85,
};const PRESET_DATA = {
'Your-Preset': {
name: 'Your Preset Name',
color: '#HEX_VALUE',
contrast: 1.0, // 0.1-5.0
saturation: 100 //0%-100%
}
};Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.
- Added: Click animations for buttons
- Changed: Improved UI animation smoothness
Check the CHANGELOG.md for a detailed history of changes.
Nursultan Akim
- Portfolio: bento.me/ninsent
- Figma Community: @ninsent
- Report Bug: GitHub Issues
- Request Feature: GitHub Issues
- Contact: akim.off.nur@gmail.com
Made with ❤️ for the design community