The latest articles on DEV Community by Karen Barbé (@karenbarbe). https://dev.to/karenbarbe https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2983864%2F31af94dc-2b53-4c75-a7da-0be77fc09283.png https://dev.to/karenbarbe en Karen Barbé Fri, 01 Aug 2025 20:49:47 +0000 https://dev.to/karenbarbe/css-oklch-color-function-959 https://dev.to/karenbarbe/css-oklch-color-function-959 <p>I love colors so I can't help but be obsessed with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch" rel="noopener noreferrer"><code>oklch()</code></a> color function in CSS. Admittedly, <code>oklch</code> can look daunting at first if you're used to more common color notations such as hex code (<code>#f4f4f1</code>) or rgb.</p> <p>But now that <code>oklch()</code> is part of the Baseline 2023 CSS features (which means that it works across the latest devices and browser versions but might not work in older devices or browsers) we would probably start seeing it used more frequently.</p> <p><a href="https://tailwindcss.com/docs/colors" rel="noopener noreferrer">Tailwind</a> defines their color palettes with <code>oklch()</code>. As an example, the pink palette is defined like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>--color-pink-50: oklch(0.971 0.014 343.198); --color-pink-100: oklch(0.948 0.028 342.258); --color-pink-200: oklch(0.899 0.061 343.231); --color-pink-300: oklch(0.823 0.12 346.018); --color-pink-400: oklch(0.718 0.202 349.761); --color-pink-500: oklch(0.656 0.241 354.308); --color-pink-600: oklch(0.592 0.249 0.584); --color-pink-700: oklch(0.525 0.223 3.958); --color-pink-800: oklch(0.459 0.187 3.815); --color-pink-900: oklch(0.408 0.153 2.432); --color-pink-950: oklch(0.284 0.109 3.907); </code></pre> </div>