1. Давайте сначала создадим index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body onload="setRandomColor()">
<div id="box1" onClick="setBackgroundColor(this.id);">
    <div id="box2" onClick="setBackgroundColor(this.id);">
        <div id="box3"  onClick="setBackgroundColor(this.id);"></div>
    </div>
</div>

<div id="box4">
</div>
<script src="main.js"></script>

</body>
</html>

2. Давайте создадим style.css, чтобы придать стиль

#box1 {
    width: 300px;
    height: 300px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
}

#box2 {
    width: 200px;
    height: 200px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

#box3 {
    width: 100px;
    height: 100px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

#box4 {
    width: 100px;
    height: 100px;
    background-color: #000;
    float: right;
}

3. Теперь давайте создадим main.js для написания функции javascript.

function setBackgroundColor(e) {
    var color = document.getElementById(e).style.backgroundColor;
    event.stopPropagation();
    document.getElementById('box4').style.backgroundColor = color;
}

function getRandomColor() {
    return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
}

function setRandomColor() {
    document.getElementById('box1').style.backgroundColor = getRandomColor();
    document.getElementById('box2').style.backgroundColor = getRandomColor();
    document.getElementById('box3').style.backgroundColor = getRandomColor();
    document.getElementById('box4').style.backgroundColor = getRandomColor();
}

Это случайным образом сгенерирует цвет и установит его для каждого div с именами box1,box2, box3 и box4 с помощью функции setRandomColor() в main.js, где getRandomColor() сгенерирует цвет и установит его для каждого div, и когда пользователь нажмет на первые 3 div (т.е. box1, box2 и box3), тот же фон будет отображаться в div box4.

Это простая техника игры с цветами с использованием простого javascript. Надеюсь, это поможет новичкам.