What is the difference between Linear and HSL shading?

Linear shading adds black to the color, while HSL shading adjusts the lightness component, which often feels more natural to the human eye.

Can I export the generated colors?

Yes, the tool displays HEX, RGB, and HSL codes for every generated shade, which you can copy directly into your CSS or design software.

How many shades can I generate at once?

You can generate between 2 and 12 shade variations in a single operation.

What does the 'Shade Intensity' setting do?

It controls the maximum darkness of the final shade in your sequence, ranging from 0.1 (subtle) to 1.0 (maximum darkness).

Can I use custom steps for the shades?

Yes, by selecting 'Custom Steps' as your distribution method, you can input specific values to control the exact darkness of each shade.

Elysia Tools

Navigation

Design

Color Shade Generator

Generate darker variations of a color by adding black, creating rich shades for depth and contrast in design

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Inputs

Options are grouped so long tools stay easier to scan.

11 options

ContentPaste or type the main input values.1

Custom Step ValuestextOptionalComma-separated values (e.g., 0.1,0.3,0.5,0.7,0.9)

SettingsAdjust formats, ranges, numbers, and modes.5

Base ColorcolorRequiredShade MethodselectOptionalNumber of ShadesnumberOptionalHow many shade variations to generateShade IntensitynumberOptionalMaximum darkness (0.1-1.0)Step DistributionselectOptional

TogglesEnable or disable optional behavior.5

Include Original ColorcheckboxOptionalEnabled when checkedShow HEX CodescheckboxOptionalEnabled when checkedShow RGB ValuescheckboxOptionalEnabled when checkedShow HSL ValuescheckboxOptionalEnabled when checkedGenerate Extended PalettecheckboxOptionalEnabled when checked

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Color Shade Generator

Run this tool

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. UI Hover State Palette

2. Data Visualization Depth

FAQ

Color Code Samples

Android Image Processing Java Samples

Android Image Processing Kotlin Samples

Web Image Processing Python Samples

Color Analogous

Color Gradient Generator

Color Hue Shifter

Color Lighten/Darken

CSS Effects, Palettes, and Design Token Generators

Color Design & Color Space Conversion Tools

Color Space Conversion Tools for Web and Print

Web Accessibility Audit and Accessible Color Tools