Convert HWB to HEX
Convert HWB values like hwb(188 13% 7%) into clean HEX codes like #22D3EE—fast, private, and right in your browser.
- Paste a single HWB color or a whole palette
- Use one color per line for batch conversion
- Copy your HEX results instantly
Quick start
- Paste your HWB color(s) into the input.
- Use one color per line.
- Copy the HEX results.
Single color
Input:
hwb(188 13% 7%)Output:
#22D3EEPalette / batch conversion
Input:
hwb(340 0% 0%)
hwb(188 13% 7%)
hwb(221 7% 85%)Output:
#FF0055
#22D3EE
#111827Small rounding differences are normal. HEX channels are integers, so conversion may round degrees and percentages.
What HWB means (Hue, Whiteness, Blackness)
HWB represents color using:
- Hue (H): the base color around a wheel (0–360°)
- Whiteness (W): how much white is mixed in (0–100%)
- Blackness (B): how much black is mixed in (0–100%)
A useful mental model:
- Hue picks the “color family.”
- Increasing Whiteness creates a tint (lighter).
- Increasing Blackness creates a shade (darker).
This makes HWB a friendly format for building UI states and systematic tints/shades.
What HEX means
HEX is a compact way to store RGB colors as a single token:
#RRGGBB
Each pair is one channel:
RR= redGG= greenBB= blue
HEX is widely used for:
- CSS variables and theme tokens
- Tailwind / design system configs
- storing palettes in JSON/YAML
- quick copy/paste across tools
How HWB → HEX conversion works
Conceptually, the converter does this for each line:
- Convert HWB into RGB channels (internally)
- Convert each RGB channel (0–255) into a 2-digit hex pair
- Join them into
#RRGGBB
Practical takeaway:
- HWB is great for editing tints/shades in an intuitive way
- HEX is great for final tokens in CSS and config files
Common mistakes (and quick fixes)
Extra spaces at the start/end of a line
Leading and trailing spaces are ignored.
✅ hwb(188 13% 7%)
🚫 hwb(188 13% 7%)
Missing % signs for W and B
Whiteness and Blackness are percentages:
✅ hwb(221 7% 85%)
🚫 hwb(221 7 85)
Hue outside 0–360
Keep Hue within a normal degree range:
✅ hwb(340 0% 0%)
🚫 hwb(420 0% 0%)
W + B too large
In HWB, Whiteness + Blackness should not exceed 100% for a normal color.
✅ hwb(188 13% 7%)
🚫 hwb(188 70% 50%)
If W + B is over 100%, many systems clamp/normalize the values, which can produce unexpected results.
Practical uses
- Convert HWB edits back into HEX tokens for CSS
- Build consistent UI states by nudging Whiteness/Blackness
- Create tints and shades in a predictable way, then store as HEX
- Document palettes with an intuitive “add white / add black” workflow
If you like tweaking colors by “more white” or “more black,” HWB is a great editing view—then HEX keeps your final palette clean and portable.
