CODEWITHSUNDEEP
htmlcsscolorsgradient
Ryan
Ryan

Reputation: 24019

How can I make a color wheel using CSS (with white at center and fading to black at the rim)?

The code below produces this color wheel, which is close to what I want but not quite:

color wheel

How can I adjust the CSS so that the color wheel contains all hues (such as via conic-gradient, and maybe I've done this correctly already) and each hue transitions from full lightness (white) at the center to 0 lightness (black) at the edge?

By "lightness" I mean the L value in HSL color codes.

div {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}


/* https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient */

.radial {
  background: radial-gradient(circle closest-side, hsl(0deg 0% 100% / 100%), hsl(0deg 0% 100% / 50%), hsl(0deg 0% 100% / 0%), hsl(0deg 0% 0% / 0%), hsl(0deg 0% 0% / 100%));
}


/* https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient */

.conic {
  background: conic-gradient(hsl(0deg 100% 50%), hsl(10deg 100% 50%), hsl(20deg 100% 50%), hsl(30deg 100% 50%), hsl(40deg 100% 50%), hsl(50deg 100% 50%), hsl(60deg 100% 50%), hsl(70deg 100% 50%), hsl(80deg 100% 50%), hsl(90deg 100% 50%), hsl(100deg 100% 50%), hsl(110deg 100% 50%), hsl(120deg 100% 50%), hsl(130deg 100% 50%), hsl(140deg 100% 50%), hsl(150deg 100% 50%), hsl(160deg 100% 50%), hsl(170deg 100% 50%), hsl(180deg 100% 50%), hsl(190deg 100% 50%), hsl(200deg 100% 50%), hsl(210deg 100% 50%), hsl(220deg 100% 50%), hsl(230deg 100% 50%), hsl(240deg 100% 50%), hsl(250deg 100% 50%), hsl(260deg 100% 50%), hsl(270deg 100% 50%), hsl(280deg 100% 50%), hsl(290deg 100% 50%), hsl(300deg 100% 50%), hsl(310deg 100% 50%), hsl(320deg 100% 50%), hsl(330deg 100% 50%), hsl(340deg 100% 50%), hsl(350deg 100% 50%));
}
<div class="conic" />
<div class="radial" />

Currently my radial-gradient isn't smooth from center to edge.

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient

Upvotes: 2

Views: 1026

Answers (2)

MaKu
MaKu

Reputation: 11

I gave it a try - the luminosity ramp is just eyeballed, tune to your liking.

colorwheel

.isolate {
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  width: 180px;
  background-color: oklch(50% 0% 0);
}

.circle {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.radial { 
  background: radial-gradient(closest-side,
    oklch(100% 0% 0) 0%,
    oklch(99% 0% 0) 5%,
    oklch(60% 0% 0) 25%,
    oklch(15% 0% 0) 99%,
    oklch(0% 0% 0) 100%
  );
  mix-blend-mode: hard-light;
}

.conic {
  background: conic-gradient(in oklch longer hue,
    oklch(75% 75% 0),
    oklch(75% 75% 0)
  );
}
<div class="isolate">
    <div class="circle conic" />
    <div class="circle radial" />
</div>

Upvotes: 1

James T. Harding
James T. Harding

Reputation: 109

You could use blend modes like this:

.radial {
  background: radial-gradient(closest-edge, #fff, #000);
  mix-blend-mode: luminosity; // Tells the browser to use the luminosity values from this gradient
}

.conic {
  background: conic-gradient(hsl(0deg 100% 50%), hsl(10deg 100% 50%), hsl(20deg 100% 50%), hsl(30deg 100% 50%), hsl(40deg 100% 50%), hsl(50deg 100% 50%), hsl(60deg 100% 50%), hsl(70deg 100% 50%), hsl(80deg 100% 50%), hsl(90deg 100% 50%), hsl(100deg 100% 50%), hsl(110deg 100% 50%), hsl(120deg 100% 50%), hsl(130deg 100% 50%), hsl(140deg 100% 50%), hsl(150deg 100% 50%), hsl(160deg 100% 50%), hsl(170deg 100% 50%), hsl(180deg 100% 50%), hsl(190deg 100% 50%), hsl(200deg 100% 50%), hsl(210deg 100% 50%), hsl(220deg 100% 50%), hsl(230deg 100% 50%), hsl(240deg 100% 50%), hsl(250deg 100% 50%), hsl(260deg 100% 50%), hsl(270deg 100% 50%), hsl(280deg 100% 50%), hsl(290deg 100% 50%), hsl(300deg 100% 50%), hsl(310deg 100% 50%), hsl(320deg 100% 50%), hsl(330deg 100% 50%), hsl(340deg 100% 50%), hsl(350deg 100% 50%));
}

Color wheel

This will give you a mathematically smooth colour wheel, however it doesn’t appear visually smooth because HSL isn’t perceptually uniform.

You might explore using LCH as an alternative approach: https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

Upvotes: 5

Related Questions