tints-cli

A Rust CLI that generates Tailwind-style color palettes (50-950) from a single input hex color.

Attribution: This project's palette generation algorithm is inspired by tints.dev by Simon Stenbäck.

Why

I wanted a tool to generate consistent CSS color palettes from a single brand color. The tints.dev approach of creating 11 shades (50-950) is useful beyond Tailwind—it's a solid system for any design work.

More importantly, I wanted this accessible to coding agents. CLI tools are more efficient for AI-assisted workflows than browser-based alternatives:

"CLI invocations are more token-efficient: they avoid loading large tool schemas and verbose accessibility trees into the model context, allowing agents to act through concise, purpose-built commands." — Microsoft Playwright MCP documentation

A coding agent can run tints-cli 3B82F6 -o css -n primary and get exactly what it needs without navigating a web UI.

Installation

From crates.io:

cargo install tints-cli

Or build from source:

git clone https://github.com/darrenmothersele/tints-cli.git
cd tints-cli
cargo install --path .

Usage

tints-cli <HEX> [OPTIONS]

Examples

# Basic usage - generates palette with input at stop 500
tints-cli 1E70F6

# With hash prefix
tints-cli "#3B82F6"

# Custom anchor stop
tints-cli FF5500 -s 400

# Linear mode (direct HSL) instead of perceived (HSLuv)
tints-cli 1E70F6 -m linear

# JSON output with OKLCH format
tints-cli 1E70F6 -o json -f oklch

# CSS custom properties
tints-cli 3B82F6 -o css -n blue

# HSL format in table
tints-cli 1E70F6 -f hsl

# With hue and saturation tweaks
tints-cli 1E70F6 -H 2 -S 5

Options

Option	Description	Default
-s, --stop <STOP>	Anchor stop (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)	500
-m, --mode <MODE>	Color mode: linear or perceived	perceived
-H, --hue <H>	Hue tweak factor	0
-S, --sat <S>	Saturation tweak factor	0
--lmin <LMIN>	Minimum lightness (0-100)	0
--lmax <LMAX>	Maximum lightness (0-100)	100
-f, --format <FORMAT>	Output format: hex, hsl, oklch	hex
-o, --output <OUTPUT>	Output style: table, json, css	table
-n, --name <NAME>	Color name for CSS output	color

Output Formats

Table (default)

Palette for #1E70F6 (stop 500, perceived)
┌──────┬─────────┬─────────┐
│ Stop │ Hex     │ Preview │
├──────┼─────────┼─────────┤
│   50 │ #EDF0FE │ ██      │
│  100 │ #DBE1FE │ ██      │
│  ... │ ...     │ ...     │
│  500 │ #1E70F6 │ ██ ←    │
│  ... │ ...     │ ...     │
│  950 │ #010F2E │ ██      │
└──────┴─────────┴─────────┘

JSON

tints-cli 1E70F6 -o json

[
  { "stop": 50, "hex": "#EDF0FE" },
  { "stop": 100, "hex": "#DBE1FE" },
  ...
]

CSS

tints-cli 1E70F6 -o css -n primary

:root {
  --primary-50: #EDF0FE;
  --primary-100: #DBE1FE;
  ...
  --primary-950: #010F2E;
}

Color Modes

• perceived (default): Uses HSLuv for perceptually uniform lightness distribution
• linear: Direct HSL manipulation for more traditional color scaling

How It Works

1. Parses the input hex color
2. Places it at the anchor stop (default 500)
3. Creates a lightness distribution scale interpolating between:
   • Stop 0 → maximum lightness (default 100)
   • Anchor stop → input color's lightness
   • Stop 1000 → minimum lightness (default 0)
4. Applies optional hue and saturation tweaks based on distance from anchor
5. Generates 11 output swatches (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)

The input color is always preserved exactly at the anchor stop.

License

MIT