When choosing colors for your design, there are many helpful wonderful tools available that will choose your palette for you. But let’s say you want to create a simple color pallet with only one color? What’s an easy way to do this? Enter the HSB color picker.
HSB Explained
So, what does HSB stand for anyway? Let’s break it down.
H: Hue
Hue is the base identifier for your color, represented by a value from 0-360. These values represent the position along the perimeter of the color wheel where the color lives, represented as degrees. For basic orientation, red is 0/360, green is 120, and blue is 240.
With this basic orientation you can easily get in the ballpark of your target color, varying the hue value to create more intermediate colors.
S: Saturation
Saturation is most easily defined as how much of the color you're using. Saturation of 100 will be the most intense version of your color, while 0 will be the most grey or white.
B: Brightness
The last component of HSB is the color's brightness. If each color on the spectrum were the color of a lightbulb, the brightness value would be how fully the bulb was powered. In practice, this translates to how close to black our color is (brightness of 0 is black, regardless of any other variable).
Creating our color pallet
Bringing this all together, let's make our monochromatic color pallet we discussed earlier. As you can see below, a wide range of cohesive colors can be created simply by changing these simple parameters in your color picker.
Editing colors with HSB in Illustrator
It's easy to adjust your colors with HSB values in Adobe Illustrator by doing the following:
Open the color picker
Select the radio button for the parameter you want to adjust (H, S, or B).
Use the slider bar to adjust your color.
You can also edit parameters on the fly using the color tool window, selecting HSB from the tool options menu.
Happy coloring!
Comments