Show HN: Create your own complete UI color system easy as 1-2-3

Re:Show HN: Create your own complete UI color system easy as... by oefrha on Wednesday March 16, 2022 @05:55AM (#30696959)

Sorry, isn't this library equivalent to -- using the example in the README -- the following:

  import Color from "color";
  
  const base = {
    primary: "#336669",
    secondary: "#57614E",
    neutral: "#5E5F5A",
  };
  
  const shade = (c: string, lightness: number) => Color(c).lightness(lightness).hsl().string();
  
  const uiColors = {
    primaryButton: shade(base.primary, 40),
    primaryButtonText: shade(base.primary, 95),
    surface: shade(base.neutral, 98),
    text: shade(base.neutral, 10),
  };

I guess it's a teeny, tiny bit simpler (or really, just different)? You still need to come up with your own base colors and all the shades of lightness. The library doesn't seem to make the choices simpler, at all.

[ Parent | on HN ]

Re:Show HN: Create your own complete UI color system easy as... by aenero on Wednesday March 16, 2022 @06:30AM (#30697149)

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.

[ Parent | on HN ]