CODEWITHSUNDEEP
colorsmaterial-uimaterial-designpalettecolor-palette
Paul
Paul

Reputation: 4430

Material io color palette complementary

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

Upvotes: 0

Views: 377

Answers (1)

Zeta
Zeta

Reputation: 981

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

Upvotes: 0

Related Questions