Easy24Easy24
PDFImageVideoTextConvertGenerateCalculateDeveloperSecurityTime

Color Shades

Generate tints and shades from one base color. HSL or RGB mixing, adjustable strength, Tailwind-style 50–950 tokens, and CSS/JSON export — unlimited.

PrivateIn your browserInstantUnlimited

HSL mode shifts lightness (and eases saturation) — usually cleaner tints and shades.

50

#bed5d3

100

#93c8c4

200

#62c1bb

300

#36b6ae

400

#20958d

500

#0f6e68

600

#135854

700

#144542

800

#143331

900

#122322

950

#0e1515

{
  50: "#bed5d3",
  100: "#93c8c4",
  200: "#62c1bb",
  300: "#36b6ae",
  400: "#20958d",
  500: "#0f6e68",
  600: "#135854",
  700: "#144542",
  800: "#143331",
  900: "#122322",
  950: "#0e1515",
}

How it works

1

Pick a base color

Use the picker or paste HEX, rgb(), or hsl(). The middle swatch (500) is your base.

2

Tune the scale

Choose HSL or RGB mixing, how many tints/shades on each side (1–8), and how far toward white/black (strength).

3

Copy or export tokens

Click a swatch to copy HEX. Export Tailwind-style keys (50–950), CSS variables, JSON, or CSV.

What are color shades?

Tints mix a color toward white; shades mix toward black. Design systems use these steps as tokens (50–950). This page generates them locally — Easy24 never receives the color you pick.

Why use this tool

  • Tints and shades from one base color
  • HSL and RGB generation modes
  • Adjustable steps and strength
  • Tailwind-style 50–950 tokens (at 5 steps)
  • CSS, JSON, CSV export
  • Unlimited — no daily cap

Questions

What does Color Shades do?

It builds a light-to-dark palette from a single base color for UI tokens, Tailwind scales, and CSS variables.

HSL vs RGB shades?

HSL mainly changes lightness; RGB blends toward white/black. HSL often keeps hue looking more consistent.

Why 50–950?

With 5 steps on each side, tokens match a common Tailwind-like scale where 500 is the base color.

Is there a daily limit?

No. This tool has no daily cap and needs no account.

Do I need an account?

No. Open the page and use it.

Does it work on a phone?

Yes. It runs in the mobile browser.

Related tools?

Use Color Converter for format conversion, or Color Mixer to blend two different colors into a ramp.

If Easy24 helped, buy a coffee

Tools stay free in your browser. One-time thanks via Kreosus. Turkish cards work.

Buy a coffee

Similar Convert tools

See all

Base64 Encode / Decode

Convert

Encode and decode UTF-8 text as Base64 or Base64URL. Live conversion, MIME line wrap, byte stats, and hex view — entirely in the browser.

Open

File ⇄ Base64

Convert

Encode any file to Base64, Data URI, HTML, CSS, JSON, XML, or Markdown — or paste Base64 to download the file. URL-safe and MIME wrap options. Runs in this tab.

Open

Image ⇄ Base64

Convert

Convert images to Base64 or data URLs and decode them back. Live preview, HTML/CSS/Markdown snippets, MIME and pixel size — nothing uploaded.

Open