Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I create complete Material color palette with shades 90-900, with accent shades? #135

Open
micobarac opened this issue Dec 15, 2023 · 3 comments
Labels
explain (Label used internally)

Comments

@micobarac
Copy link

micobarac commented Dec 15, 2023

How do I create complete Material color palette with shades 90-900, with accent shades, from a single color?

I need color shades 90-900 with A100, A200, A400, A700 accent shades, to define Angular Material Theme.

Other than that, how to include the original color in the palette? Most of the time, generated color palette doesn't include the original color.

@pennzht pennzht added the explain (Label used internally) label Feb 1, 2024
@Kyant0
Copy link

Kyant0 commented Jun 12, 2024

Use like HCT(hue=sourceColor.hue, chroma=48.0, tone=t).toArgb(), where t={0,10, 20,...} corresponding to {A1000, A900, A800,...}

@peteroupc
Copy link

Another question of interest is how the original Material Design color palette was generated; was a similar approach as HCT taken there?

@Kyant0
Copy link

Kyant0 commented Jun 22, 2024

The method I say is the original generation method. But in the current palette we don't have the concept of A1000,... We only have "color roles", such as primary, primary container, they can't be accurately mapped from the legacy A400,...
If you have read the source code, you will find it's relation to background color, contrast curve, and so many things, which can't be represented by A1000,...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
explain (Label used internally)
Projects
None yet
Development

No branches or pull requests

4 participants