Tints
Generate 11-step Tailwind CSS color scales, adjust them with HSL controls and access the API.
About Tints
Tints is a web-based palette generator for Tailwind CSS. Starting from a single hexadecimal color value, it creates an 11-step scale with stops from 50 to 950. The site also provides an API that returns a 50–950 palette from a base hex value.
You can set the base color and choose which stop it represents, with 500 selected by default. Controls are available for hue, saturation, lightness minimum and maximum, hue shift, and saturation shift. You can switch between Linear and Perceived modes and between Lightness and Luminance, view the lightness distribution, and add multiple palettes for demonstration. Output can be copied for Tailwind CSS version 3 or 4 in formats including oklch, hex, and hsl for use in a CSS file.
The tool suits web designers and developers who use Tailwind CSS and need to build custom color scales from a single starting color.
Key features
- Generates 11-step palettes from single hex value
- Adjust hue, saturation and lightness with controls
- Choose base stop from 50 to 950
- Toggle Linear and Perceived palette modes
- Copy output for Tailwind v3 and v4
- Supports oklch, hex and hsl output
Best for: Web designers and developers building custom Tailwind CSS color palettes from a single hex color.
Good for
- Creates 50-950 scale from one hex value
- Offers HSL and lightness controls for adjustment
- Provides copyable output for Tailwind v3 and v4
- Includes API access for design tools
Watch out for
- API currently returns base palette without HSL tweaks
Tints at a glance
- Website
- tints.dev
- Category
- Design & Creative › Color Tools
- Type
- Online tool
- Pricing
- Not confirmed. Check the site
- Platforms
- Web
- Open source
- Not stated
- Language
- English
- Last checked
- Oct 5, 2026 · Online when checked
- Listed
- Oct 5, 2026
Guides for Color Tools
Tints alternatives
Tools and sites you could use instead, ranked by how closely they match.
Generate custom Tailwind CSS color palettes and browse the framework's built-in color values.
Accessible Palette creates color systems using CIELAB and LCh models, with controls for lightness and WCAG contrast ratios.
Pick
24 alternativesGenerate color palettes with Color Palette Pro and adjust the colors using the available palette settings.
Generate color palettes with Pigment's color tool and adjust color combinations.
Colordot offers hue, lightness, and saturation controls for picking colors, with an iPhone app also listed on its page.
ColorBox generates color palettes with customizable hue, saturation, and brightness curves, and exports values for tools including Tailwind CSS.
Popular in Color Tools
Well-known listings from the same topic.
hue.toolshue.toolsAdobe Colorcolor.adobe.comCoolorscoolors.coColor Pickerimagecolorpicker.comSchemeColorschemecolor.comRealtime Colorsrealtimecolors.com
Tints FAQ
What does Tints do?
Tints generates an 11-step Tailwind CSS palette with stops 50 to 950 from a single hexadecimal color value.
How do I use Tints output in Tailwind CSS?
Copy the generated output to the clipboard and paste it into the CSS file with your Tailwind config.
Does the Tints API support HSL adjustments?
No. The API currently returns a palette using the base hex value only, with no HSL tweak options.
Which Tailwind versions and color formats are supported?
The tool lists Tailwind CSS version 3 and 4, with output color modes including oklch, hex, and hsl.
Is something wrong or out of date?
Tell us and an editor will check it.
Own this website?
Claim this listing
Claim the listing and suggest updates yourself. An editor checks every claim first.