W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<style>
div {padding:16px;}
</style>
<body>

<div data-w3-color="R,0,0">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="R50,0,0">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="Y,0,0">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="Y,80%,0">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="Y,60%,0">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="Y,40%,0">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="Y,20%,0">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="Y,0,10%">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="Y,0,20%">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="Y,0,30%">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="Y,0,40%">
<p>London is the capital city of England.</p>
</div>

<div data-w3-color="W">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="W25">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="W50">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="W75">
<p>London is the capital city of England.</p>
</div>

</body>
</html>