How much are the 500, 600, 700 usw. steps in Figma for colors

Question

I want to make SASS Mixins for my color scheme in the tailwind style.

For every color I want to generate a 400, 300, 200 and 100 and so on version.

Now it would be nice to know in what percentage tailwind steps this.

I found nothing in the internet to this issue.

Answer 1

I actually use https://javisperez.github.io/tailwindcolorshades/#/ to generate shades it will output something like:

  concrete: {
    100: '#FEFEFE',
    200: '#FCFCFC',
    300: '#FAFAFA',
    400: '#F6F6F6',
    500: '#F2F2F2',
    600: '#DADADA',
    700: '#919191',
    800: '#6D6D6D',
    900: '#494949',
  },

That you can include in your tailwind.config.js file.