CSS Color Functions
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/css-color-functions/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/css-color-functions/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/css-color-functions/)Use the native HTML custom element.
The built-in CSS functions for specifying colors, including rgb(), hsl(), oklch(), lab(), and color(), each using a different color model.
CSS has evolved from supporting only hex codes and named colors to offering a rich set of color functions. The rgb() and hsl() functions have been available since CSS3. CSS Color Level 4 introduced lab(), lch(), oklab(), oklch(), and the generic color() function for specifying colors in any predefined color space like display-p3. Modern syntax uses space-separated values with an optional slash for alpha: rgb(255 128 0 / 50%). The color-mix() function enables mixing two colors in any color space, and relative color syntax allows deriving new colors from existing ones by modifying individual channels.
Try It Out
Related Articles
CMYK for Web Designers: When Print Meets Screen
Web designers working on print projects need to understand CMYK. Learn gamut differences, safe RGB-to-CMYK conversion strategies, print proofing workflows, and common pitfalls.
CSS Color Functions: rgb(), hsl(), oklch() Compared
Compare every CSS color function — rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklch(), and color-mix(). Learn which to use, when, and what browser support looks like.
Bauhaus Color Theory: Kandinsky, Klee, and Itten
Explore Bauhaus color theory by Itten, Kandinsky, and Klee. Learn primary form-color associations, the color sphere, and Bauhaus legacy in modern design.