mdigi.tools

    Random Material Color

    Work with this color using tools below
    Or
    Material Color Generator

    Material Color Generator

    Generate random material colors and get values in RGB, HEX, HSL or HSV.

    Categories →Design Tools, Color Tools
    How to use?

    How Does Material Color Generator Work?

    You can use our random material color generator to get a material color picked randomly from the material color pallete. This tool allows you to get the material colors in hex, rgb, hsl or hsv format. You can additionally perform multiple actions with the color such as generating shades, changing hue, darken, lighten, saturate or desature the color.

    A new random material color is generated on every page load or can also be generated using the Random Material Color button without reloading the page. If needed, you can switch to some other color family such as Bright colors, Pastel colors, Dull colors etc.

    What are Material Colors?

    A material color is used in Google's material design language. The material color palette by google has fixed set of colors that are usually seen in Android applications or material UI. Material colors are perfect choice when you want to use colors in your mobile applications or in web applications.

    How to generate Random Material Colors?

    In order to get a random material color, we first pick a random color hue such as Blue, Green, Red etc. Then we pick a random material shade such as 100, 200, 300 as defined by google. Using these random selection, we get a random material color that you can then convert to your desired format such as HEX or RGB.

    Full set of material colors can be found on Material's website

    How to Use Material Color Generator?

    • A new random material color will be generated for you when you load this page.
    • You can also generate the random material color by hitting the 'Get a New Random Material Color' button.
    • Click to copy value of selected color 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 also use our tools to work with the current color such as getting shades or changing hue.
    • If you wish to generate color of other families such as pastel or gray, you can do so by selecting the menu presented above.
    • We do not store any data generated 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 alert