Hue chooses the color family
Move around the color wheel through red, yellow, green, cyan, blue, magenta, and back to red. Hue has little visible effect when saturation is zero.
Free browser color tool
HSB Color Picker and HEX RGB Converter
Choose a shade with hue, saturation, and brightness controls, or enter an exact HEX or RGB value. Every format stays synchronized so you can explore it visually and copy the code you need.
Updated July 18, 2026
HSB color picker
What does this HSB color picker do?
This HSB color picker lets you edit hue from 0 to 360 degrees and saturation and brightness from 0 to 100 percent. It converts the same on-screen shade to six-digit HEX and RGB values, keeps every input synchronized, and provides copy-ready output. Use it to tune a cartoon-style palette, inspect a design token, understand which channel changes a shade, or prepare a value before comparing it with the Toon Tone Delta E calculator.
HSB · HEX · RGB
Pick and convert a shade
Move a slider, enter a channel value, choose a preset, or type a HEX code. The preview and every numeric format update from the same shade.
Live color preview#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
CSS variable
--toon-color: #2FB8D8;Cartoon-style color presets
These are editable Toon Tone examples, not official franchise color specifications.
Read the three channels
This model separates a shade decision into family, intensity, and light level. Change one channel at a time when you want to understand why the result feels different.
Saturation controls intensity
Lower saturation moves a color toward gray; higher saturation makes its hue more vivid. It does not simply make every color darker or lighter.
Brightness controls the light ceiling
Zero brightness is black. Raising brightness reveals the selected hue and saturation, although perceived lightness still differs between color families and screens.
Choose the control that matches the task
The formats describe one color from different angles. Start with the decision you need to make, then use the channel or measurement that answers it.
| Task | Best starting point | Check next |
|---|---|---|
| Choose red, green, blue, or another family | Hue | Saturation, then brightness |
| Make a shade vivid or muted | Saturation | Keep hue stable while comparing |
| Make a shade lighter or darker | Brightness | Review contrast in its real context |
| Copy a web or design token | HEX or RGB | Record the source and color profile |
| Measure how different two colors are | Delta E calculator | Inspect visible samples and HSB deltas |
How the model organizes a shade decision
HSB stands for hue, saturation, and brightness. Hue identifies the position around a circular color wheel, saturation describes how far the color is from a neutral gray, and brightness controls the maximum channel level used to display it. This separation is useful because it resembles a common editing sequence: choose the broad color family, decide how intense that family should feel, and then set how bright or dark the final shade should be. The three numbers describe one digital color together; none of them is a quality score by itself.
The model is also commonly called HSV, where value replaces the word brightness. In ordinary digital color tools, HSB and HSV usually refer to the same mathematical model. HSL is different: its lightness axis places pure hues at a middle value and blends toward white above that point, so an HSL percentage should not be pasted into an HSB field as if it were identical. This page labels every channel explicitly and keeps the converted HEX and RGB values visible, making it easier to notice when two tools use different terminology or scales.
A reliable hue, saturation, and brightness workflow
Begin with hue while saturation and brightness are high enough to show the family clearly. Move to the red, orange, yellow, green, cyan, blue, or purple region before chasing small numerical changes. Next, lower saturation until the color carries the right amount of softness. Many remembered cartoon shades are less saturated than their color name suggests, especially when shading, compression, or surrounding colors affect the impression. Adjust brightness last so you do not confuse a dark version of the right hue with a different hue family.
For precise work, change one channel at a time and keep the previous value written down. A large simultaneous movement can produce a pleasing result while hiding which adjustment actually solved the problem. The synchronized HEX and RGB fields provide a stable handoff after visual editing. If you already have an approved token, type it directly instead of trying to recreate it with sliders. The picker is most useful when it connects exploration to an exact value, not when it replaces a known source with a new approximation.
What happens during HEX, RGB, and HSB conversion
HEX and RGB encode red, green, and blue channel amounts for digital display. A six-digit HEX value stores two hexadecimal digits for each channel, while RGB usually presents the same channels as decimal values from 0 to 255. The picker converts those values to HSB, edits the HSB coordinates, and converts the result back to a displayable RGB color. Three-digit HEX input is expanded to six digits before conversion. Small round-trip differences can appear when a continuous percentage is rounded to the whole numbers shown in the interface.
Conversion does not discover an official name, brand specification, paint formula, or physical sample. It also does not correct a monitor, infer an embedded image profile, or guarantee that another device will display the same appearance. Keep the original token when exact reproduction matters and record whether a value came from source artwork, a design system, or a sampled screenshot. A compressed image can already contain altered pixels. The numeric conversion can be correct for the supplied value while the supplied value is not the authoritative color you intended to capture.
Using the picker for cartoon palettes and illustration
Cartoon artwork often uses clear color families, but the memorable identity of a shade depends on more than a basic label. A yellow can lean warm or green, a blue can be pale or deeply saturated, and a red can move toward coral, orange, or magenta. Use the HSB picker to build a small family of related shades without losing the starting hue. Duplicate the HEX value in your own notes, then change saturation or brightness deliberately to create highlights, shadows, interface accents, or study swatches that remain easy to compare.
The presets on this page are generic Toon Tone examples. They are useful starting points for learning the controls, not official codes for a studio, character, franchise, printer, or merchandise line. When a project has an approved palette, follow that source. When you are studying an image, keep the sampled area and viewing conditions visible. A tiny accent, a shaded frame, and a large flat body area may all produce different representative colors even when viewers describe them with the same everyday color word.
Keep working with this color
HSB color picker questions
Are HSB and HSV the same?
They usually name the same digital color model. HSB uses brightness and HSV uses value for the third channel. Always check a tool's documented ranges before moving values between applications.
Is HSB the same as HSL?
No. Both use hue and saturation labels, but HSL calculates lightness differently from HSB brightness. The same percentages can produce different colors, especially near white and black.
Can I convert a three-digit HEX color?
Yes. A shorthand such as #0af is expanded to #00AAFF before conversion. Six-digit values work with or without the leading hash.
Does the tool upload or save my color?
No color account or server upload is required. The picker runs in the browser and the copy buttons place only the displayed text on your clipboard when permission is available.
Can HSB brightness prove accessible contrast?
No. Accessibility contrast uses relative luminance for a foreground and background pair. HSB brightness alone is not a WCAG contrast calculation.
Why can another color picker show slightly different numbers?
Tools may round channels differently, use HSL instead of HSB, apply color management, or display more decimal precision. Compare the resulting HEX or RGB value and the tool's documented model.