How do I get color value from a color wheel based on X & Y coordinates?

color wheel picker
color wheel theory
colour wheel combinations
color wheel complementary colors
color wheel adobe
color wheel colors
color wheel definition
primary color wheel

So I have this color wheel, That will be used for a color picker. I am making this via NativeScript for a mobile application. And I would like to know how to get an RGB or HEX (since I can use either) with using only the X/Y coordinates?

{x:0,y:0} is the very center so negative numbers will be left and up while positive numbers are right and down. I am stuck with trying to figure out how to get the color. I have no code to show as I do not know where to start.

The color wheel is an image pre-made instead of me auto generating it with a canvas when ever the application is used.

All the following angular measures are based on the usual mathematic sense: 0° is horizontal to the right with angles increasing anti–clockwise so 90°is up, 180° to the left and 270° is down.

Using the colour wheel in MS PowerPoint (because it's available), values are calculated by dividing the circle into 3 120° wide segments centred on 0°, 120° and 240° for red, green and blue respectively.

On segments boundaries, the colour is 100% of the adjacent colours, so 60° is 100% red and 100% green. The adjoining colour fades to the centre of the segment, so at 90° (half way from the red/green boundary toward the green centre), the colour is 100% green and 50% red.

That gives the mix of adjoining colours, the mix of the opposing colour is based on the distance from the centre.

This mapping scheme doesn't work for RGB as it's a 3 dimensional space, however it gives 2 of the 3 dimensions for HSV if coordinates are used for the hue and saturation and an adjacent slider for value. For simplicity the following just uses a disc with value set to 1.

A full explanation is at Hand-coding a color wheel with canvas.

/* Convert radians to degrees.
 *
 * @param {number} rad - radians to convert, expects
 *                       rad in range +/- PI per Math.atan2
 * @returns {number} degrees equivalent of rad
 */
function rad2deg(rad) {
  return (360 + 180 * rad / Math.PI) % 360;
}

/* Convert h,s,v values to r,g,b
 * See: https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSV
 *
 * @param {number} hue - in range [0, 360]
 * @param {number} saturation - in range 0 to 1
 * @param {number} value - in range 0 to 1
 * @returns {Array|number} [r, g,b] in range 0 to 255
 */
function hsv2rgb(hue, saturation, value) {
  hue /= 60;
  let chroma = value * saturation;
  let x = chroma * (1 - Math.abs((hue % 2) - 1));
  let rgb = hue <= 1? [chroma, x, 0]:
            hue <= 2? [x, chroma, 0]:
            hue <= 3? [0, chroma, x]:
            hue <= 4? [0, x, chroma]:
            hue <= 5? [x, 0, chroma]:
                      [chroma, 0, x];

  return rgb.map(v => (v + value - chroma) * 255);
}

/* Convert cartesian coordinates to RGB
 * Converts: x, y to polar (radial_distance, angle), then
 *           polar to HSV, then
 *           HSV to RGB
 *
 * @param {number} x - x coordinate in range -1 to 1
 * @param {number} y - y coordinate in range -1 to 1
 * @returns {Array|number} [red, green, blue] values in range 0 to 255
 */
function rectToRGB(x, y) {
  // Hue is from angle, saturation from distance from centre, value set to 1
  var r = Math.sqrt(x*x + y*y);
  // Limit extent to disc
  var sat = r > 1? 0 : r;
  var hsv = [rad2deg(Math.atan2(y, x)), sat, 1];
  var rgb = hsv2rgb(...hsv).map(Math.round);
  return rgb;
}

function posToColour(evt) {
  var node = this;
  var originOffset = node.width / 2;
  var offsetLeft = offsetTop = 0;
  
  do {
    offsetLeft += node.offsetLeft;
    offsetTop  += node.offsetTop;
    node = node.offsetParent;
  } while (node.offsetParent)
    
  // Adjust coordinates then scale to range -1 to 1
  var x = ((evt.x - offsetLeft - originOffset) / originOffset).toFixed(2);
  var y = ((originOffset - evt.y + offsetTop) / originOffset).toFixed(2);

  var rgb = rectToRGB(x, y);
  
  var patch = document.getElementById('colorPatch');
  patch.style.backgroundColor = `rgb(${rgb.join()})`;
  document.getElementById('data').innerHTML = 
    `x, y : ${(x<0?'':' ')+x}, ${(y<0?'':' ')+y}<br>r,g,b: ${rgb.map(x=>('  '+x).slice(-3)).join(', ')}`;
}

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('colourDisc').addEventListener('mousemove', posToColour, false);
}, false);
img {width:200px;height:200px;}
div {width: 90px; height: 90px}
<table>
 <tr>
   <td><img src="https://i.stack.imgur.com/lPPOO.png" id="colourDisc"></td>
   <td><div id="colorPatch"></div>
       <div><pre id="data"></pre></div></td>
</table>

