#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Grayscale beyond [0,255]

edited July 2016

Hello,

I don't understand one aspect of grayscale colors. At multiple ressources—e. g. Daniel Shiffman's great 'Learning Processing'—I only read, that 0 means black, 255 means white. And every number in between is a shade of gray.

But I can't find any hint, how the colors are distributed beyound this range. E. g. `background(3000);`leads to a blue background. Can somebody explain this to me?

Regards, Daniel

Tagged:

Indeed, you are observing behavior that appears strange at first sight, but can be understood when you discover the way that Processing stores color data.

Processing's `color` datatype is a user-friendly renaming of the `int` datatype. In fact, these two types are exactly the same and any `color`s are changed to `int`s at runtime. So color data is stored as an integer... and if you ever print out a color, that's why you get really weird numbers.

Color data is formatted in Hexadecimal form, which is the standard used in Web development. In Processing, you can include Hex color literals (such as `#FFFFFF`) and they will be converted to the corresponding `int` notation at runtime.

Try running this short program:

``````color col = 3000; //color here is interchangeable with int
background(col);
println(hex(col)); //hex() converts an int to a hexadecimal String
``````

So in this case, the number `3000` is being interpreted as a Hexadecimal literal, which happens to map to a shade of the color blue. If you take the printed result of the Hexadecimal conversion and remove the two leading zeros (the alpha component) (which yields 000BB8) and place it in hexadecimal color notation where the `3000` is in the code above, it will yield the same result.

• edited November 2013 Answer ✓

Colors in Processing are represented user integers and integers are 4 bytes (32 bits). It is mapped like this: AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB

The first byte, A, is used for alpha but Processing's built in color assistance makes it so that you don't have to think about it usually.

The second byte, R, is used for red. Red goes from 0 - 255 for most Processing functions like background(red, green, blue).

The third and fourth bytes are green and blue and work similarly to red (they go from 0 - 255).

When you write background(255, 0, 0) in Processing (which is red) it is the same as having written: 11111111111111110000000000000000. This can also be represented in hexadecimal as: 0xffff0000. Converting to decimal (numbers people generally use) is less straightforward.

Try using the hex() function with 3000: http://processing.org/reference/hex_.html

If you write println(hex(3000)) it says 00000BB8 (which can be manually written as 0xbb8), which looks like a slightly greenish blue.

``````void setup() {
size(100, 100);
background(3000);
}
``````
• I assumed something like this, but didn't understand it in detail. Now, it is absolutely clear. Thank you very much for your explanations!

But one suggestion: Although there are lot of information at the processing website, I miss some more detailled information—e. g. about your explanations about how colors are processed. It would be very helpful is somebody could add them somewhere. ;)