--- title: "Color Shades for Figma - Variable Scale | CanDoYa" description: "Generate color shades for Figma from any hex. Build a named 50-950 scale, preview it, and copy variable JSON, names with HEX, or CSS." url: https://candoya.com/tools/color-shades-for-figma/ locale: en type: browser-tool --- # Color Shades for Figma Category: Color & Design ## 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. 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. ## How to use it 1. **Enter the source color** - Type a 3- or 6-digit hex value or choose a color. The scale updates instantly. 2. **Name the Figma family** - Set the collection and family labels used in exported variable paths. 3. **Choose the exact anchor** - Pick which numbered step keeps your source hex unchanged. Shade 500 is the default. 4. **Inspect and copy** - Click a swatch for its HEX value, or copy the complete scale as JSON, name-and-HEX lines, or CSS variables. ## 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. ## Expert note Keep semantic roles such as Action/Primary separate from primitive scales such as Indigo/600. Primitive shades describe color; semantic Figma variables describe intent and can alias those primitives differently in light and dark modes. ## Frequently asked questions ### 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. ## Related tools - [Tailwind Palette Generator](https://candoya.com/tools/tailwind-palette-generator/) - [Color Palette Generator](https://candoya.com/tools/color-palette-generator/) - [Accessible Palette Generator](https://candoya.com/tools/accessible-palette-generator/) - [Color Picker](https://candoya.com/tools/color-picker/) - [HEX to HSL Converter](https://candoya.com/tools/hex-to-hsl/) --- *Markdown edition of , published for AI agents and other automated readers. Index of key pages: .*