mdigi.tools

    Example: #808080 or rgb(128, 128, 128) or gray or

    Color Picker
    {{ numShades }}

    Select the color shade above to get color values below

    Click to copy value in desired type above.

    Color Shades Generator

    Color Shades Generator

    Generate shades of a color online. Enter color in rgb, hex, hsl or hsv and get different shades of the color.

    Categories →Design Tools, Color Tools
    How to use?

    How Does Color Shades Generator Work?

    Using color shades generator you can generate multiple shades of a single color. Simply enter color in rgb, hex, hsl or hsv and get different shades of the color. You will also get values in different formats for each of these shades. You can easily click on the shades to get the color values below the shade palette. Clicking on these values will automatically copy it to your clippboard.

    By default the color shades generator creates 10 shades for the given color however you can adjust the color shades slider to generate 2 to 25 shades. If you need inspiration for color, then click on generate random color button or use random color generator.

    How do I change the color for which I need color shades?

    If you want to extract colors from new color then kindly enter your color in the text area below 'Enter Color' heading. You can enter color in any format such as RGB, HEX etc or write its name such as yellow, pink, red. You can also use the color picker provided to pick your color. Depending on your browser, you can use this color picker to grab colors from your screen too.

    How many shades of a color can the tool generate?

    Our tool can generate upto 25 shades of a single color. You can move the color shades slider to change the number of shades generated.

    I want shades of a particular color such as Pastel or Material.

    Please use our pastel color generator or material color generator to generate such colors and then use this tool 'color shades generator' to generate shades of it.

    How to Use Color Shades Generator?

    • Enter value of your color in textbox above in any format (RGB, HEX, RGBA, HSL, HSV etc.)
    • Or, use the color picker to pick your color.
    • Select the number of shades that you want to generate using the slider.
    • Different shades of the color will be generated which you can select to show more details.
    • Click to copy value of selected color shade in HEX, RGB, HSL or HSV.
    • Value will be copied directly to your clipboard.
    • In case your browser does not support copying values directly to clipboard via script then you can do a manual copy.
    • You can use the "Random" button to generate a random starting color for generating shades.
    • You can share the color shades using the URL in address bar as it updates to reflect current color.
    • We do not store any data entered by you and everything is done inside your browser.

    Credits

    • Vue.js - The Progressive JavaScript Framework
    • TinyColor - Fast, small color manipulation and conversion for JavaScript
    • SweetAlert - A beautiful replacement for JavaScript's alert