I Made an Automatic Color Theme Generator for Tailwind CSS
Tags: javascript, webdev, beginners, react
Published: 2022-07-17 11:53:54

![The landing page for huewind.jordantwells.com](https://cdn-images-1.medium.com/max/800/0*NBk7w9p9esfycQee.png)

I have recently been obsessed with the [T3 stack](https://create.t3.gg) ([Next.js](https://nextjs.org), [TypeScript](https://www.typescriptlang.org), [Tailwind CSS](https://tailwindcss.com), [Prisma](https://www.prisma.io), and [tRPC](https://trpc.io)). As part of that I have been using Tailwind CSS to quickly layout the format of _every_ project I have been working on for the past month. It makes styling as symbol as writing classes into your [JSX](https://reactjs.org/docs/introducing-jsx.html) or HTML.

But I wanted more options. The default colors provided by the Tailwind team are [_wonderful_](https://tailwindcss.com/docs/customizing-colors), but I’ve started too many projects with ‘_bg-slate-700_’. I decided it was time for me to change something. And what better way to do that than to make my own tool.

[HueWind](https://huewind.jordantwells.com) is a site devoted to making cohesive Tailwind CSS themes as easy as possible. Drawing inspiration from [pixel art palette creators](https://lospec.com/palette-list), I placed a heavy emphasis on clean blending between a theme’s lightest value, primary colors, and darkest value.

Try it out here, [huewind.jordantwells.com](http://huewind.jordantwells.com) , and as always the source code can be found on my GitHub at [github.com/jordantwells42/huewind](http://GitHub.com/jordantwells42/huewind).

![Choosing complementary colors at huewind.jordantwells.com](https://cdn-images-1.medium.com/max/800/0*hCQ9ySq_VJ6A7jlj.png)

#### Why use this over any other palette generator?

The key behind this project is its _awareness_ of all the colors on your site. Typical color swatches are generated in a _vacuum,_ where base colors are unaware of their relationship to other base colors, and the entire swatch is unaware of its relationship to the lightest and darkest tones on the website.

HueWind automatically generates complementary theme colors for you as part of a tetradic color scheme. This ensures a clear relationship between your primary theme color and the ones that support it.

More importantly, color swatches are generated with respect to the lightest and darkest tones on your site.

![Choosing the lightest and darkest tones for your site at huewind.jordantwells.com](https://cdn-images-1.medium.com/max/800/0*5PSGMdfvUWPFMfvB.png)

Typical autogenerated color swatches will transition your target color towards a pure white (#FFFFFF) to generate lighter shades and a pure black (#000000) to generate darker ones. While this design can look modern, it also lacks a lot of the soul that hand-picked artistic palettes have.

HueWind instead looks to your chosen lightest shade and darkest shade to create its swatches. A simple change from a pure black to a deep purple or a blinding white to a pale yellow can have wonderful changes to the aesthetic and feel of a website.

![A palette generation by HueWind](https://cdn-images-1.medium.com/max/800/0*1HiYZCFXWEDQJyXf.png)

#### **How does it work?**

HueWind uses [spline interpolation](https://en.wikipedia.org/wiki/Spline_interpolation) to seamlessly transition between the hues, saturations, and values of your light, dark, and base shades.

This uses the 3 points of your light, base, and dark shades to uniquely determine a curve that passes through all of them, setting the X value of the shades to 0, 500, and 1000 respecitvely. It then evaluates this curve at the classic [50–900 values of Tailwind CSS](https://tailwindcss.com/docs/customizing-colors), giving the final output values.

Importantly, for accessibility I automatically choose an accessible text color all across the site using [tinycolor](https://github.com/bgrins/TinyColor). This includes a fallback to using pure black and pure white in case that user decides that their favorite light shade is white and their favorite dark shade is white.

![The immediately usable Tailwind CSS config generated by HueWind](https://cdn-images-1.medium.com/max/800/1*XWf4VP2dtkKP9LAGk-G6nA.png)

#### **Try it out!**

It takes less than a minute to have a palette generated! Use it here at [huewind.jordantwells.com](http://huewind.jordantwells.com) ! And I’m sure you’ll see me using it on my future projects on [jordantwells.com](http://jordantwells.com) .

Jordan