Material.io has this great tool called the Material Palette Generator: https://material.io/design/color/#tools-for-picking-colors. Using it, you can pick a primary and secondary color, and then click a link "View in Color Tool" which takes you to a page where you can see your choices in different ways: https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=6002ee&secondary.color=c63131.
But there doesn't seem to be an easy way of exporting your palette into a format usable for generating a custom Angular Material theme. They have an export link, but the closest format seems to be CodePen. But once you open it in CodePen, the CSS doesn't seem to have the palette information you need.
My question: has anyone tried these tools, and is there a pre-established pathway from Material palette to Angular Material custom theme? Or are they unrelated? If unrelated, is there a simple way to copy the color codes needed from the former to the latter?
Thanks.
Material v2:
The original v2 material site provides a handy color generator, you can pick any color, and it will calculate the full palette together with complementary, analogous, and triadic colors. https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
You have to replace the color values in the _theming.scss
with the generated values.
Material V2 and V3: I found this useful website for generating the theme: https://themes.angular-material.dev/ Pick whatever color you want, and on the sidebar just click on the Copy CSS Variables icon, it will have 2 options:
Copy CSS Variables for M3
OR
Copy SCSS Variables for M2