Color Shades Generator
Generate beautiful light to dark shades of any color.
Color shades generator workspace
HEX, RGB, HSL, or CSS color name
Generated locally in your browser. Your color data is never sent to a server.
Generated 11 color shades from #B45E62.
What is a Color Shades Generator?
A Color Shades Generator creates a stepped light-to-dark palette from one solid base color. It helps designers and developers explore lighter tints, the original base color, and darker shades for UI states, charts, backgrounds, borders, and design specs without manually adjusting each color.
How It Works
Generate color shades
-
Enter a base color
Use HEX, RGB, standard HSL, or a browser-recognized CSS color name.
-
Review the scale
The tool creates five lighter shades, the exact base color, and five darker shades.
-
Choose a format
Switch the displayed values between HEX, RGB, and HSL.
-
Copy the palette
Copy a single shade or copy all displayed values, one per line.
Features
Built for focused palette work
-
11 shade stops
Creates five lighter shades, the base color, and five darker shades.
-
Flexible color input
Accepts solid HEX, RGB, HSL, and browser-recognized CSS named colors.
-
Perceptual shade generation
Uses OKLCH lightness steps for smoother visual changes than simple RGB math.
-
HEX, RGB, and HSL output
Switch formats before copying individual shades or the full palette.
-
Copy-ready values
Each shade card copies its value, and Copy All copies the whole visible scale.
-
Browser-local processing
Color parsing and shade generation run on your device.
Frequently Asked Questions
Quick answers to common questions about using this tool.
What color formats can I enter? +
You can enter solid HEX colors, CSS rgb() values, standard comma-form hsl() values, and opaque CSS color names recognized by your browser. Alpha colors such as rgba(), hsla(), and transparent are not supported in V1.
Are these Tailwind colors? +
No. The 50 to 950 labels are orientation labels for light-to-dark shades. They are not a Tailwind-compatible palette guarantee.
Does the base color change during generation? +
No. The BASE stop stays the exact normalized input color. Only the generated lighter and darker shades are adjusted.
Why can very light or very dark colors have subtle shade differences? +
Near white or near black there is less available lightness range. The tool keeps colors valid in sRGB, so some edge palettes can look compressed.
Can I copy every shade at once? +
Yes. Copy All copies the currently displayed values only, one per line, in HEX, RGB, or HSL depending on the selected format.
Is my color data uploaded or stored? +
No. Color parsing and shade generation run locally in your browser. The color values are not sent to a server or saved by PotatoTools.
Related Tools
HEX to RGBA Converter
Convert HEX colors to copy-ready RGBA with live opacity control.
Open ToolRGBA to HEX Converter
Convert RGB and RGBA colors to copy-ready 8-digit HEX.
Open ToolQR Code Generator
Generate static QR codes and download PNG or SVG files.
Open ToolCanonical Tag Generator
Generate canonical link tags for single or bulk URLs.
Open Tool