JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background-color: green;"></div>

<div style="background-color: #008000;"></div>

<div style="background-color: rgb(0, 128, 0);"></div>
<div style="background-color: rgba(0, 128, 0, 1);"></div>
<div style="background-color: rgb(0%, 50%, 0%);"></div>
<div style="background-color: rgba(0%, 50%, 0%, 1);"></div>

<div style="background-color: hsl(120, 100%, 25%);"></div>
<div style="background-color: hsla(120, 100%, 25%, 1);"></div>

<div style="background-color: rgba(0, 255, 0, .5);"></div>
<div style="background-color: rgba(0%, 100%, 0%, .5);"></div>
<div style="background-color: hsla(120, 100%, 50%, .5);"></div>

<div style="background-color: lime; opacity: .5;"></div>

<hr />

<div style="background-color: #080"></div>
<div style="background-color: #008800"></div>

<div style="background-color: rgb(0, 136, 0);"></div>
<div style="background-color: rgba(0, 136, 0, 1);"></div>
<div style="background-color: rgb(0%, 53.333333333333336%, 0%);"></div>
<!--<div style="background-color: rgb(0%, calc(136 * 100% / 255), 0%);"></div>-->
<div style="background-color: rgba(0%, 53.333333333333336%, 0%, 1);"></div>

<div style="background-color: hsl(120, 100%, 26.7%);"></div>
<div style="background-color: hsla(120, 100%, 26.7%, 1);"></div>

CSS

body {
	margin: 0;
	background-color: black;
}
div {
	counter-increment: counter;
	height: 40px;
}
	div::before {
		content: counter(counter);
		display: block;
		height: inherit;
		line-height: 40px;
		font-size: 40px;
		pointer-events: none;
	}

JavaScript

/*
Цвет до разделителя должны соответствовать цвету #008000 (green), а цвета после цвету #008800.
*/