Different tools use different tone curves. This exporter uses a tuned HSL curve for clean tints and controlled shades. Exact visual parity isn’t required—consistency and usability are.
Yes. The 500 step is locked to your HEX field so your brand color never drifts when generating the scale.
Copy the config block and paste under theme.extend.colors. For example: theme.extend.colors.brand = {'50': '#...', '500': '#...', '950': '#...'}.
Use variables when your stack relies on custom properties or you need runtime theming. Both exports use the same generated scale.
No. Every change to HEX or HSL sliders recalculates the full 50–950 scale. Preview, Tailwind config, and CSS variables are always in sync.