Opacity wont get you any close to what you try. Opacity will always be white-grey’ish. Opacity is also not the same as transparency and causing a variaty of different issues because it is rendered last (e.g. links and buttons won’t work).

That image you displaying works with transparency. In fact the colors use a rgba value. RGBA stands for Red – Green – Blue – Alpha. Alpha is the opaque or transparency. The RGB goes from 0 (0% saturation = black) up to 255 (50.2% saturation contrast = “normal” color). Because of the transparency the color will mix and blend. To have the blending appear darker, you can either raise the Alpha value or lower the color values.

.container {
  width: 80vh;
  height: 80vh;
  margin: 10vh auto;
  position: relative;
}

.container div {
  height: 50vh;
  width: 50vh;
  border-radius: 50%;
  position: absolute;
}

.container div:nth-child(1) {
  background-color: rgba(200, 0, 0, 0.6);
  top: 5%;
  left: 5%;
}

.container div:nth-child(2) {
  background-color: rgba(0, 200, 0, 0.6);
  top: 5%;
  right: 5%;
}

.container div:nth-child(3) {
  background-color: rgba(0, 0, 200, 0.6);
  bottom: 5%;
  left: 20%;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

I am trying to get black color by combining 3 colors (red, yellow, blue) in CSS, but something went wrong…

How can I get black color using opacity?