Colors of Smilestones via Material Design Color Tool (Codepen included)

For my React application, Smilestones, I finally added colors. There was an initial palette I got from Coolors.co that was OK, but I didn’t like that both colors were highlight colors. So, I used Google’s Material Design palette generator to a some primary color that gave me a secondary color.

First I got a blue-purplish that’s cool enough to warm enough to be both masculine and feminine – hex code #3d5afe. I’m good with it. The secondary color the tool gave me was a yellow – hex code #fee13d.

The Codepen Generated by the Material Color Tool

I’m seriously impressed by the color tool and the palette generator on Material.io. It made imagining the website component colors really easy. One thing the generator does is give you light and dark variations or your primary and secondary colors, and using an MUI hook in React, the light and dark variations are generated automatically from the hex code values of the primary and secondary colors. Checkout the Codepen I got from the Material Color Tool.