---
title: "Chris’ Corner: Colors"
url: https://daily.dev/posts/chris-corner-colors-kfj1vfntx
source_url: https://blog.codepen.io/2026/08/13/chris-corner-colors
type: article
source: "CodePen"
published: 2026-08-17T14:47:24.866Z
updated: 2026-08-17T14:47:50.361Z
tags: ["css", "ui-design"]
reading_time: 4
upvotes: 3
comments: 1
language: 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: <https://blog.codepen.io/2026/08/13/chris-corner-colors>

## Questions this post answers

### Why do my CSS gradients look different or desaturate in the middle when using different color spaces?

CSS gradients interpolate in sRGB by default, which can cause colors to desaturate or shift unexpectedly midway between stops. Switching the interpolation color space, for example using oklch instead, changes how intermediate colors are calculated since each space (srgb, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65) produces different in-between hues.

_Developers debugging unexpected gradient colors can find deeper CSS explainers curated on daily.dev._

### What is the difference between the CSS oklch() and hsl() color functions?

hsl() is defined in the sRGB color space and cannot represent colors outside it, while oklch() is a newer, perceptually uniform color model, meaning colors at the same lightness value appear equally bright to the human eye regardless of hue. oklch() keeps similar intuitive controls (lightness, chroma, hue) to hsl() but works in a larger, more accurate color space.

_Teams choosing between legacy and modern CSS color functions can track these comparisons on daily.dev._

### How do I make a conic-gradient in CSS go the long way around instead of the shortest path?

Add the longer hue keyword inside the gradient's interpolation syntax, for example conic-gradient(in oklch longer hue, red, red). By default gradients take the shortest hue path between color stops, but specifying longer forces it to traverse the rest of the color wheel instead, useful for effects like drawing angular shapes with conic gradients.

_Front-end developers experimenting with conic gradients can follow practical CSS techniques via daily.dev._

## Similar posts on daily.dev

- [What You Need to Know About CSS Color Interpolation](https://daily.dev/posts/what-you-need-to-know-about-css-color-interpolation-kfkrdsnar) · CSS-Tricks · 4 upvotes · 0 comments
- [Choosing colors \(for developers\)](https://daily.dev/posts/choosing-colors-for-developers--almguv7ft) · RUBYLAND · 6 upvotes · 3 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)