# HSB Colormode

The Processing HSB colormode provides a powerful option for using color as design features in our programs. When working with RGB colors, it can be difficult to determine how to modify an RGB value using code, for example how can we modify an RGB value to get a slightly darker shade of the current fill color? However, The HSB colormode allows programmatic control over the Hue, Saturation, and Brightness of colors. For example, a user-interaction can be used to trigger a decrease in Brightness, as an easy way add hover-type behaviors to button shapes.

## HSB Colors

The image below shows the HSB colorspace. From this diagram, we can see that if we want to understand a specific HSB color, given in terms of Hue, Saturation, and Brightness parameter values, it is easiest to read a HSB color starting with the brightness parameter.

## Brightness

The brightness scale defines grayscale colors, where a brightness value of 0 corresponds to black, and the max- brightness corresponds to white. So, if we see an HSB value with O for brightness, the other values don't impact the color because the colorspace is at the lowest tip of the cone, black is the only color in this region. So for a fill() function with 3 values fill(H, S, B), we should start reading the color from the right-most parameter, the B value. If the B value is 255 (the max value), then we can see that these colors correspond to the top surface-edge of the cone.

## Saturation

Within this circular slice, we can see that the center of the circle is white, and as the radius increases, the saturation increases so the outer rim of the circle has full saturation values. So, when analyzing an HSB value, once we've determined that B is greater than 0, we next need to look at the S value to determine the saturation level. This corresponds to moving outwards from the centerpoint of the circle, to colors with higher saturation intensity.

## Hue

The hue value corresponds to the angle of rotation around the circle. This image shows the hue angle incorrectly, for processing the hue values increase in the clockwise direction, with the 0 value at the 3 o'clock position.

![](/files/-M0-KbFBEe59x1ezP0Fv)

Image from: [TomJewett.com](http://www.tomjewett.com/colors/hsb.html)

## Color Wheel

To create a simple color-wheel, we can use the arc() function, in conjunction with the HSB colorMode().

The *Processing.js* `arc()` function takes 6 parameters: x, y, w, h, startDegree, endDegree. In the Khan Academy, all angles use degree measurement as the default input parameter.

![](/files/-M0-KbFDskzklFYYQ6XM)

```java
//setup configuration 

colorMode(HSB); 
//fill( Hue, Saturation, Brightness)

background(255); //white background
var angleSize = 45; //change using number scrubber
angleSize = constrain( angleSize, 1, 90); //make sure number is not 0 since it's used as a divisor

var startDegree = 0;
var numSlices = 360 / angleSize;
var hueValue = 0;

for( var i =0; i< numSlices; i++){
    hueValue = map( startDegree, 0, 360, 0,255);
    fill(hueValue, 255, 255);
    arc (200,200, 300, 300, startDegree, startDegree + angleSize );
    startDegree = startDegree + angleSize;
}
```

<https://www.khanacademy.org/computer-programming/colorwheel/4745658033930240>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kdoore.gitbook.io/cs1334/hsb_colormode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.