4

This is a palette generator:

https://material.io/design/color/the-color-system.html#tools-for-picking-colors

Could you tell me what the circle mean?

enter image description here

If these are complementary colours, then I'm interested in a pair of colours. I would choose the primary and the complementary colour of the same figure.

For example, if the circle is marked 600, ten I would choose 600 for the supplementary colour. But the circle is marked 200. This confuses me.

Could you clarify:

  1. How exactly should I choose a pair of colours from this palette?
  2. What the circle mean?
  3. What the figure mean?
2
  • To me it makes sense to ask Google how they built this tool, not us :D Oct 17 at 13:17
  • I suggest you check out The Color System - Material Design. It explains how their colour system works, and how to use the tool you linked to, and what it means.
    – Billy Kerr
    Oct 17 at 14:22
2

You should probably discard the word "Should". These are tools, not contracts. They are here to provide some options, but you must be flexible and make your choices.

  1. The circle is the color you are choosing. The default circle is a recommendation, for example, the happiest or clearer color from that hue.

You can choose this Primary color based on the brand identity you have. If your app is based on the rain forest, you could choose a dark green.

My recommendation is that you first move the hue slider, and see what tones options you have. Is it too yellowish? is it too bluish?

enter image description here

  1. Then choose the tone on the right side.

  2. As it is too dark, the app is forcing me to choose as a primary color a lighter one.

enter image description here

From there they are recommending you the secondary color.

You can decide if you want to use a complementary color scheme, analogous or triadic.

Probably for a fashion magazine, the complementary road is ok, so you have a happy palette. But probably not for saving the rainforest, so in this case, you could opt for the analogous or triad options.

enter image description here


From there you have defined primary and secondary colors, but you still have all the shades you want for details.

I do not know what these recommendations are based on. Probably on mathematically defined contrast, probably they are taking into account some color blind guidelines, probably just some arbitrary parameters.

The point is that if you do not know these guidelines, for example, color blindness contrast, and you do not want to waste too much time investigating, just use the tool.

But if you want to make your own decisions, you can just add a secondary color

enter image description here

with the "limitations" or "safeguards" the tool imposes you, or simply choose any color you want.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.