Color Theory Basics: The Color Wheel

What is a Color Wheel?

Color is one of the principle elements of the visual arts. A Color Wheel (color circle) is a visual representation of colors arranged according to their chromatic relationship. It is a tool used in color theory that helps us understand the relationships between individual colors in order to use them well.

Color Theory Basics

Sir Isaac Newton (1642-1726) is better known for the study of Gravity and Calculus, but Newton's Colour Wheel is one of the major reasons you now understand why and how colour works. Modern understanding of light and color begins with Isaac Newton and a series of experiments that he publishes in 1672. In the 1660s, he began a series of experiments with sunlight and prisms known as "celebrated phenomenon of colors". He demonstrated that clear white light was composed of seven visible colors. By scientifically establishing your visible spectrum (the colors you see in a rainbow), Newton laid the path for others to experiment with color in a scientific manner. Finally, he organized his findings in a color wheel showing the three "primary colors" -- red, green, and blue -- separated by the three "secondary colors" -- yellow, cyan, and magenta. Since magenta was a non-spectral color of light, its origins posed a mystery.

Sir Isaac Newton's Influence on the Color Wheel

This circular diagram became the model for many color systems of the following centuries. The value of the color wheel is its ability to help designers create appealing palettes by applying the underlying theory of the color wheel with the way you see color. For example, a palette based on color wheel complementary colors would include colors that are opposite each other on the color wheel, such as red and green.

Creating a colorwheel using JavaScript

The following source code shows how to use JavaScript to make a color wheel on the web, similar to Apple's circular color picker:

<!DOCTYPE html> <html> <body> <p>Color Wheel |JavaScript</p> <canvas id='myCanvas' /> <script> function myColorWheel(myCanvas, size = 150) { const ctx = myCanvas.getContext('2d'); myCanvas.width = size; myCanvas.height = size; const centerColor = 'white'; let angle = 0; const hCode = [0, 0, 255]; let pp = 0; const cfbDegree = 4.322; const rd = size / 2; while (angle < 360) { const ppb4 = (pp + 3 - 1) % 3; if (hCode[pp] < 255) { hCode[pp] = hCode[pp] + cfbDegree > 255 ? 255 : hCode[pp] + cfbDegree; } else if (hCode[ppb4] > 0) { hCode[ppb4] = hCode[ppb4] > cfbDegree ? hCode[ppb4] - cfbDegree : 0; } else if (hCode[pp] >= 255) { hCode[pp] = 255; pp = (pp + 1) % 3; } const rgb = `rgb(${hCode.map(h => Math.floor(h)).join(',')})`; const grad = ctx.createRadialGradient(rd,rd,0,rd,rd,rd); grad.addColorStop(0, centerColor); grad.addColorStop(1, rgb); ctx.fillStyle = grad; ctx.globalCompositeOperation = 'source-over'; ctx.beginPath(); ctx.moveTo(rd, rd); ctx.arc(rd,rd,rd,d2r(angle),d2r(360)); ctx.closePath(); ctx.fill(); angle++; } } function d2r(degrees) { return degrees * (Math.PI / 180); } const myCanvas = document.getElementById('myCanvas'); myColorWheel(myCanvas, 400); </script> </body> </html>

NEXT.....How many hexadecimal color codes are there?