Figma Plugin Hub
Back to Plugins
Color Scale Variables

Color Scale Variables

Generate tints and shades from a base colour and store them as variables - simply.

color systemshadesvariablescolor palettecolour palettetintscolor schemevariables design systemcolor styles

Plugin Preview

Color Scale Variables preview

About this plugin

This Figma plugin streamlines the process of creating UI color themes and saving them to Figma variables. It generates tints and shades from a base color, following a standardized naming convention from 0 (white) to 1000 (black), with the base color at 500. Users can input their desired base color via hex code or a visual color picker, which then automatically generates a set of 10 color variations.

Plugin Details

Version3
CreatedJanuary 5, 2025
Last UpdatedJanuary 21, 2025
CategoryImport & export plugins
CreatorJonny Gwillim
Stats208 installs, 52 likes
PricingFree
Install Plugin

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://buymeacoffee.com

More Like This

Discover other plugins in the Import & export plugins category.

html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)

html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)

Convert any website into fully editable Figma designs

Figma to HTML

Figma to HTML

Convert Figma design to HTML

TinyImage Compressor

TinyImage Compressor

Export/downsize compressed JPG, PNG, SVG, WebP, GIF, WebM, MP4, AVIF and PDF image files from Figma

View All Import & export plugins Plugins