0 at one end, 1 at the other end will mean 0.5 at a point half-way between them)įirst, lets look at your desired outputs and how our HSV inputs change with respect to X and Y coordinates. When we use the correct colour-space, determining the correct colour for any given pixel is a simple matter of interpolating 3 values - all of which change linearly (the amount of change remains constant. In order to correctly produce the desired outputs, a far easier method is to instead utilise the HSV colour model - one which is quite similar to the HSL one. Unfortunately, this was an approach that while simple, didn't produce the images shown. I had previously posted an answer that relied upon the browser converting a colour from the HSL colour-space to the RGB one. So I'm willing to settle for something that (I assume) would be easier to implement.īasically another form of output that would be acceptable, would be something like this: Unless someone happens to give me a pretty much complete solution to this, it seems that this is a bit above my skill-level, at the moment. I've got the colors, but I don't know how to arrange them in a wheel. So any help would be greatly appreciated, since I'm quite lost on how to accomplish this. This is the code I've managed to come up with (pretty much nothing): var p = Īnd is the result I get (zoomed 10x), with the following CSS: divĪs you can see, it's pretty far from what I want. So the actual number of unique colors would be 4081(?) (x): 4096 is the number of all shorthand HEX codes (#XXX), but the colorwheel doesn't have monochrome values, except for white. I'd also be interested in having each of the pixel-sized elements be left-aligned, instead of for example absolutely-positioned. You don't need to tell this to me or try to figure out a different way to accomplish this. I know this is not how you're supposed to create a colorpicker, and that normally you should never have so many single-pixel DOM elements for anything. The colorwheel should have ~4096 (*) elements the size of a single pixel, with their color set via a CSS background rule. colorPicker.addEventListener("input", updateFirst, false) ĬolorPicker.addEventListener("change", watchColorPicker, false) ĭocument.querySelectorAll("p").I'm trying to figure out a way to create a colorwheel similar to this:, in JS. In both cases, you can determine the new value of the element by looking at its value. The change event is fired when the user dismisses the color picker. input is fired at the input element every time the color changes. Tracking color changesĪs is the case with other types, there are two events that can be used to detect changes to the color value: input and change. If you have colors that are in any other format (such as CSS color names, or CSS color functions such as rgb() or rgba(), you'll have to convert them. The value must be in seven-character hexadecimal notation, meaning the "#" character followed by two digits each representing red, green, and blue, like this: "#rrggbb". If you don't specify a value, the default is "#000000", which is black. In addition to the very simple example above, you can create a color picker that specifies a default value, like this: Inputs of type "color" are exceptionally simple to use, due to the limited number of attributes that can be used with them. In addition, colors with an alpha channel are not supported specifying a color in 9-character notation will also result in the color being set to "#000000". This makes sense, when you keep in mind that HTML and CSS are separate languages and specifications. In particular, you can't use CSS's standardized color names, or any CSS functions, to set the value. Setting the value to anything that isn't a valid, fully-opaque, RGB color in hexadecimal notation will result in the value being set to "#000000".
0 Comments
Leave a Reply. |