Exploring RGB Colors

In this activity, you'll explore how RGB color values create colors.
  1. If your project isn't open already, open your "Pixel Display" project by choosing "Open" from the Snap! File menu.
  2. Find the RGB pixel, red: (85) green: (170) blue: (255) block in the palette, drag it into the scripting area, and click the block to run it. The RGB pixel block takes three numbers as input and reports a list with the those three color values.

    3. A list is an ordered sequence of items.

    PLEASE don't interrupt experiments with huge vocabulary lessons. The language "reports a list" is sufficient context to make clear what a list is. And anyway, kids already know. They've seen the lists you show here and before that they've seen shopping lists. The fact that a list, in this context is "an ordered sequence" (unlike a shopping list) is true and important but can be taken for granted. Kids want to experiment and the last two items in this activity are potentially fun and interesting. Making vocabulary a priority just guarantees that it will become the focus of the course, will be tested, and will kill any semblance of B and J that is left. --PG

    consider hinting this to shorten the page. --MF, 7/24/23

    You've seen a list before when you selected random items from lists in the Super Short Story project:
    random job: {report (item (random) of (list (artist) (computer programmer) (cashier) (musician) (landscaper) (nurse) (plumber)))}
    The output of random job was a random item from the list of jobs.

    The output of RGB pixel is a list of three values: the amount of red, green, and blue for one pixel.

  3. The draw pixel 'list input slot' block takes a list of RGB values as input and draws a pixel with those values on the stage. Find the draw pixel block in the palette, drag it into the scripting area, snap the RGB pixel block into the open input slot, and run the script to draw a pixel with those color values.
    draw pixel (RGB pixel, red: (85) green: (170) blue: (255))
  4. RGB pixels have integer color values from 0 to 255. Experiment with the input values to the RGB pixel block inside draw pixel, and see how it changes the pixel drawn on the stage.
    Click the image for an animation.
    animation of a square made up of three horizontal rectangles each of a solid color: red, green, and blue. As the animation progresses, the three rectangles vary in darkness but each one remains a shade of its original color.
  5. The paint color from pixel block takes two inputs, a list of RGB color values and a resolution, and it paints a grid of pixels on the stage with those color values at that resolution. Find the paint color from pixel block, and build and run this script.
    paint color from pixel (RGB pixel, red: (85) green: (170) blue: (255))
  6. Keep increasing the resolution and clicking the script. At what resolution do you start seeing a single color?
  7. Reminder: RGB pixels have integer color values from 0 to 255.
    Experiment with the input values to the RGB pixel block inside paint color from pixel.
    1. Try to get a purple color.
    2. What RGB color values give you black?
    3. How can you get a turquoise (blue-green) color?

One day in the future, it would be nice to have Venn diagram color wheels here. --MF, 9/12/21
Why can't you mix white or other light colors with the paint color from pixel block ?

These aren't really pixels but are instead models of pixels made to show how pixels blend to make colors. They are only a third as bright as real pixels because the real pixels that display these model pixels on your screen each include only a third of their total possible brightness. (Real white pixels have 100% red, 100% green, 100% blue not just 100% red but no green or blue near a pixel with 100% green but no red or blue and a pixel with 100% blue but no red or green.)

This project also includes a paint color, red: () green: () blue () block that doesn't use model pixels at all and instead paints with the real RGB colors. Try it out. How can you make white or another light color?

  1. Try to get other familiar colors like yellow, orange, gray, and brown.

Why do RGB colors mix differently than paint?

You might be familiar with subtractive color mixing where the primary colors are red, yellow, and blue and you can get secondary colors by mixing red and yellow to make orange, yellow and blue to make green, and red and blue to make purple. Mixing paints is subtractive color mixing, but mixing light (like the images on a screen) is additive color mixing. In additive color mixing, the primaries are red, green, and blue, and the secondary colors that you get by mixing equal parts of the primaries are yellow, cyan, and magenta.

Additive color mixing (like on a screen) is called additive because you start with no light and add light to get colors. Subtractive color mixing (like with paint) is called subtractive because you start with white light (which includes all the colors), and the paint absorbs (takes away) all the colors except the one reflected back to your eye. (For example, when white light hits red paint, all colors are absorbed except red.)

More optional reading: What Is the Difference Between Additive and Subtractive Color Mixing?

In this activity, you used RGB color values to represent colors, used the list reported by the RGB pixel block as the input to the draw pixel block, and experimented with RGB color mixing.