NodlumeMesh & aurora · Conic
Hue wheel gradient
Hue wheel is a conic gradient that sweeps the full color wheel — red through yellow, green and blue and back to red — interpolated in oklch so every step keeps its chroma and the sweep stays even. In sRGB the same sweep has bright and dull patches; in oklch it is a wheel. It is the gradient for a color picker, a loading ring, or a rainbow border.
It is not a background. Used at any size behind content it overwhelms everything, so clip it: to a ring with a mask, to a thin border with the two-background trick, or to a single headline with background-clip: text. With a slow rotation on the from angle it becomes a spinner that needs no SVG; keep it under prefers-reduced-motion.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #ef44440%
- #eab30833%
- #3b82f666%
- #ef4444100%
CSS
.hue-wheel {
background-image: conic-gradient(from 0deg at 50% 50% in oklch, #ef4444 0%, #eab308 33%, #3b82f6 66%, #ef4444 100%);
}Tailwind
bg-[image:conic-gradient(from_0deg_at_50%_50%_in_oklch,_#ef4444_0%,_#eab308_33%,_#3b82f6_66%,_#ef4444_100%)]
Token
--gradient-hue-wheel: conic-gradient(from 0deg at 50% 50% in oklch, #ef4444 0%, #eab308 33%, #3b82f6 66%, #ef4444 100%);
Hue wheel, answered
- What are the CSS colors in the Hue wheel gradient?
- Hue wheel uses 3 colors: #ef4444, #eab308, #3b82f6. It is a conic gradient, which sweeps around a center rather than across the box. The full value is conic-gradient(from 0deg at 50% 50% in oklch, #ef4444 0%, #eab308 33%, #3b82f6 66%, #ef4444 100%) — copy the CSS rule, the Tailwind class or the custom property above, or open it in the playground to change any stop.
- How do I use the Hue wheel gradient in Tailwind CSS?
- Copy the Tailwind tab: it is an arbitrary-value class of the form bg-[image:…], with the spaces in the gradient written as underscores, which Tailwind v3 and v4 both accept for a one-off value. For a value you reuse across the site, register the Token tab's custom property in your theme instead and reference it from a utility.
- Why is the Hue wheel gradient interpolated in oklch?
- The sweep crosses every hue, and oklch keeps chroma constant through a hue change — in sRGB the same wheel has bright and dull patches. Every gradient function accepts an in <space> keyword, so this is one word in the declaration.