One family, clear roles
Check the scale on light and dark surfaces before moving it into your library.
Private browser utility / Color & Design
Color Shades for Figma
Runs entirely in your browser - no upload, no sign-up.
Design system setup
Turn one color into Figma variables
Creates names such as Primary/500.
Included in copied handoff formats.
This step keeps your exact input color.
11 perceptual steps
Your Figma color family
One family, clear roles
Check the scale on light and dark surfaces before moving it into your library.
Handoff formats
Copy names and values
How do you generate color shades for Figma?
A Figma color shade generator turns one exact brand color into a named 50-950 scale for interface states and design tokens. Pick the step that preserves your source hex, inspect the light and dark previews, then copy variable-ready JSON, a name-and-HEX list, or matching CSS custom properties.
02
How to use
- 01Enter the source color
Type a 3- or 6-digit hex value or choose a color. The scale updates instantly.
- 02Name the Figma family
Set the collection and family labels used in exported variable paths.
- 03Choose the exact anchor
Pick which numbered step keeps your source hex unchanged. Shade 500 is the default.
- 04Inspect and copy
Click a swatch for its HEX value, or copy the complete scale as JSON, name-and-HEX lines, or CSS variables.
03
Who it's for
- Product designers building one reusable Figma variable family for backgrounds, borders, controls, and text.
- Design-system teams keeping Figma names aligned with production CSS tokens.
- Brand designers expanding an approved identity color without changing its exact source hex.
- Developer handoffs that need the same numbered values in design files and code.
A useful Figma color family needs predictable names and visually even steps, not a row of simple white and black overlays. This generator shapes lightness and chroma in perceptual OKLCH space, fits every result into sRGB, and preserves your selected anchor hex exactly.
The JSON is a clear design-token handoff for variable plugins or scripts. Figma does not provide a universal native paste format for creating an entire variable collection, so the tool also gives you tab-separated names and HEX values for manual or plugin-assisted workflows.
FAQ
Is this Figma color shade generator free?
Yes. You can create, preview, and copy as many color scales as you need without an account or paid export. All three handoff formats are available in the browser.
Is my brand color uploaded anywhere?
No. The hex conversion, shade generation, naming, and export formatting run locally in your browser. Your color and token names are not sent to a processing server.
How many Figma color shades does it generate?
The tool generates 11 steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. This familiar scale provides enough range for subtle surfaces, borders, interactions, and strong foreground colors.
Can I import the JSON directly into Figma?
Figma does not offer one universal native JSON paste format for a complete variable collection. The export is structured for handoff, scripts, and variable-import plugins, whose schemas can differ. You can always use the name-and-HEX view to create or verify variables manually.
Why are the shades generated in OKLCH?
OKLCH separates perceived lightness, chroma, and hue. That lets the generator create a more even visual progression than basic RGB or HSL mixing while reducing chroma only when a color would fall outside the sRGB display gamut.
Does shade 500 have to be the base color?
No. You can anchor the exact input at any numbered step. Pick a lighter anchor for an already pale source or a darker anchor for a deep source, then judge the complete family in context.
Are the generated colors automatically accessible?
No. Shade numbers do not guarantee WCAG contrast. Test the exact foreground and background pairs used in your Figma components, especially interactive states and mid-range colors.