Webmastertoolbag Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
/* green color with different amount of lightness */
#p1 {background-color:oklch(30% 0.4 150);}
#p2 {background-color:oklch(60% 0.4 150);}
#p3 {background-color:oklch(100% 0.4 150);}
/* yellow color with different amount of lightness */
#p4 {background-color:oklch(30% 0.4 100);}
#p5 {background-color:oklch(60% 0.4 100);}
#p6 {background-color:oklch(100% 0.4 100);}
/* red color with different amount of lightness */
#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>