I’m working on creating SCSS functions for my design system using a Tailwind-inspired approach. My goal is to automatically generate different shades for each base color - like creating variants at 100, 200, 300, 400 levels and beyond.
The main challenge I’m facing is understanding the exact percentage calculations that Tailwind uses for these color steps. I need to know how much lighter or darker each step should be compared to the base color.
I’ve been searching online but haven’t found clear documentation about the specific percentage differences between these color variations. Does anyone know the mathematical relationship between these color steps, or where I can find this information?
Any help with the actual percentage values would be greatly appreciated since I want to maintain consistency with the Tailwind color system.
figma doesn’t really stick to fixed percentages for color steps. they adjust HSL lightness in a unique way for each hue, so there’s no one-size-fits-all formula. maybe check out the figma tokens plugin or just eyeball the colors you want instead of searching for precise numbers.
Hit this same problem building our component library last year. Figma’s color system doesn’t follow strict math like you’d expect. Instead of consistent percentage steps, it uses perceptual lightness adjustments that change based on the base color’s hue and saturation. Blues get different lightness increments than reds to keep things visually consistent. I extracted the actual HSL values from existing Figma palettes and reverse-engineered the patterns. You could also try Colorbox or Leonardo to generate perceptually uniform color scales, then import those into your SCSS functions. Human color perception isn’t linear, so the percentage differences between steps need to account for that.