UIColors Uses CSS to Generate Custom Color Scales for Designers

Shelley Cooke.
August 17, 2023

UIColors lets designers input a hex code and immediately generate a custom color scale for their projects. It’s quick, easy, and surprisingly effective.

UIColors Uses CSS to Generate Custom Color Scales for Designers.

We all love a good Figma plugin. Unsplash, Iconify, and Lorem Ipsum are lifesavers for developers. Could UIColors be the next helpful addition to the web designer’s ever-growing toolbox? We certainly think so.

UIColors uses Tailwind CSS to make finding complementary color schemes easier. Designers can either input a hex code manually, change the HSL values, or press the spacebar to pick a random color palette. Then, the script generates a color scale with ten different complementary shades.

To keep things simple, let’s opt for good-old #FF0000, more commonly known as ‘bright red’.

When we input the hex code into the generator, it immediately creates our color scale. Each new color is accompanied by a hex code that I can copy to my clipboard with a single click.

UIColors also creates a set of examples so that you can assess how the colors work in practice. From illustrations and calendars to gradients and on-site buttons, you’ll be able to see precisely how different shades will look when you add different features to your website.

We’re just scratching the surface of UIColors’ capabilities here. The tool also allows you to create different variables, styles, and color guides based on the scales you generate. You can try it out today by visiting the UIColors website or installing it via Figma. Who knows? This application might just become your new best friend.


Shelley Cooke

Shelley Cooke is a blogger and podcaster from Asheville, North Carolina (Go Oilers!). She’s passionate about technology and the role it plays in building communities.

Read Next

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…