Skip to content
Toolars
Explore
Report bug

Design · Local utility

Color Shades Generator

Generate 3-20 deterministic shades around a base color, pinned in the middle and capped off pure black and white, as CSS custom properties.

Task path / input to outcome

Set the base color

Runs locally · Nothing is uploaded

How Color Shades Generator works, privacy, and related tools

Task path / input to outcome

How to generate a color shade scale

  1. 01

    Set the base color

    Enter a hex value under Base color — #RGB, #RGBA, #RRGGBB, and #RRGGBBAA all work, and the field opens with #6D5EF8. The base color always sits in the middle of the finished scale.

  2. 02

    Choose the number of shades

    Set Number of shades to an integer from 3 to 20 — the default is 9. An odd count balances the darker and lighter sides evenly around the base; an even count still centers the base and gives the light side one extra swatch.

  3. 03

    Generate the ramp

    Press Generate shades. The palette runs from deep shades through your base color to light tints, and every swatch is numbered and labeled with its hex value, so position 1 is always the darkest step.

  4. 04

    Check the blend behavior

    Shades below the base are mixed toward black and tints above it toward white, but the blend never goes more than 78% of the way to either extreme. The end steps stay chromatic and usable instead of collapsing into near-black or near-white.

  5. 05

    Load the sample scale

    Press Load sample to generate seven shades around #0EA5E9 — a complete reference run you can inspect before entering your own brand color. Reset restores the #6D5EF8 base and the count of 9.

  6. 06

    Copy or download the tokens

    Press Copy output to copy a :root block of --toolars-shade-1 … custom properties, or Download to save it as toolars-color-shades.css, ready to paste into a stylesheet. Each swatch card also shows its hex value for one-off copying.

Tool facts

Processing
In your browser
Input leaves this device
Never
Retention
Nothing is stored
Price
Free

Your input stays in the browser.

Color Shades Generator uses its verified local execution path and does not create a hidden input or output history.

Local execution

Runs inside the current browser tab.

No hidden processing

Active tool data never becomes a Toolars document record.

No account required

Use the core workflow without creating a profile. Favorites sync to your account after you sign in.

Immediate reset

Clear the tab and the active working data is gone.

What Color Shades Generator actually does

A brand color arrives as a single hex value, but a real interface needs a whole scale: a darker hover state, a subtle background tint, a border one step away from the base. Picking those steps by eye drifts between screens and between team members. Color Shades Generator interpolates the ramp deterministically around your base color, keeping the base pinned in the middle and the extremes off pure black and white. It exports the result as CSS custom properties with stable numbered names, ready for a design-token file — computed locally, never uploaded.

Common questions

How many shades can one scale have?
Between 3 and 20, set with the Number of shades field; the workspace defaults to 9. A count outside that range is rejected with a message that names the limit.
How is the scale computed?
Deterministically: shades below the base are mixed toward black, tints above it toward white, and the base color itself always holds the middle position. The blend is capped at 78% toward either extreme, so no step reaches pure black or pure white and every stop stays usable.
What changes with an even number of shades?
The base color still holds the middle position, but the two sides cannot mirror each other exactly: an even count gives the lighter side one more swatch than the darker side. Choose an odd count like 9 or 11 when you want a perfectly symmetric ramp.
Does the scale preserve transparency?
Yes. If the base color carries an alpha byte — for example #6D5EF8CC — the same alpha is kept across the whole ramp, and the exported hex values gain the alpha byte whenever the base alpha is below 1.
What format does the export use?
A :root block of CSS custom properties named --toolars-shade-1 through --toolars-shade-N holding the hex values, downloadable as a .css file or copied to the clipboard. Each swatch card also displays its hex value for direct copying.
Is the color sent anywhere?
No. The whole ramp is computed inside this browser tab, inputs and results never leave it, and no account is required.

Keep reading

Continue in Design

Related tasks, not a dead end.

Move into another focused workspace without returning to the full index.

CSS Loader Generator

Design an orbit-ring or three-dots loading spinner with size, stroke, speed, and color controls, and copy CSS that respects reduced motion.

Create

CSS Checkbox Generator

Style a custom checkbox with size, border, and state colors, and copy CSS that keeps a real, keyboard-accessible input underneath.

Create

CSS Switch Generator

Design a pure-CSS toggle switch with track, thumb, and two-state colors, and copy code with focus and reduced-motion handling included.

Create

CSS Clip Path Generator

Edit polygon points by dragging, keyboard or coordinates. Start with four presets and copy a clip-path declaration or full CSS, locally.

Create