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.

Base color

Steps each side (5)

Strength (72%)

#bed5d3

100

#93c8c4

200

#62c1bb

300

#36b6ae

400

#20958d

500

#0f6e68

600

#135854

700

#144542

800

#143331

900

#122322

950

#0e1515

Export

{
  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

Pick a base color

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

Tune the scale

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

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. Color Shades is part of Easy24’s conversion toolbox. Your input stays in this tab for normal use; Easy24 does not upload that content to process it. This tool has no daily free-plan cap; use it as often as you need. Typical flow: Pick a base color, choose HSL or RGB, set steps and strength. Copy any swatch or export a Tailwind / CSS token scale. Related tools and reverse conversions appear on the page when a follow-up step is common.

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 use with 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.

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. A one-time tip is optional and helps keep them running.

Buy a coffee

When to use Color Shades

Color Shades is one of those utilities you open for a few minutes, finish the task, and close without leaving a trail of uploads. Generate tints and shades from one base color. These pages are built for everyday strings and small payloads, not for shipping secrets through a public cloud converter. Because Color Shades is bilingual on Easy24, the same workflow works in English or Turkish without changing how the tool behaves. Browser-first processing is the privacy default here: there is no Easy24 document inbox waiting to expire after a timeout for this workflow. This page has no daily free-plan cap, so you can run it as often as you need. When you are done, download or copy what you need, then close the tab. Related tools on the page cover common follow-up steps such as the reverse conversion or a neighboring format.

Similar Convert tools

See all

Text to Base64

Convert

Text to Base64 in your browser. Nothing is uploaded. For the reverse, use Base64 to Text.

Open

Base64URL Converter

Convert

Encode and decode URL-safe Base64 (Base64URL). Convert between standard Base64 and Base64URL for JWTs, query strings, and filenames.

Open

Data URI

Convert

Build or decode data: URLs from files or text. Get CSS, HTML, and Markdown snippets, live MIME/size info, image preview, and download, all in this tab.

Open