Skip to content
Day 69: new resources are added every day. See what's new
Best Productivity ResourcesBy Shushant LakhyaniVerified creator

Web App

UI Colors

Generate a full Tailwind CSS colour scale from a single hex code.

Visit UI Colors4.6

  • Rating

    4.6 / 5

  • Pricing

    Free

  • Difficulty

    Beginner

  • Works on

    Web

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

Free: 1,100+ ways people make money onlineFree: 399+ ways to make money online

What is UI Colors?

UI Colors creates an eleven-step colour palette from one base colour, in the same 50 to 950 format as Tailwind CSS. You can preview the shades on sample interface components, tweak them and copy the result as Tailwind config, CSS variables or other formats, all for free in the browser.

Pros: what UI Colors does well

  • Tailwind-ready output
  • Live preview on real UI components
  • Fast and free

Cons: where it falls short

  • Focused on Tailwind-style scales only
  • Fewer options for full brand palettes

Who UI Colors is for

Developers and designers building interfaces with Tailwind CSS or a design system.

Who can skip it

Anyone who wants mood-board style palettes rather than UI shades.

UI Colors alternatives

Not sold on UI Colors? These do a similar job, and each card says what it has in common.

All Workflows resources

Neumorphism.io

Focus: shadows and neumorphism. Shares css and ui design with UI Colors. Rated 4.4 (UI Colors: 4.6).

Web AppFreeWeb
4.4Visit

Uiverse

Focus: ui elements, buttons and open source. Shares css and tailwind css with UI Colors. A website, not a web app. Same 4.6 rating.

WebsiteFreeWeb
4.6Visit

Monoco

Focus: squircle and javascript library. Shares css and ui design with UI Colors. A framework, not a web app. Rated 4.4 (UI Colors: 4.6).

FrameworkFreeWeb
4.4Visit

Clippy

Focus: clip-path, shapes and web design. Shares css with UI Colors. Same 4.6 rating.

Web AppFreeWeb
4.6Visit

Free alternatives to UI Colors

Want to spend nothing? These free picks cover similar ground.

ColorBox

Focus: color scales, design systems and palette. Shares ui design with UI Colors. Rated 4.5 (UI Colors: 4.6).

Web AppFreeWeb
4.5Visit

CSS Gradient

Focus: gradients, colour and generator. Shares css with UI Colors. Rated 4.5 (UI Colors: 4.6).

Web AppFreeWeb
4.5Visit

css.glass

Focus: glassmorphism, generator and ui. Shares css with UI Colors. Rated 4.4 (UI Colors: 4.6).

Web AppFreeWeb
4.4Visit

Epic Easing

Focus: easing, animation and spring animation. Shares css with UI Colors. Rated 4.4 (UI Colors: 4.6).

Web AppFreeWeb
4.4Visit

M3E Canvas

Focus: material design, prompts and vibe coding. Shares ui design with UI Colors. Rated 4.2 (UI Colors: 4.6).

Web AppFreeWeb
4.2Visit
Are you the maker of UI Colors?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.

Free Notion database

1,100+ ways people are making money online

Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.

Get the free database

Free Notion database

399+ ways to make money online

Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.

Get the free list

For research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.

Weekly newsletter

Everything new, every Monday.

One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.

Join the newsletter

You sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.