npm promotes metadefinitions
    Have ideas to improve npm?Join in the discussion! »

    theme-color-shades
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.8 • Public • Published

    Theme Color Shades

    oclif Version Downloads/week License PRs Welcome

    CLI command to create a group of color shades ready to be used in your UI library.

    Usage

    npx theme-color-shades a12345 # or any 6-digit hex color to serve as reference. 
     
    # To output as an array 
    npx theme-color-shades a12345 --format array

    You can also choose them in themecolorshades.com and see how it displays in UI examples or to change the factors used in the algorithm.

    Integration

    Rationale

    This work is heavily based on Refactoring UI book.

    When you choose a color to your application, you probably going to need a lighter or darker version of it to use in a background or text, for example.

    Usually, a set of shades has 10 elements, going from 50 to 900, being 900 the darkest one:

    {
      "50": "#fce8f0",
      "100": "#f5bcd1",
      "200": "#eb93b0",
      "300": "#dc6f90",
      "400": "#cf496d",
      "500": "#b63054",
      "600": "#90233d",
      "700": "#6c1426",
      "800": "#430a14",
      "900": "#170306"
    }

    Converting the color to HSL format, from #a12345 to hsl(344, 64%, 38%), the algorigthm changes these 3 elements:

    • Lightness: Goes from 5 to 95%.
    • Hue: By starting in the middle of the set, rotate towards the nearest light hue in the color wheel for the 50-400 shades and rotate to the nearest dark hue for the 500-900 shades.
    • Saturation: Raise the saturation in the edges, decrease it in the center.

    "The color choosing process should not be done by math"

    Yes, of course. This process above may not work for all colors or may not give the expected result. However, for non-designers, picking a full shade may be a difficult task and Theme Color Shades aims to speed up it and give a solid set of shades that can always be changed.

    To mitigate this, in the website, you can change the default multiplying factors to Hue and Saturation that generate the shades :)

    If you want to propose a change to this process, feel free to open an issue or a pull request.

    Related Work

    Keywords

    Install

    npm i theme-color-shades

    DownloadsWeekly Downloads

    9

    Version

    0.1.8

    License

    MIT

    Unpacked Size

    10.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar