<div class="outer bright-red"><div></div></div>
<div class="outer lime"><div></div></div>
<div class="outer green"><div></div></div>
<div class="outer red-light"><div></div></div>

.outer {
  position: relative;
width: 220px;
height: 220px;
display: flex;
  margin: 12px;
}

div div {
 width: 110px;
 height: 110px;
  margin: auto;
}

.bright-red {
  background-color: rgb(255, 0, 0);
}

.bright-red div {
  background-color: color(display-p3 1 0 0 / 1);
}

.lime {
  background-color: rgb(0, 255, 0);
}

.lime div {
  background-color: color(display-p3 0 1 0 / 1);
}

body {
  display: flex;
  flex-wrap: wrap;
}

.green {
  background-color: rgb(0, 255, 209);
}

.green div {
  background-color: color(display-p3 0 1 0.701);
}

.red-light {
  background-color:rgb(255, 72, 60);
}

.red-light div {
  background-color: color(display-p3 1 0.352 0.285);
}