0

enter image description here

I'm using the colors related to the Material io palettes, link palette

The colors are as follows:

    'red',
    'pink',
    'purple',
    'deepPurple',
    'indigo',
    'blue',
    'lightBlue',
    'cyan',
    'teal',
    'green',
    'lightGreen',
    'lime',
    'yellow',
    'amber',
    'orange',
    'deepOrange',
    'brown',
    'grey',
    'blueGrey'

The colors in total are 19, of which only 16 have as definition as shade also A100, A200, A400, A700.

For each color I would like to define its complementary.

But I'm having some doubts about it.

For example:

Red, its complementary is green.

Pink, its complementary green.

So green is the complement of two colors, so it has two complementaries?

[
  {red: ['green']},
  {pink: ['green']},
  {green: ['red','pink']}
]

Can you tell me where I can find some more information?

But if I take the red 500, it tells me according to material io, that the complementary is the lightBlue 200.

So I'm having doubts.

enter image description here

Paul
  • 3,644
  • 9
  • 47
  • 113
  • 1
    "Complementary" has different definitions. And "red", "green", etc. are not well defined colours. So: one def of complementary: one + compl = a grey. Usually we prefer same brightness on the 3 colours, but definition changes. Some instead uses a more "visual" complementary without well defined meaning of visual (usually just by using a colour wheel definition which is not meant for complementary colours. Or just people use hue and complementary hue (other param are selectbar). Pink and red are both "red" (hue is red on both). – Giacomo Catenazzi May 11 '21 at 11:51

1 Answers1

0

Complementary color can be calculated like this

first definition:

  1. change color to hexadecimal number (red = 0xff0000)
  2. complementary color = 0xffffff - color(0xff0000)

second definition :

  1. change color to HSL(hue, saturation, lightness)
  2. change hue to opposite : (hue + 180) % 360
Zeta
  • 913
  • 10
  • 24