Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hschne/tints-n-shades
The tints & shades generator for CLI lovers 🌈
https://github.com/hschne/tints-n-shades
cli css ruby sass tailwind thor
Last synced: about 2 months ago
JSON representation
The tints & shades generator for CLI lovers 🌈
- Host: GitHub
- URL: https://github.com/hschne/tints-n-shades
- Owner: hschne
- License: mit
- Created: 2024-03-06T14:43:54.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-03-25T11:34:23.000Z (9 months ago)
- Last Synced: 2024-11-01T22:50:21.921Z (about 2 months ago)
- Topics: cli, css, ruby, sass, tailwind, thor
- Language: Ruby
- Homepage: http://www.hansschnedlitz.com/tints-n-shades/
- Size: 16.4 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
### The tints & shades generator for CLI lovers 🩶
## Usage
Install the Tints 'N Shades (TNS) gem.
```bash
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.
```text
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.
```text
tns g #ff7d00 -c hex
--primary-100: #ffe5cc;
--primary-200: #ffcb99;
...
```
```text
tns g #ff7d00 --color-format hsl
--primary-100: hsl(29 100 90);
--primary-200: hsl(29 100 80);
...
```
```text
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.
```text
tns g #ff7d00 -o css
--primary-100: #ffe5cc;
--primary-200: #ffcb99;
...
```
```text
tns g #ff7d00 -o sass
$primary-100: #ffe5cc;
$primary-200: #ffcb99;
...
```
```text
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
```text
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](https://coolors.co/)) 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](https://maketintsandshades.com/) and [tints.dev](https://www.tints.dev/). The starting point code-wise was the [color gem](https://github.com/halostatue/color). The RGB to HSL conversion algorithm is based on [this Stackoverflow answer](https://stackoverflow.com/a/39147465)
## Contributing
Thank you for contributing! :heart:
Please use [GitHub issues](https://github.com/hschne/mr-loga-loga/issues) to submit bugs or feature requests.
### Compiling to WASM
TNS runs in the browser. To compile to Wasm using [ruby.wasm](https://github.com/ruby/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](https://opensource.org/licenses/MIT).
## 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](https://github.com/hschne/tints-n-shades/blob/master/CODE_OF_CONDUCT.md).