#Why 10 shades of a color?

10 messages · Page 1 of 1 (latest)

zinc coral
#

Hey!

  1. Can someone explain to me what is the point of adding 10 shades of a color? Why is that important?

2)Let's say that I want '#333' to be my primary color (brand color)

  • Should I generate 10 shades of this color, add it to colors as "brand" and then specify:
    primaryColor: "brand.0" ?
  • Or should I add this color under other like this: theme.other.brand

I can obviously do both, but what's the right way to do it and why?

jade bone
#

I think Mantine uses those colors to generate other states of UI elements, such as hovered, focused etc.

strong dawn
zinc coral
strong dawn
zinc coral
strong dawn
strong dawn
empty hornet
# strong dawn Different shades are used in different variants

I just came here to find this answer 😁

We just had some fairly strong push back from our designer, along the lines of "why would we need 10 shades of our brand colour?"

I can see that a tint up and down from the primary shade would be used for hover/focus etc, and then maybe a super light tint for a background/light variant of a button, but are all ten shades of a colour really used by Mantine?

strong dawn
# empty hornet I just came here to find this answer 😁 We just had some fairly strong push ba...

It is common practice for a component library to have 10 shades per color – you can research reasons for this online. If you do not need all 10 shades – do not use it. Isn't it your job as a developer to make website look like the mockup from the designers?

We just had some fairly strong push back from our designer,
Because it is not designers job – it is your part to configure the library to work for your mockups