Solution 1 :

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 RedGreenBlueAlpha. 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">

Problem :

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?
Example :(


Comment posted by whoacowboy

Hi. It looks like you are new to SO. Questions get a much better response if you add your source code to the question and even include a code snippet if possible. I would try editing this question to add some code so users are better able to help you.

Comment posted by A Haworth

Can you show the code you are using – did that image come from your generated code? Black is the absence of light so if you use any amount, however small, of r,g or b you cannot possibly get black. (Color mixing in paint is totally different).

Comment posted by tacoshy

simple anwser, you cant get a black color by using opacity.

Comment posted by LoCaL

thx for help sir.