انها محاولة لنفسك

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

<div data-w3-color="hwb(0, 0, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 0, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(120, 0, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(180, 0, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 80%, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 60%, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 40%, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 20%, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 0, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 0, 10%)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 0, 20%)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 0, 30%)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 0, 40%)">
<p>London is the capital city of England.</p>
</div>

</body>
</html>