Working with Colors
A Color object can be created from red, green, and blue values with new Color(r,g,b).
Finding the Line Behind a Wrong Color
Imagine a graphics program draws a shape in a color you did not expect. The shape is not broken, and the program runs without error, yet the color is wrong. Where do you start looking? A Color object in a graphics program can be created in two different ways, and each way takes a different kind of input. Knowing which creation statement produced the color, and which values were passed into it, is the fastest route to the cause.
This article introduces both creation forms. One describes a color by its red, green, and blue components. The other describes a color by its hue, saturation, and brightness. As you read, keep one question in mind: when a color comes out wrong, which line of code created it, and which of the three values in that line was supplied?
Building a Color From RGB Values
A Color object can be created from red, green, and blue values with the statement new Color(r,g,b). The keyword new calls the constructor, which builds a new Color object from the three values supplied in parentheses.
- The keyword new calls the constructor to build a new Color object.
- The first value sets red, the second sets green, and the third sets blue.
- Both lines create a Color object, but the arguments are different, so the colors are different.
The three values in new Color(r,g,b) are matched to components by position. The first value is read as red, the second as green, and the third as blue. Position is the only thing that tells the constructor which component each number sets. The numbers themselves do not carry a label. This is why changing the order of the values changes the result even though the code still runs without complaint.
In the RGB form, each value sets one channel. The final color is the combination of the red, green, and blue channels together. Reversing the red and blue values in the example above turns a red color into a blue one, which shows that the order of the arguments is not a formality.
Building a Color From HSB Values
The second creation form uses the statement Color.getHSBColor(h,s,b). It takes three values for hue, saturation, and brightness. Notice what is different about this line. It does not use the keyword new. Instead, it calls the method getHSBColor on the name of the Color class itself, and the call returns a Color object.
- There is no keyword new, because this is a method call on the Color class.
- The first argument is read as hue, the second as saturation, and the third as brightness.
- The variable names here stand for values the program has already computed or chosen.
Like the RGB form, the HSB form matches arguments by position. The first value is hue, the second is saturation, and the third is brightness. Swapping saturation and brightness still runs, but it describes a different color. The HSB model describes color in a different way from RGB. Instead of mixing light channels, it describes a single hue and then how vivid and how light or dark that hue appears.
The diagram shows hue as a position on a circle rather than a single amount on a line. Moving along the circle changes which hue you get. Because the circle closes, the end of the sequence returns to the same red where it began. That is why a hue value near one end of the range and a hue value near the other end can produce the same red. When you read a getHSBColor call, think of the first argument as a point on that circle, and the other two arguments as controlling how strong and how light that hue is.
Comparing the Two Creation Methods
Both forms produce a Color object, so the difference lies in what you supply and how you call it. The table below places the two creation statements side by side, so you can match each statement to the three values it expects.
| Feature | new Color(r,g,b) | Color.getHSBColor(h,s,b) |
|---|---|---|
| Call style | Uses the keyword new | Method call on the Color class, no new |
| Three values | Red, green, blue | Hue, saturation, brightness |
| Matching rule | Matched by position: first red, second green, third blue | Matched by position: first hue, second saturation, third brightness |
| Result | A Color object | A Color object |
| Typical error | Reversing two numbers gives a different color | Swapping saturation and brightness gives a different color |
Two ways to create a Color object, and the values each one expects.
Tracing a Wrong Color to Its Line
When a program draws a color you did not expect, the fastest way to find the cause is to trace the value back to the statement that created it. Ask three questions in order. First, which creation statement produced the Color object? Second, which values were passed in? Third, which position does each value occupy? The flowchart below follows these questions from a wrong color on screen to the line that needs fixing.
Tracing a red shape that came out blue
A shape meant to be red is drawn blue. The code that creates the color is new Color(0, 0, 255). Find the responsible line and explain the cause.
- 1Identify the creation statement
The statement uses the keyword new, so it is the RGB form, new
Color(r,g,b). - 2List the values passed
The values are 0, 0, and 255. The first is red, the second is green, and the third is blue.
- 3Check the position of each value
A red color needs the red value to be the large one. Here the large value is in the third position, which sets blue, so the first position carries no red.
- 4Locate the fix
Reordering the values so the intended red sits in the first position, as in new
Color(255, 0, 0), changes the color to the one intended. The responsible line is the constructor call itself.
The wrong color came from the position of the values in the new Color(r,g,b) statement, not from the code running incorrectly. Checking the creation method first narrowed the search to one line.
Mistakes That Produce Wrong Colors
Common mistake Reversing two RGB values
What it looks likenew Color(0, 0, 255) when red was intended
Why it failsThe constructor matches values by position, so the value in the third slot sets blue, not red.
Do this insteadConfirm the first value is red, the second green, and the third blue, and put the intended red in the first position.
Common mistake Using getHSBColor arguments in the wrong order
What it looks likePassing brightness where saturation was meant
Why it failsArguments are matched by position, so the second value is read as saturation regardless of what you intended.
Do this insteadCheck the order as hue, saturation, brightness before running the program.
Common mistake Adding the keyword new to the HSB form
What it looks likenew Color.getHSBColor(hue, saturation, brightness)Why it failsThe HSB form is a method call on the Color class and does not use the keyword new.
Do this insteadWrite Color.getHSBColor(hue, saturation, brightness) without new.Common mistake Assuming the color is wrong because of the drawing code rather than the creation statement
Predicting the Effect of a Swap
What do you think happens?
If you change new Color(255, 0, 0) to new Color(0, 0, 255), what happens to the color?
Reveal answer
The color changes, because the value that sets red moves to the blue position.
The constructor matches values by position. The large value moves from the first slot, which sets red, to the third slot, which sets blue. The statement still runs, but the color is different.
A program creates a color with Color.getHSBColor(saturation, hue, brightness) instead of Color.getHSBColor(hue, saturation, brightness). Without running it, describe which argument the program reads as hue and what kind of mistake this is. Then explain how you would find this line if a shape showed an unexpected color.
Hints
- Arguments are matched by position, so the first value is always read as hue in the HSB form.
- Trace from the wrong color to the creation statement, then check which values were passed in which positions.
Key Takeaways
- A Color object can be created with new
Color(r,g,b), where the first, second, and third values set red, green, and blue by position. Color.getHSBColor(h,s,b)is a method call on the Color class with no keyword new, and its first, second, and third values are read as hue, saturation, and brightness.- Hue is best pictured as a position on a circle, so the start and end of the circle meet at the same red.
- When a color is wrong, trace it back to the creation statement, then check which values were passed and their positions.