CSS oklch() Function

by Imri Paloja

HTML

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>

<div class="container">
  <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>

  <p id="element">A soft teal color.</p>
</div>

CSS

html,
body {
  background: #f9f9f9;
  color: #454545;
}

/* 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);
}

/* A soft teal color */
#element {
  background-color: oklch(0.65 0.12 160);
}