Convert HEX to HWB
Convert HEX codes like #FF5733 into HWB values like hwb(11 20% 0%)—fast, private, and right in your browser.
- Paste a single HEX color or a whole palette
- Use one color per line for batch conversion
- Copy your HWB results instantly
Quick start
- Paste your HEX color(s) into the input.
- Use one color per line.
- Copy the HWB results.
Single color
Input:
#22D3EEOutput:
hwb(188 13% 7%)Palette / batch conversion
Input:
#FF0055
#22D3EE
#111827Output:
hwb(340 0% 0%)
hwb(188 13% 7%)
hwb(221 7% 85%)Small rounding differences are normal. Hue is typically rounded to whole degrees and percentages to whole numbers.
What HEX means
HEX is a compact way to write RGB colors using hexadecimal (base‑16).
Most commonly, HEX looks like:
#RRGGBB
Each pair is one channel:
RR= redGG= greenBB= blue
Shorthand HEX
You’ll also see 3-digit shorthand:
#fffexpands to#ffffff
Same color—just shorter.
What HWB means (Hue, Whiteness, Blackness)
HWB represents color using:
- Hue (H): the color family on a wheel (0–360°)
- Whiteness (W): how much white is mixed in (0% → none, 100% → fully white)
- Blackness (B): how much black is mixed in (0% → none, 100% → fully black)
A useful mental model:
- Hue picks the “base” color.
- Whiteness moves it toward a tint (lighter).
- Blackness moves it toward a shade (darker).
This can feel more intuitive than HSL for some workflows because you can think in “add white / add black.”
Where HWB is useful
HWB is a great format when you want predictable, systematic tweaks:
- Make a color lighter → increase Whiteness
- Make a color darker → increase Blackness
- Keep the same ‘identity’ → keep Hue stable
It’s also handy for:
- building UI states (hover/active) by nudging W/B
- creating a family of tints and shades quickly
- documenting colors in a way that’s easy to explain
How HEX → HWB conversion works
Conceptually, the converter does this for each line:
- Parse HEX into RGB channels
- Convert RGB into a hue-based representation
- Compute:
- Hue (degrees)
- Whiteness and Blackness (percent)
Practical takeaway:
- HEX is great as a final token for CSS and config files
- HWB is great as an editing view for tints/shades
Common mistakes (and quick fixes)
Extra spaces at the start/end of a line
Leading and trailing spaces are ignored.
✅ #FF0055
🚫 #FF0055
Missing the #
Use standard CSS-style HEX with the leading #:
✅ #111827
🚫 111827
Invalid length
HEX should be either 3 or 6 hex digits (plus the #):
✅ #fff, #ffffff
🚫 #ffff, #fffffff
Non-hex characters
HEX digits must be 0–9 or A–F:
✅ #12ABEF
🚫 #12ABEG
Practical uses
- Convert HEX tokens into editable values for tint/shade adjustments
- Build consistent UI states by increasing Whiteness (hover) or Blackness (active)
- Generate color scales while keeping Hue stable
- Explain palettes in documentation with simple “more white / more black” intuition
If you’re iterating on UI colors, HWB can be a surprisingly friendly format—then you can convert back to HEX when you’re ready to store final tokens.
