aenero

These have been implemented starting in version 0.1.0.

Based on feedback I got here so far, I'm working on a version that will add these functionality:

(1) helpers to generate base colors and palettes based on various color relationships, e.g. complementary, split-complementary, double-complementary, analogous, triadic

(2) auto-generating a complete set of palettes and their base colors (opinionated), based on a single color value input (the "primary brand color")

(3) opinionated default "role mapping function"

All the above provide various levels of "automation", from fully customized to single color value input, full automation.

Thanks for the feedback. Hope to get more of your valuable inputs.

Nice one indeed. Thanks for this.

I am gathering useful links like this, and will make them available in the README for further readings.

Great insights there.

Thanks for your feedback. I will copy+paste below my response to a similar feedback to my post.

--- start excerpt ---

The main intention/purpose of the library is to provide a well-defined structure to guide the developer in crafting their color system. Especially when using TypeScript, this benefit is immediately felt.

Since this is the very first release of the lib, it only includes this core functionality. Based on feedback from users, I intend to build up the library to include more things that users would say are useful to them.

Based on your comment, it looks like one such enhancement could be to add functionality to generate additional base colors based on a single "seed" color (e.g. the main brand color), e.g. a triad of base colors (primary, secondary, tertiary) based on Triadic Palette from the primary's base.

This is where feedback like yours will help make this library more helpful to more developers.

--- end excerpt ---

To address your specific example, the pattern you pointed out is not really equivalent to c(a, b). The color mapping function "c" is applied internally when building the individual palettes, not to (a, b).

I will try to make my example in the README a little less contrived, as I can see where the confusion is coming from.

Also when in the future versions this library will bundle various color mapping functions (again, based on user feedback), the structure provided by the library will make more sense because the "c" part there would be any one of the pre-built functions that you can just pass to the `colorScheme()` helper.

Again I appreciate your insights.

Thanks for your feedback.

The main intention/purpose of the library is to provide a well-defined structure to guide the developer in crafting their color system. Especially when using TypeScript, this benefit is immediately felt.

Since this is the very first release of the lib, it only includes this core functionality. Based on feedback from users, I intend to build up the library to include more things that users would say are useful to them.

Based on your comment, it looks like one such enhancement could be to add functionality to generate additional base colors based on a single "seed" color (e.g. the main brand color), e.g. a triad of base colors (primary, secondary, tertiary) based on Triadic Palette from the primary's base.

This is where feedback like yours will help make this library more helpful to more developers.

Thanks for pointing this out.

Admittedly a lot of pointers like this are missing in the README, because there's just a lot about Color Theory and generally the science behind color, than what my documentation has space for.

Can you recommend a link to a nice website where users can learn more about things like this? I would like to add that link to the README.

I appreciate your insights.

Thanks for your feedback.

This area is where TypeScript would play nicely. The library implements types that fully utilize generics to define and impose restrictions for color keys, as well as ensuring type consistency across the color system. * This is the next item in my list to add to the documentation. *

So for example, you can easily implement a color system similar to Material Design 3 that only accepts these color keys: 0 | 10 | 20 | 30 ... 90 | 95 | 98 | 100. But as this is not every color system's approach, the library adopts the least restrictive default, so you can say it's less opinionated.

But for pure JS projects, custom color mapping can do the job if your design system prescribes discrete color keys for palette colors.

Fair point. Thanks for pointing that out. Will update the README.

Hi. Thanks for your comment. This library provides the foundation for crafting any sort of color system. The choice of whether your color system's palettes should consist of complementary vs. analogous vs. other relationships of colors is entirely up to you, and the library makes it easy for you to systematically define that in code (by creating a custom "color mapping function", which is discussed in the README).

Although the library is not a color generator per se, it has one built-in palette generator (color mapping function), which is tonal/monochromatic--chosen as default because it's the most common palette type used by popular design systems like Material Design. You can use third-party libraries to aid writing any additional color mapping function you want to implement. (I can also include additional color mappings based on feedback.)

Ultimately, what simpler-color provides is a well-defined structure for your custom color system that works well with various color-generator libraries.

Glad you find it useful. And do let me know if you have suggestions on how to further improve its functionality. I've been using it on personal projects for a while now, but just published it recently. User feedback is definitely most welcome.

Hi! Just to quickly introduce a library that I recently published...

Using a proper color system for your UI ensures a cohesive, more polished look for your application. This library makes it super easy for you to create your very own color system.

Works both in browser and Node, and whichever UI framework/libraries you're using.

Hope you find this useful.