hschne/tints-n-shades

The tints & shades generator for CLI lovers 🌈

The tints & shades generator for CLI lovers 🩶

Usage

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;

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

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

Contributing

Thank you for contributing! ❤️

Please use GitHub issues to submit bugs or feature requests.

Compiling to WASM

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

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.