Color Palette: Tints & Shades

A plugin that generates a Tailwind-style color palette (tints and shades) from a single hex color and lets you export it to Figma variables, CSS variables, or a Tailwind config.

Color Tints & Shades takes a hex color and builds a 10-step palette (50, 100, 200, 300, 400, 500, 600, 700, 800, 900), similar to Tailwind’s default color scales. The base color is used as step 500; lighter steps (50–400) are tints (mixed with white), and darker steps (600–900) are shades (mixed with black). You can name the palette (e.g. `primary`, `blue`) and export it in three ways:

Export to Figma variables – Creates a variable collection called Color Tokens in the current file with one mode and 10 color variables (50–900) with the name you specify, ready to use in your designs.

Export CSS Variables – Copies a `:root { --color-{name}-50: #...; ... }` block to the clipboard for use in stylesheets.

Export Tailwind Config – Copies a `theme.extend.colors` snippet for the palette so you can paste it into `tailwind.config.js`.The plugin includes a hex input and color picker with a live swatch, a “Generate Palette” button, a color name field, a grid of the 10 swatches with labels and hex codes, and the three export buttons. It does not require network access.