tints-n-shades

The tints & shades generator for CLI lovers 🩶

Usage

Install Tints 'N Shades (TNS) using Bundler.

bundle install tints-n-shades

Run tns generate (or the short variant, tns g) with any color you need tints and shades for in hex format.

 tns g #ff7d00
--primary-100: #ffe5cc;
--primary-200: #ffcb99;
--primary-300: #ffb166;
--primary-400: #ff9733;
--primary-500: #ff7d00;
--primary-600: #cc6400;
--primary-700: #994b00;
--primary-800: #663200;
--primary-900: #331900;

Color Formats

TNS supports outputs in Hex, HSL and RGB formats using the --color-format / -c argument.

tns g #ff7d00 -c hex
--primary-100: #ffe5cc;
--primary-200: #ffcb99;

 tns g #ff7d00 --color-format hsl
--primary-100: hsl(29 100 90);
--primary-200: hsl(29 100 80);
...

 tns g #ff7d00 --color-format rgb
--primary-100: rgb(255 229 204);
--primary-200: rgb(255 203 153);
...

Output Formats

TNS supports outputting color palettes as CSS variables, SCSS variables, or Tailwind configuration.

tns g #ff7d00 -o css
--primary-100: #ffe5cc;
--primary-200: #ffcb99;
...

tns g #ff7d00 -o sass
$primary-100: #ffe5cc;
$primary-200: #ffcb99;
...

tns g #ff7d00 -o tailwind
{
  "primary": {
    "100": "#ffe5cc",
    "200": "#ffcb99",
    ...
  }
}
...

Others

To change the name of your color use the --name / -n argument. For additional configuration options see

tns help generate

Why another Color generator?

While there are numerous palette, tint and shade generators out there, none of them quite fit my use case. That is, taking colors from some palette (e.g. coolors) and generating complete CSS/SASS variables in various formats.

There are tools that will only output Hex variables, other support only Tailwind, and so on. There are none that provide that level of customization that I was looking for.

Also: None that work on the command line! TNS is a simple executable that lends itself perfectly for scripting.

Credit

This project was primarily inspired by maketintsandshades.com and tints.dev. The starting point code-wise was the color gem. The RGB to HSL conversion algorithm is based off of this Stackoverflow answer

Contributing

Thank you for contributing! :heart:

Please use GitHub issues to submit bugs or feature requests.

License

The gem is available as open-source under the terms of the MIT License.

Code of Conduct

Everyone interacting in the Tints 'N Shades project's codebases, issue trackers, chat rooms, and mailing lists is expected to follow the code of conduct.