Best CSS Color Wheel Sites

Best CSS color wheel sites

Adobe's Kuler - http://kuler.adobe.com/

is widely considered to be the best color palette selector out there, as it also lets you share color palettes other users have created. Sign in, click create, and you'll have options including "complementary" that give you a good starting point if you have one color in mind.

SASS/CSS multi-color wheel

Here is an optimization of your code based on this previous answer:

$num:25;

@for $i from 1 through $num {
  span:nth-child(#{$i}) {
    background-color: hsl($i * 15, 50%, 50%);
    transform: rotate($i * (360deg/$num));
  }
}

#colorWheel {
  height: 300px;
  width: 300px;
  position:relative;
  display:block;
  margin:auto;
}
#colorWheel > * {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:50%;
  clip-path:polygon(
    50% 50%, 
    50% 0%, 
    (50%*(1 + tan(360deg/$num)))  0%); 
}

Demo: https://jsfiddle.net/7patx6bn/

Compiled version:

span:nth-child(1) {  background-color: #bf6040;  transform: rotate(14.4deg);}
span:nth-child(2) {  background-color: #bf8040;  transform: rotate(28.8deg);}
span:nth-child(3) {  background-color: #bf9f40;  transform: rotate(43.2deg);}
span:nth-child(4) {  background-color: #bfbf40;  transform: rotate(57.6deg);}
span:nth-child(5) {  background-color: #9fbf40;  transform: rotate(72deg);}
span:nth-child(6) {  background-color: #80bf40;  transform: rotate(86.4deg);}
span:nth-child(7) {  background-color: #60bf40;  transform: rotate(100.8deg);}
span:nth-child(8) {  background-color: #40bf40;  transform: rotate(115.2deg);}
span:nth-child(9) {  background-color: #40bf60;  transform: rotate(129.6deg);}
span:nth-child(10) {  background-color: #40bf80;  transform: rotate(144deg);}
span:nth-child(11) {  background-color: #40bf9f;  transform: rotate(158.4deg);}
span:nth-child(12) {  background-color: #40bfbf;  transform: rotate(172.8deg);}
span:nth-child(13) {  background-color: #409fbf;  transform: rotate(187.2deg);}
span:nth-child(14) {  background-color: #4080bf;  transform: rotate(201.6deg);}
span:nth-child(15) {  background-color: #4060bf;  transform: rotate(216deg);}
span:nth-child(16) {  background-color: #4040bf;  transform: rotate(230.4deg);}
span:nth-child(17) {  background-color: #6040bf;  transform: rotate(244.8deg);}
span:nth-child(18) {  background-color: #8040bf;  transform: rotate(259.2deg);}
span:nth-child(19) {  background-color: #9f40bf;  transform: rotate(273.6deg);}
span:nth-child(20) {  background-color: #bf40bf;  transform: rotate(288deg);}
span:nth-child(21) {  background-color: #bf409f;  transform: rotate(302.4deg);}
span:nth-child(22) {  background-color: #bf4080;  transform: rotate(316.8deg);}
span:nth-child(23) {  background-color: #bf4060;  transform: rotate(331.2deg);}
span:nth-child(24) {  background-color: #bf4040;  transform: rotate(345.6deg);}
span:nth-child(25) {  background-color: #bf6040;  transform: rotate(360deg);}
#colorWheel {  height: 300px;  width: 300px;  position: relative;  display: block;  margin: auto;}
#colorWheel > * {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  border-radius: 50%;  clip-path: polygon(50% 50%, 50% 0%, 63% 0%);}

<div id="colorWheel">    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>  </div>

Best HTML CSS color tool

Assuming you're using Windows, here's a neat app I used to use often:

Pixie

If you're on OS X and you're doing any sort of web coding without using coda, you should really try coda.

If you want some lame browser-based one, I guess this would work.

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

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%));
}

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/

Best colours for web app

I recommend:

http://www.colourlovers.com/

for all your color needs.

Note: I'm in no way affiliated with the website. I just like it.

HTML color wheel control for website

SEE What's a good JavaScript plugin color picker?

Complementary Colour Generator with Colour Wheel

Clarification in comments means the change needed is simpler than that given below. The requirement is that the slider remains and that there is just one key press to submit the color.

The only change required is to insert this line:

document.getElementById('jscolor').focus();

immediately after these lines

// Finally, use the position to update the picked color
            this$1.color.hsv = this$1._mouseTarget.input(x, y);

This was the initial answer - which allowed color picking only on the wheel, not the slider.

The question asks how to remove the need for the user to click on an input field and then click return after choosing a color on a color wheel. The requirement is for the action to occur immediately after the user has clicked on a color in the wheel and the input element which holds the hex value of the chosen color, and the slider, should not be visible.

As tracing exactly what happens on the various click events was difficult, I have instead created a few lines of code which simulate a user click on the input element followed by a keypress and have hidden the unwanted input element and stopped the slider from being created.

Fiddle can be seen here: https://jsfiddle.net/ahaworth/as7ydq4j/1/

The code needs changing in 3 places.

Look for the lines

// Finally, use the position to update the picked color
            this$1.color.hsv = this$1._mouseTarget.input(x, y);

and replace them with

// use the position to update the picked color
            this$1.color.hsv = this$1._mouseTarget.input(x, y);
// Simulate a keyup on the input jscolor element so the color change is immediately updated 
            var input = document.getElementById('jscolor');
            input.focus();
            var ev = document.createEvent('Event');
            ev.initEvent('keyup');
            input.dispatchEvent(ev);
          }
        }

Look for this line

<input type="text" id="jscolor" size="7" value="" tabindex="12" class="colour"/>  Click here and press enter once you've selected your colour   </table>

and replace it with

<input type="text" id="jscolor" size="7" value="" tabindex="12" class="colour" style="visibility: hidden;"/>  <!--Click here and press enter once you've selected your colour -->   </table>

Look for these lines

}), new slider(this.svg, {
  sliderType: "v",
  x: leftMargin + borderWidth,
  y: bodyWidth + sliderMargin,
  w: bodyWidth - borderWidth * 2,
  h: sliderHeight - borderWidth * 2,
  r: sliderHeight / 2 - borderWidth,
  marker: marker,
  border: borderStyles
})]; // Create an iroStyleSheet for this colorWheel's CSS overrides

and replace them with

})/*, new slider(this.svg, {
  sliderType: "v",
  x: leftMargin + borderWidth,
  y: bodyWidth + sliderMargin,
  w: bodyWidth - borderWidth * 2,
  h: sliderHeight - borderWidth * 2,
  r: sliderHeight / 2 - borderWidth,
  marker: marker,
  border: borderStyles
})*/]; // Create an iroStyleSheet for this colorWheel's CSS overrides

(or you could just leave them in and set the slider to display none)

How to choose colors in web development

I don't worry about whether the colors will display perfectly everywhere, as even the most basic of cell phones support 16-bit color.

In my opinion, the days of having to worry about 'web-safe' colors is mostly over.

As long as you're not using colors incredibly similar to each other, you should be good.

---

Related Topics