Color Palette: Tints & Shades

About this plugin

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.