<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:oklch(30% 0.4 150);}
#p2 {background-color:oklch(60% 0.4 150);}
#p3 {background-color:oklch(100% 0.4 150);}
#p4 {background-color:oklch(30% 0.4 100);}
#p5 {background-color:oklch(60% 0.4 100);}
#p6 {background-color:oklch(100% 0.4 100);}
#p7 {background-color:oklch(30% 0.4 20);}
#p8 {background-color:oklch(60% 0.4 20);}
#p9 {background-color:oklch(100% 0.4 20);}
</style>
</head>
<body>
<h1>The oklch() Function</h1>
<p>OKLCH colors:</p>
<p id="p1">Some text.</p>
<p id="p2">Some text.</p>
<p id="p3">Some text.</p>
<p id="p4">Some text.</p>
<p id="p5">Some text.</p>
<p id="p6">Some text.</p>
<p id="p7">Some text.</p>
<p id="p8">Some text.</p>
<p id="p9">Some text.</p>
</body>
</html>