Computer Colors

Computer colors are the representation of various colors in computers. There are many formats for representing colors, including hexadecimal colors, RGB(A) colors and HSL/HSB/HSV colors.

HSL colors

HSL colors, also called HSB or HSV colors, are what Scratch uses in its Pen Blocks. This stands for Hue Saturation Lightness/Brightness/Value. Hue is the actual "color" and lightness is the "shade". Saturation refers to how much color is present; saturation of 0% means black-and-white while 100% means as much contrast as possible. The Scratch program does not give users control over the saturation of a color.

Mixing HSL colors

In Scratch projects, it is often necessary to mix two colors, often if you want to draw a gradient or if you need it for a paint program feature. There are two ways.

Direct mixing

Main article: Wikipedia:HSL and HSV#Converting to RGB

Direct color mixing needs some math, but it allows you to mix pen colors directly. This is useful for drawing shapes. First, convert the color and shade to RGB. Then find the averages of the R, G, and B values and convert back to color and shade.

Sprite mixing

You can also mix colors with sprites. Create two sprites, both rectangles of the colors you want to mix. Then place them on top of each other, and set the ghost effect of the top one to 50.

To dynamically alter the colors being mixed, change the color effect.

Color picker palette

The Scratch 1.4 color-picker palette.
Main article: Color Picker

In some Scratch blocks, and input is a color picker. In these color pickers, the X axis determines the color (hue) and the Y axis determines the shade. The bar on the far right picks grayscale values (no saturation).

RGB colors

RGB(A) colors are represented by the amount of red, green, and blue light in them. For example, rgb(0,0,0) is black (no light); rgb(1,1,1) is white (all light) and rgb(0.5,0,0) is dark red (some red light). RGB colors can be mixed by averaging the R, G, and B values.

You can use the following code to change the pen color using RGB in Scratch:

set pen color to ((((R) * (65536)) + ((G) * (255))) + (B)) // Be sure to use the pen color block with the color input (like the one below), or the colors will not function properly.

set pen color to [#0000FF]

RGBA colors

RGBA colors are like RGB colors, but also include transparency. A stands for Alpha transparency. Alpha transparency 0 is clear; 1 is opaque. For example, rgba(1,0,0,0.5) is a translucent red color. If painted over a blue pixel, the pixel will turn to purple rather than red. Scratch does not support alpha transparency in its costumes. However, you can simulate alpha transparency using the ghost effect.


You can use the following code to change the pen color using RGBA in Scratch:

set pen color to ((((A) * (16777216)) + ((R) * (65536))) + (((G) * (255)) + (B)))

Warning Warning: Make sure the values A, R, G, and B are rounded so they do not contribute to other colors' values.


Hexadecimal colors

Hexadecimal (or hex) colors use the same format as RGB colors, but as three two-digit base-16 values (the digit representation is 0-9, then A-F). This allows 2563 (16,777,216) different colors. The first two digits represent the amount of red from 0 (00) to 255 (FF). The second two digits represent the amount of green from 0 (00) to 255 (FF). The third two digits represent the amount of blue from 0 (00) to 255 (FF). For example, red is 100% red, 0% blue, and 0% green. So the hex value would be #FF0000 (FF, 00, 00), where FF is the largest possible 2-digit hex number (so you get the most red in your color). This variety is also called 24-bit RGB because there are 24 bits in this notation, 4 for each hexadecimal digit.

There is also a more compact variant of the RGB space, stored as 1-digit hexadecimal values, called 12-bit RGB. Each color takes up 1.5 bytes, half that of 24-bit RGB, but there are only 163 (4,096) possible colors. For example, in 12-bit RGB, red is #F00, representing 100% red (F), 0% green (0), and 0% blue (0). To convert 12-bit RGB to 24-bit RGB, duplicate all the red, green, and blue digits. For example, #F6A becomes #FF66AA.

The Block Plugin and BBCode use hexadecimal colors to represent color inserts, because it is the color format most commonly used with the HTML and CSS with which they are built.

RGBA colors in images are stored as 32 bits, corresponding to 4 2-digit hexadecimal values. There are 2564 (4,294,967,296) possible 32-bit RGBA values. The first two digits represent alpha transparency from 00 to FF. (Note that a transparent pixel would be invisible, so it is approximated by an off-white). The last 6 digits are stored the same way as in 24-bit RGB. For example, an opaque red pixel in an image is #FFFF0000, for it is 100% alpha, 100% red, 0% green, and 0% blue. The compact version is 16-bit RGBA, represented by 4 1-digit hexadecimal values and allowing 164 (65,536) colors. For example, in 16-bit RGBA, an opaque red pixel is #FF00, for 100% alpha (F), 100% red (F), 0% green (0), and 0% blue (0).

You can use the following code to use hexadecimal format colors:

set pen color to ((join [0x][FF00FF]) * (1)) //replace 'FF00FF with the desired hexadecimal color

Note: This also works with RGBA colors

Invisible forum colors

The color transparent appears invisible on the forums, so it is useful for cheat sheets — but note that it appears black on Internet Explorer.

  • This page was last modified on 27 February 2017, at 16:00.