--- title: Chris’ Corner: Colors | daily.dev description: A roundup exploring how CSS gradients render differently depending on the color space used for interpolation (sRGB by default), with links to deeper explainers... canonical: https://daily.dev/posts/chris-corner-colors-kfj1vfntx twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Chris’ Corner: Colors | daily.dev og:description: A roundup exploring how CSS gradients render differently depending on the color space used for interpolation (sRGB by default), with links to deeper explainers... og:url: https://daily.dev/posts/chris-corner-colors-kfj1vfntx og:image: https://api.daily.dev/og/posts/KfJ1VFNtx.png og:image:alt: Chris’ Corner: Colors og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Chris’ Corner: Colors **[CodePen](https://daily.dev/sources/codepen)** · 4 min read · 3 upvotes · 1 comments ## Summary A roundup exploring how CSS gradients render differently depending on the color space used for interpolation (sRGB by default), with links to deeper explainers on the topic. Covers the range of available CSS color spaces (srgb, display-p3, xyz, etc.), the perceptual-uniformity benefits of OKLCH over hsl() and the rarely-used hwb(), the 'longer hue' keyword for conic gradients, and a handful of color palette and gradient generator tools worth trying. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does my CSS gradient look different than expected between two colors? Gradients interpolate colors differently depending on the color space used, and the default is sRGB. Switching the interpolation space, for example to oklch, can change whether a gradient desaturates in the middle or passes through unexpected bright hues. CSS supports interpolation in spaces including srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, and xyz-d65 via the 'in' keyword syntax. _daily.dev surfaces practical CSS color deep dives for developers debugging unexpected gradient output._ ### What is the difference between hsl(), hwb(), and oklch() color functions in CSS? hsl() uses hue, saturation, and lightness but is locked to the sRGB color space. hwb() uses hue, whiteness, and blackness instead of saturation, and saw little adoption because it feels less intuitive. oklch() keeps similar intuitive hue and lightness controls but operates in a larger, perceptually uniform color space, making equal-lightness colors actually look equally light to the eye. _developers choosing a css color function for design systems can track these comparisons on daily.dev._ ### How do you make a CSS conic gradient take the long way around the hue wheel instead of the short way? Add the 'longer hue' keyword to the gradient's interpolation declaration, for example: conic-gradient(in oklch longer hue, red, red). By default gradients take the shortest hue path between color stops, but the longer keyword forces the gradient to traverse the rest of the color wheel, useful for effects like drawing triangles with hard color stops. _daily.dev helps css developers keep up with lesser known gradient syntax like hue interpolation keywords._ ## Similar posts on daily.dev - [Choosing colors \(for developers\)](https://daily.dev/posts/choosing-colors-for-developers--almguv7ft) · RUBYLAND · 7 upvotes · 4 comments - [A pragmatic guide to modern CSS colours - part two](https://daily.dev/posts/a-pragmatic-guide-to-modern-css-colours---part-two-xlpotvmhm) · Piccalilli · 20 upvotes · 1 comments - [conic-gradient and the modern CSS gradient toolbox](https://daily.dev/posts/conic-gradient-and-the-modern-css-gradient-toolbox-8a2mgdgkn) · Flavio Copes · 7 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design) [View this post on daily.dev](https://daily.dev/posts/chris-corner-colors-kfj1vfntx) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Chris’ Corner: Colors","url":"https://daily.dev/posts/chris-corner-colors-kfj1vfntx","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/chris-corner-colors-kfj1vfntx"},"datePublished":"2026-08-17T14:47:24.866Z","dateModified":"2026-09-14T06:06:34.942Z","description":"A roundup exploring how CSS gradients render differently depending on the color space used for interpolation (sRGB by default), with links to deeper explainers...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/032fd9c717961de1b4d00d2c6bbe8497?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/032fd9c717961de1b4d00d2c6bbe8497?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"CodePen","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CodePen","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codepen","url":"https://daily.dev/sources/codepen"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/chris-corner-colors-kfj1vfntx","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"css,ui-design","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CodePen","item":"https://daily.dev/sources/codepen"},{"@type":"ListItem","position":3,"name":"Chris’ Corner: Colors"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/chris-corner-colors-kfj1vfntx#faq","mainEntity":[{"@type":"Question","name":"Why does my CSS gradient look different than expected between two colors?","acceptedAnswer":{"@type":"Answer","text":"Gradients interpolate colors differently depending on the color space used, and the default is sRGB. Switching the interpolation space, for example to oklch, can change whether a gradient desaturates in the middle or passes through unexpected bright hues. CSS supports interpolation in spaces including srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, and xyz-d65 via the 'in' keyword syntax. daily.dev surfaces practical CSS color deep dives for developers debugging unexpected gradient output."}},{"@type":"Question","name":"What is the difference between hsl(), hwb(), and oklch() color functions in CSS?","acceptedAnswer":{"@type":"Answer","text":"hsl() uses hue, saturation, and lightness but is locked to the sRGB color space. hwb() uses hue, whiteness, and blackness instead of saturation, and saw little adoption because it feels less intuitive. oklch() keeps similar intuitive hue and lightness controls but operates in a larger, perceptually uniform color space, making equal-lightness colors actually look equally light to the eye. developers choosing a css color function for design systems can track these comparisons on daily.dev."}},{"@type":"Question","name":"How do you make a CSS conic gradient take the long way around the hue wheel instead of the short way?","acceptedAnswer":{"@type":"Answer","text":"Add the 'longer hue' keyword to the gradient's interpolation declaration, for example: conic-gradient(in oklch longer hue, red, red). By default gradients take the shortest hue path between color stops, but the longer keyword forces the gradient to traverse the rest of the color wheel, useful for effects like drawing triangles with hard color stops. daily.dev helps css developers keep up with lesser known gradient syntax like hue interpolation keywords."}}]} ```