Figma plugin#6 in Developers

Tailwind CSS Color Generator

Create custom Tailwind CSS color scales based on a given Hex code or HSL color

by Erik de Vries

users
112K
likes
3.7K
saves
34K
comments
71
Open in Figma
FreeWorks inFigma Design
Price
Free
Latest version
v4 · Jun 26, 2025
First published
May 22, 2023
Publisher
Erik de Vries
Features

What Tailwind CSS Color Generator does

Summarised from Erik de Vries's description on the Figma Community.

  • Generate a full Tailwind CSS color scale based on a hex code, HSL color or a random color

  • Create and update color variables groups based on the generated color scale

On this page
Overview

About Tailwind CSS Color Generator

Tailwind CSS Color Generator is a free Figma plugin published by Erik de Vries in 2023. It works in Figma Design and has 111,734 users and 3,653 likes on the Figma Community. It ranks #6 in Developers and #8 in Color Palettes on our lists.

In the developer's words

  1. Generate a full Tailwind CSS color scale based on a hex code, HSL color or a random color.
  2. Create and update color variables groups based on the generated color scale.

Based on uicolors.app, a web app to generate, edit, share and save Tailwind CSS color scales.

Changelog

What's new

Version 4 · released Jun 26, 2025

  • Add colors with shade numbers and hex codes to your Figma file for easy style guide documentation.
  • The plugin suggests a color group name automatically.
Trust

Permissions and privacy

Network access

Tailwind CSS Color Generator can only connect to the domain declared in its manifest: uicolors.app/.

  • uicolors.app/

Extra permissions

None beyond the standard access to the file you run it in.

Read from the plugin's published manifest.

Rankings

Where Tailwind CSS Color Generator ranks

Compare

Tailwind CSS Color Generator alternatives

  1. 1

    Tokens Studio for Figma

    by Jan Six

    369K users7.6KFree + paid features

    The scalable design tokens solution for Figma

    View details
  2. 2

    Zeplin

    by Zeplin Crew

    293K users2.9KFree + paid features

    Design tools are for designing. Zeplin is for clear, structured design delivery.

    View details
  3. 3

    DesignDoc [Spectral]

    by Marka Plugin Dev

    141K users3.2KFree

    📐 Effortlessly hand off your Figma designs to the development team

    View details
  4. 4

    Inspect Styles

    by max.denaro

    139K users4KFree

    Inspect styles from Figma and transform to CSS

    View details
  5. 5

    Figma Exporter

    by JerryKhw

    117K users516Free

    Easily export assets as PNG/JPG/WebP/SVG/PDF for Web, Android, Flutter, iOS, React Native

    View details
  6. 6

    Jira

    by Figma Community

    84K users568Free

    Connect Figma Designs to Jira Issues

    View details
FAQ

Tailwind CSS Color Generator FAQ

What does Tailwind CSS Color Generator do?

Create custom Tailwind CSS color scales based on a given Hex code or HSL color. It's a Figma plugin by Erik de Vries that runs in Figma Design.

Is Tailwind CSS Color Generator free?

Yes. Tailwind CSS Color Generator is free to install and run from the Figma Community, with no paid tier listed.

Is Tailwind CSS Color Generator safe to use?

Figma plugins can only reach the internet through domains listed in their manifest. Tailwind CSS Color Generator can only connect to the domain declared in its manifest: uicolors.app/. As with any plugin, check the developer's privacy policy before using it on client work.

How do I install Tailwind CSS Color Generator?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to Tailwind CSS Color Generator?

By user count, the closest alternatives are Tokens Studio for Figma, Zeplin and [DesignDoc [Spectral]](/plugins/designdoc-spectral-measures-annotations-and-handoff/). Compare all of them on the best Figma plugins for developers.

For developers

Built this plugin?

Use this page as a landing page for Tailwind CSS Color Generator: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

Tailwind CSS Color Generator on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/tailwind-css-color-generator/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Tailwind CSS Color Generator on figmaplugins.co" width="220" height="48"></a>

Want it featured on figmaplugins.co? Submit it for review