0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Figma plugin#3 in Color Palettes

Tailwind CSS Color Generator

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

by Erik de Vries

users
108K
likes
3.6K
saves
34K
comments
71
Open in Figma
FreeWorks inFigma Design
Price
Free
Latest version
v6 · Dec 15, 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 107,733 users and 3,572 likes on the Figma Community. It ranks #3 in Color Palettes and #5 in Developers 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 6 · released Dec 15, 2025

The developer didn't publish release notes for this version.

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

    Color Palettes

    by Manthankumar Satani

    437K users3.9KFree

    A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥

    View details
  2. 2

    Color Designer

    by Wojciech Banaś

    110K users1.7KFree
    View details
  3. 3

    Supa Palette

    by Angelo Libero

    102K users2.8KFree + paid features

    The ultimate color palette generator for Figma

    View details
  4. 4

    Find and Replace Colors

    by Wei Zhong

    97K users833Free

    Quickly recolor for templates

    View details
  5. 5

    Chroma Colors

    by Miguel Solorio

    92K users966Free

    Create bulk color styles from selection

    View details
  6. 6

    UI Color Palette /one・WCAG Color Palette Manager for Apps & Websites

    by Aurélien Grimaud

    92K users814Free + $8/mo upgrade

    Color Palettes that meet WCAG Guidelines and Operations (tailored for individuals)

    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 Color Palettes, Color Designer and Supa Palette. Compare all of them on the best Figma plugins for color palettes.

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>