Color Wheel, Simply pick your base color(s), choose a color harmony, tweak/explore as needed, and see results. You'll get a report of the hex, RGB, and CMYK color values for  And understand that although related, color and value are different. To better help my students understand the relationship between color and value, I decided to create a color wheel chart that demonstrates different values. I put each range of value for each specific color at its native location on the color wheel.

You seem to be excluding some details, i will assume you have already a coordinate translator method or something, i know you have a canvas, hence you have the canvas api and image data.

function getRGB(x, y, canvas) {
  let context = canvas.getContext('2d');
  let [red, green, blue, alpha] = context.getImageData(x, y, 1, 1).data;
  return {red, green, blue, alpha};
} 

Color Attributes: Hue, Chroma, Value, Each color has its own appearance based on three key attributes Reference the color wheel, below, to see how colors shift from one hue to  Choose a Harmony. Choose one of six color combinations to work with your starting color. Click the color harmony symbol to complete the color scheme. 3. See Results. The colors making up your harmony will display in the color calculator swatches and on the interactive color wheel.

The easy way to get colors from this wheel is to get it as Hsl and then convert it to RGB (or Hex).The hue and saturation values are easily determined from a circle, tan(hue) = y/x; hue = hue%360 // saturation = √(x²+y²) * 100 / radius. but the lightness value cannot be determined from the picture so i would choose 50%.

Color wheel, A color wheel or color circle is an abstract illustrative organization of color hues around a circle, A color wheel based on RGB (red, green, blue) or RGV (red, green, violet) additive primaries ISBN 0-8118-4143-X . color-wheel color-circle. This color scheme involves the use of colors that are located opposite on the color wheel such as red and green, yellow and purple, or orange and blue. Complementary colors produce a very exciting, dynamic pattern. This color scheme involves the use of colors that are equally spaced on the color wheel. The primary colors of yellow, red

Hand-coding a color wheel with canvas - Cory Forsyth, Our goal: Render a color wheel like Apple's HSL color picker picture We can put a pixel of any RGB color of our choosing onto the canvas at any (x,y) a look at a color system based on hue, saturation and value, aka HSV. I just needed to make a color wheel and decided to update rsnape's solution to be compatible with matplotlib 2.1. Rather than place a colorbar object on an axis, you can instead plot a polar colored mesh on a polar plot.

Using Color Wheels and Color Spaces to Describe Light, It is based on a circular color scale, quite like a color wheel, with polar chromaticity diagram that translates the X, Y and Z values into Yxy. Let's say I have an array with colors (with the whole color spectrum, from red to red.). A shorter version would look like this: public Color[] ColorArray = new Color[360] { Color.FromArgb(255, 24

Hexadecimal / Decimal Colors, Hexadecimal numbers are used on web pages to set colors. The color is defined by its additive color mixing. A color can be made by mixing Red, Green and Blue, so it is called the "RGB Color System". Also see Interactive Color Wheel. In mixing colors hues can be desaturated (reduced in purity, weakened) in one of three ways: mix with white to lighten the value (tint), mix with black to darken the value (shade), or mix with gray or the complement to either lighten or darken the value (tone). Light Primaries - red, blue, green.

Comments
  • In cartesian coordinate systems, the y axis is usually positive going up. Your challenge is to translate two dimensional coordinates to a 3 dimensional space. You need to provide the algorithm for the translation, then perhaps you can work on how to implement it.
  • Further to the comments left by RobG, you may wish to look over some code I wrote a few years back. Not really sure if you'll find it helpful. stackoverflow.com/questions/39386272/… Try the wheel and strip - the may be okay for you.
  • You can convert the rectangular coordinates to polar, then convert that to HSV, then to RGB. See Hand-coding a color wheel with canvas.
  • We already have a color picker plugin - npmjs.com/package/nativescript-color-picker, did you get a chance to try that?
  • @Manoj yea actually that is what I use atm. Tho that plugin does not support a color wheel with android and that is what I am attempting to creat.
  • At almost 100k reputation, you should certainly know better than to vandalize your answer.
  • @tripleee—the answer was misleading, mapping directly to RGB from polar coordinates doesn't create a smooth colour wheel. There is a technique (linked in my comment) to convert polar to HSV, then HSV to RGB for a smooth wheel. When I've done that, I'll post a real answer. But it would be nice if the OP had a go in the meantime…
  • From Help center: Answers can be deleted at any time by their authors, unless the answer has been accepted by the question asker. Was your answer accepted by the asker?
  • @RobG Last night I had your "extra-long" comment loading but didn't have the internet to accept it. But You "comment" served me quite well and I almost entirely made the color wheel. With exceptions a few bugs XD I am still accepting your answer. But your original comment helped better than this. Thank you!
  • @Frustratedprogrammer—previous versions are available via the "edited" link. My initial answer was partly correct, but didn't work. The strategy of going to HSV then RGB works. Also, you can use your colour wheel if you reverse the sense of the x coordinate. Lastly, you can post your own answer if you feel you can now do a better job. :-)
  • No I do not have a canvas... I am using a NativeScript AbsoluteLayout with the background-image as the color wheel