The tints & shades generator for CLI lovers 🩶

Install the Tints 'N Shades (TNS) gem.

gem install tints-n-shades

Run tns generate (or the short variant, tns g) with any color to generate tints and shades 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;

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);
...

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",
    ...
  }
}
...

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

tns help generate

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

Some tools will only output Hex variables, others support only Tailwind, etc. I was looking for more customization and greater flexibility.

Also, none work on the command line! It's all in the browser, and we just can't have that.

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 on this Stackoverflow answer

Thank you for contributing! ❤️

Please use GitHub issues to submit bugs or feature requests.

TNS runs in the browser. To compile to Wasm using ruby.wasm run:

BUNDLE_GEMFILE=Gemfile-web bundle exec rbwasm build -o site/ruby-web.wasm

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

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.