edubun
English
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Home›Color and design

Color theory

Every colour on a screen is three numbers. This course builds the RGB cube and the HSL cylinder in 3D, shows how complementary and triadic colours sit on the hue circle, mixes light and ink, and computes the WCAG contrast ratio that decides whether text can be read.

Progress

About this course

In the 1660s Isaac Newton began passing sunlight through glass prisms in a darkened room. He showed that white light is a band of colours and that a second prism could not split those colours any further. In his 1704 Opticks he bent the band into a circle, divided its edge into seven parts in the proportions of a musical scale, and put white in the middle. That drawing is one of the first colour circles, and every hue wheel in this course descends from it. Every colour on a screen is three numbers, and a retina holds about 6 million cones of only three kinds.

The seven units start with how we see colour, then RGB and hex codes: 256 steps each of red, green and blue give 16,777,216 colours, every one a point inside a cube. Maxwell showed a tartan ribbon photographed through red, green and blue filters at the Royal Institution in 1861, and the three-channel method is still what every digital camera and screen uses. Hue, saturation and lightness note that yellow and blue both have a lightness of 50% in HSL, yet yellow reflects almost 13 times as much light as blue. Complementary, analogous and triadic colours are placed on the hue circle. Additive and subtractive mixing includes Jacob Christoph Le Blon's Coloritto of about 1722, which the Smithsonian calls the first record of both ideas. Contrast ratio shows grey #767676 on white at 4.54:1 passing the WCAG body-text minimum while #777777 at 4.48:1 fails. The last unit notes that about 8 percent of men have red-green colour vision deficiency. The 3D lab builds the RGB cube and the HSL cylinder.

Before you start

Comparing colours by their numbers helps when two patches look similar but behave differently. The lessons introduce RGB and hex codes before HSL, colour relationships and contrast. Pay attention to the distinction between mixing screen light and mixing ink, because the same colour names do not imply the same result.

When you finish

You can read RGB and hex colour values, adjust hue, saturation and lightness, and choose complementary, analogous or triadic colours. You can distinguish additive light mixing from subtractive ink mixing, check a text contrast ratio against WCAG guidance, and explain why colour alone is not enough to mark an error in a form.

  1. 1How we see colorA retina holds about 6 million cones of only three kinds, and every colour you have ever seen is a mix of how strongly those three kinds respond.
  2. 2RGB and hex codesWith 256 steps for each of red, green and blue, a screen can address 256 × 256 × 256 = 16,777,216 colours, and every one of them is a point inside a cube.
  3. 3Hue, saturation and lightnessIn HSL, yellow and blue both have a lightness of 50%, yet yellow reflects almost 13 times as much light as blue by the WCAG luminance formula.
  4. 4Complementary, analogous and triadic coloursOn the screen colour wheel, the complement of blue at 240 degrees is yellow at 60 degrees, while a painter's wheel puts orange across from blue.
  5. 5Additive and subtractive mixingCyan ink on white paper absorbs red light, so cyan and magenta printed on top of each other leave only blue.
  6. 6Contrast ratio and readable textGrey #767676 on white has a contrast ratio of 4.54:1 and passes the WCAG minimum for body text; one step lighter, #777777 gives 4.48:1 and fails.
  7. 7Using colour in a designAbout 8 percent of men have red-green colour vision deficiency, so a form that marks errors only in red leaves many of them guessing.

Related courses

  • Reading notes · Music theory
    Learn to read pitches on the staff: treble clef, bass clef, ledger lines, the grand staff, sharps and flats, and the different names musicians use for the same notes. Every unit has a staff quiz or a keyboard you can play.
  • Piano first steps · Play an instrument
    Find your way around the keyboard, learn the names of the white keys, place your right hand, and play your first melody on the keyboard below. A mouse, a touchscreen, or your computer keys all work.
  • The orchestra · Music history and listening
    A full symphony orchestra can put more than 100 players on one stage. Walk around a 3D stage, pick any instrument to hear an approximate synthesized tone and see its range on a keyboard, then build up a famous tune family by family. Seven units cover the history, the four instrument families, the conductor and score, and how to listen.
  • Perspective drawing · Drawing
    Every perspective drawing is a picture traced on an imaginary sheet of glass between your eye and the world. Walk round a 3D room with an eye point and a glass picture plane, switch between one-point, two-point and three-point views, raise your eye height and watch the horizon and the vanishing points move.
Sources for this course (14)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
  • contrast ratio (L1 + 0.05) / (L2 + 0.05)
  • range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
  • 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
  • W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
  • OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
  • OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
  • Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
  • The Newton Project (University of Oxford)
  • Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
  • History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
  • LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
  • RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
  • University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

Checked: 2026-10-17