Additional colors

[jlarmstrongiv]

Thank you for creating reasonable-colors! I’ve been looking for a library that uses the LCH color system to ensure a similar luminance across color groups.

Unfortunately, there’s not enough colors to truly use this palette in my designs. If you look at other palettes:

• https://tailwindcss.com/docs/customizing-colors
• https://mui.com/material-ui/customization/color/#color-palette
• https://designsystem.digital.gov/design-tokens/color/overview/

You’ll find that they generally have 9 or 10 shades of color. These shades are important visual indicators for interactions like hover and clicks, varying subtle shades between text and icons and backgrounds, etc. Simply put, six shades just aren’t enough.

Since it uses the LCH color space, adding colors may be easy if they are generated. If you tweak them by eye but keep them within a range, it would take more time.

Anyway, I’d love to see this palette grow and use it in my next project! Thank you for picking some cool colors.

[matthewhowell]

Thanks for the kind words! I am definitely aware that most color systems offer more shades, so offering 6 shades was a conscious decision. Who knows if it was right, but it was conscious.

I want to think on it a bit more and I would be interested to read additional pros/cons. One of my core arguments for fewer shades per color is: making it much simpler to build interfaces and palettes without making "contrast mistakes." I wanted people to be able to hold all of the color shades in their heads when they're designing/building, not have to repeatedly look up which components used which shades.

It also seems to me that fewer shades will result in more consistent interfaces. Selfishly, I tend to enjoy building smaller web projects and so, I find myself reaching for smaller, simpler tools. It might be that if your project does need 10 shades, then this just wouldn't be the best color system to choose.

Anyway, I'll think a bit more, perhaps I could add an "extended" set of color shades that would serve larger projects. But, it feels like the constraint of 6 shades is something core to the project.

[jlarmstrongiv]

perhaps I could add an "extended" set of color shades that would serve larger projects

I think that’s the perfect solution! Both regular and extended palettes.

One of my core arguments for fewer shades per color is: making it much simpler to build interfaces and palettes without making "contrast mistakes."

I think it’s possible to see Reasonable Colors scale to more shades without contrast mistakes, e.g. everything 700 and above has sufficient contrast on white and the first color shade. I think it’s possible to have the best of both worlds, rather than an either-or dilemma.

It might be that if your project does need 10 shades, then this just wouldn't be the best color system to choose.

While I could reach for something like TailwindCSS palettes, your palette’s unique appeal is the ease of keeping my designs accessible, without the drawbacks you described.

I would be interested to read additional pros/cons

For me, I think one of the clearest cut needs for more shades are interactive states. The regular button changes colors when hovered, focused, clicked, and pressed. Usually, these are a shade darker or lighter. I think it’s a critical use case, as the jumps between the color pairs are just too steep for it.

Other use cases involve decorations, e.g. icons (which are supposed to be lighter than text), dividers (especially on colored backgrounds), and more.

I may not use every shade I’ve defined (e.g. error and warning colors), but I use most of the primary and neutral shades in my projects. I always start out with a ~10-color palette, as I usually run out of options with anything fewer than 9 shades and usually have too many options with anything more than 12 shades. Though the accessible level of green is not the same as the accessible level of grey.

Thanks for the kind words!

Anyway, yes. Thanks again for creating and open-sourcing Reasonable Colors. The only reason I am pushing for an extended palette is because I would love to use Reasonable Colors in my own projects—regardless, awesome library!

[xeoneux]

I came looking for this as well.
I'd like to integrate a design library that uses the open-color color scheme. To replace those colors with reasonable colors, I'd require good 10 shades of color. They have different use cases:

1 | App background
2 | Subtle background
3 | UI element background
4 | Hovered UI element background
5 | Active / Selected UI element background
6 | Subtle borders and separators
7 | UI element border and focus rings
8 | Hovered UI element border
9 | Solid backgrounds
10 | Hovered solid backgrounds
11 | Low-contrast text
12 | High-contrast text

(Picked up from https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale)

[iamhectorsosa]

I'm also curious if there is a dark mode of the colors in the works?