🧰Locly

Color Tint and Shade Generator

Generate tints, shades and 50–950 scales from a HEX color

About This Tool

Tint & Shade Generator builds tints, shades, and a 50–950 scale from one HEX color, with exports for HEX, RGB, CSS variables, or Tailwind config. Runs locally in your browser.

How to Use

  1. Enter a HEX color
  2. Click Generate
  3. Browse the 50–950 scale plus tints/shades
  4. Copy HEX, RGB, CSS variables, or Tailwind
  5. Adjust the base color and regenerate

Common Use Cases

  • Design systems: Seed a palette from a brand color
  • Tailwind: Export a color object snippet
  • UI: Pick lighter/darker variants quickly
  • Accessibility: Explore contrast candidates with related tools
  • Privacy: Generate palettes offline

FAQ

Q1: What is the 50–950 scale?

A stepped light-to-dark ramp similar to design-system scales, derived from your base HEX.

Q2: Can I copy Tailwind config?

Yes. Export a color object snippet suitable for Tailwind theme extension.

Q3: Are 3-digit HEX codes allowed?

Yes. Values like #0af expand to six digits before generating the scale.

Q4: Is my data uploaded?

No. Everything runs locally in your browser and is never uploaded.

Q5: What is tint vs shade?

Tints mix the color toward white; shades mix it toward black.

Related Tools

Color ConverterColor PaletteContrast CheckerCSS Gradient Generator