This content originally appeared on Go Make Things and was authored by Go Make Things
I’ve been putting the finishing touches on the color palette for Kelp, my UI library for people who love HTML.
Today, I wanted to share how it works, and give you a sneak peak of the color palette generator I’m building to make theming Kelp without build tools fast and easy.
Let’s dig in!
Building a palette from base colors
What I want users to be able to do is pick a single color for each hue in the rainbow and automatically generate a range of brightness/saturation combos for that hue.
This should give you a set of options from very dark to very light that you can use to create background/text options for various components, without having to hard-code each individual color in the palette.
For example, imagine entering #73d7ee, a cyan hue, and getting twelve shades of that hue auto-generated for you, like this…
And with that palette, a dozen named CSS variables that you can use in your code…
:root {
--color-cyan-base: #73d7ee;
--color-cyan-05: #001928;
--color-cyan-10: #00283c;
--color-cyan-20: #00415e;
--color-cyan-30: #00587c;
--color-cyan-40: #006f9a;
--color-cyan-50: #008fbf;
--color-cyan-60: #00add7;
--color-cyan-70: #13c2e0;
--color-cyan-80: #85d8eb;
--color-cyan-90: #c8ecf5;
--color-cyan-95: #e4f6fa;
}This is the backbone of theming in Kelp.
The base colors
Because LGBTQ+ people have been so integral to the creation of the web, and because it’s Pride Month, and because the Progress Flag colors are just so fucking gorgeous, it only seemed fitting that the Progress Pride Flag colors are the base color set for Kelp.
With one exception: yellow.
The hue of yellow used in the Pride Flag has green tones in it that really come out strong in the middle brightness ranges, so I shifted the hue a bit until I found one that still looked good but still looked like yellow throughout the whole palette.
The Progress Flag also doesn’t have indigo in it, so I blended the purple and blue together to find an indigo hue that’s harmonious with the other colors.
Here are the official base colors for the palette:
- red:
#e50000 - orange:
#ff8d00 - yellow:
#ffc107 - green:
#028121 - cyan:
#73d7ee - blue:
#004cff - indigo:
#5936c2 - purple:
#760088 - pink:
#ffafc7 - gray:
#808080
Adjusting base colors to create a palette
There are a lot of color space algorithms for adjusting colors.
For a while, HSL—Hue Saturation Lightness—was one of the more popular ones for creating palettes. But it has a tendency to create palettes that feel a bit less natural.
LCH—Lightness Chroma Hue—uses a color graph that more accurately reflects how the human eye perceives color.
- Lightness is how much or little whiteness is mixed into the color.
- Chroma is how much of the color is mixed in.
- Hue is the color itself.
A lot of building the Kelp palette was finding the right mix of lightness and chroma at each stop in the palette.
Once you go below around 20 lightness, the shades all look basically like black. For the lighter shades, you need to reduce the chroma or they end up too dark to use as background colors against dark text.
After a bunch of trial-and-error, here’s where I ended up:
| Shade # | Lightness | Chroma |
|---|---|---|
| 5 | 18.5 |
8 |
| 10 | 24 |
10 |
| 20 | 32.5 |
13.5 |
| 30 | 40 |
16 |
| 40 | 47 |
18.5 |
| 50 | 57 |
20 |
| 60 | 67 |
17.5 |
| 70 | 75 |
13 |
| 80 | 83.5 |
8.5 |
| 90 | 92 |
4 |
| 95 | 96 |
2 |
The one exception is grayscale colors, whose chroma is already 0 or close to it. For those, the chroma shouldn’t get adjusted, or the output will be very different from the input.
Building a color palette generator
To pull this all together, I used the awesome color-convert JavaScript library from Josh Junon.
You pass in your desired base color for each color in the palette as a hex code. The color-convert library converts the hex code into LCH, which gets us access to the hue for the color.
I can then loop over each of the lightness/chroma combos, passing the hue with the new L and C values back into color-convert to turn LCH back into a hex code for each shade.
The generator then spits out a bunch of copy/paste CSS variables for each hue in all of its shades.
Adjusting the vibrancy
From testing, one “issue” with this setup is that most hues within in a color spit out pretty similar looking palettes because the chroma is being set to a fixed number.
To provide for more variation, I added a vibrancy field with a range of 25 to 150. This represents how much to adjust the chroma up-or-down, as a percentage.
When generating the shades, I multiply the chroma by this percentage.
Try it!
You can try the generator for yourself on CodePen.
Pop in some different colors, adjust the vibrancy in different directions, and see how your color palettes come out using your favorite brand colors.
If you see anything weird or having any feedback, get in touch and let me know! This is still in development, so any feedback you have is invaluable.
Semantic Colors
Having named color variables is cool and all, but working on projects, you generally don’t want to have to swap out --color-blue-* for --color-green-* all over your CSS files whenever there’s a rebrand or when switching from one client to another.
Kelp includes a second section that maps different named colors to semantic values:
:root {
--color-primary-muted: var(--color-blue-95);
--color-primary-vivid: var(--color-blue-40);
/* ... */
}These are defined once, in a single location. The rest of the CSS files reference these semantic variables rather than color names.
If you need to update a theme, you can swap out half a dozen semantic names in one spot, and everything else automatically updates… without a build step!
We’ll look more at how that works this week.
Until then, you can learn more at KelpUI.com.
Need a developer but don't need a full-time employee? I now offer subscription full stack engineering. Ship faster and build better systems. Pause or cancel any time.
Cheers,
Chris
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-06-16T14:30:00+00:00) How to create an accessible color palette. Retrieved from https://www.scien.cx/2025/06/16/how-to-create-an-accessible-color-palette/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.