Exploring Theming and Color Naming

As a front-end developer, I’ve always been intrigued by how others code their websites, so I often explore design systems whenever I find one.

Late last year, a conversation with Geoff Graham sparked deeper thoughts about website theming. (If you don’t know him, he’s the chief editor here, so he’s a big deal.)

I’ve been observing, pondering, and exploring:

– How can we create better themes?
– How can we allow increased flexibility in theming?
– How can we allow more colors to be used, making sites more vibrant and dimensional instead of flat?

Today, I want to discuss some patterns the community is using and propose improvements for achieving both flexibility and beauty.

Hope you’re ready for this journey!

### Color Palettes

Let’s start with colors, as they’re essential for theming.

This problem seems largely solved. Many systems now support various hues, tints, and shades, adding life to designs. For instance, [Tailwind CSS](https://tailwindcss.com/docs/colors) offers a wide array of colors and their tones.


[Open Props](https://open-props.style) by [Adam Argyle](https://nerdy.dev) provides even more tones, up to 13 per color.


[Pico CSS](https://picocss.com/docs/colors) introduces 19 different tones per color.


It’s not about the number of tones but having enough to create subtle effects for different design parts.

#### Designing Your Own Palette

While these libraries offer good starting points, I argue against using them directly.

Why?

**Colors create differentiation**, which leads to distinction and identity.

You already know this:

– Sites using Bootstrap look like Bootstrap.
– Sites using Tailwind look like Tailwind.
– Sites using shadcn look like that too…

Some creators can break the mold using Tailwind without it looking like Tailwind, but they tweak many things.

Color is crucial, but typography, spacing, corner roundness, etc., are also important. That’s a topic for another day, possibly best covered by [Jack McDade](https://jackmcdade.com) of [Radical Design](https://radicaldesigncourse.com).

To stand out, **create your own color palettes**.

Creating palettes might seem daunting, given the emphasis on accessibility and potential consequences of getting it wrong. But don’t be afraid.

**If you want your site to reflect your (or your company’s) unique identity, you must do what you must.**

Remember just two words: **Sufficient contrast.**

That’s it for accessibility (design-wise).

#### Designing Color Palettes by Hand

I design color palettes by hand in Figma when creating websites. It feels natural to me, maybe influenced by [Jack’s design approach](https://radicaldesigncourse.com).

No need to stress about filling tones from 50 to 950. You won’t know what looks nice until you fit them into the design. Stressing over tones is putting the cart before the horse.

For example, when designing [Splendid Labz](https://splendidlabz.com), I omitted many color tones. Here’s an example of the pink color variables.


– Notice I skipped values between 50 and 400? I didn’t need them.
– Notice I added `200d` and `600d`? I wanted a desaturated variant of these colors, which existing systems couldn’t capture, so I added `d` for desaturated.

[Check out the results yourself](https://splendidlabz.com). It’s not too shabby, with splashes of color that might bring joy when scrolling through the site.


It’s not too hard. Don’t be scared to try.

#### Designing Color Palettes Programmatically

If you prefer generating colors programmatically (with optional hand-tweaking), here are some generators to consider:

Of these, I highly recommend checking out [@meodai’s RampenSau](https://web-cdn.bsky.app/profile/meodai.bsky