HEX to HWB Converter
Convert HEX colors into HWB values for hue, whiteness, and blackness workflows in modern CSS.
Supports #RRGGBB and #RGB values.
Enter a valid HEX color value.
Input Format
HEX color code
HEX stores red, green, and blue as hexadecimal pairs. It is compact and widely used in design tools.
HWB CSS color
HWB describes a color by hue plus how much white and black are mixed into that hue.
Conversion Logic
The converter expands shorthand HEX, reads the RGB channels, derives hue from the RGB color, then calculates whiteness from the lowest channel and blackness from the inverse of the highest channel.
whiteness = min(r, g, b) / 255
blackness = 1 - max(r, g, b) / 255
hue = RGB hue angle
Common Examples
| HEX | HWB | Preview |
|---|---|---|
| #FFFFFF | hwb(0 100% 0%) | |
| #000000 | hwb(0 0% 100%) | |
| #FF0000 | hwb(0 0% 0%) | |
| #1E90FF | hwb(210 11.8% 0%) |
When This Conversion Helps
CSS handoff
Convert copied design values into a CSS color syntax that fits the browser feature you are using.
Design systems
Compare the same color across formats before adding tokens, variables, or documentation examples.
Color audits
Translate stored brand colors into perceptual formats when reviewing lightness, contrast, or palette balance.
Common Input Mistakes
- Include either 3 or 6 hexadecimal digits. Values like #12 or #12345 are incomplete.
- Use only 0-9 and A-F. Letters outside the hexadecimal range are invalid.
- Alpha HEX can be useful, but this converter focuses on solid color values for predictable comparisons.
FAQ
Can I use this HEX to HWB converter for CSS? v
Yes. The result is formatted for practical CSS and design handoff. Check browser support when using newer color spaces such as LCH or OKLCH directly in production CSS.
Why does the converted value sometimes look rounded? v
Some color spaces use decimal channels. The tool rounds output to readable precision while keeping the preview tied to the converted RGB color.
Does conversion change the color? v
The goal is to preserve the same sRGB color as closely as possible. Out-of-gamut perceptual values are clamped when converted back to HEX or RGB.
Using This Tool Reliably
Input and output checks
Paste the color value in the format shown by the input label, then compare the preview against the copied result before using it in CSS, a design token, or a brand document.
Conversion logic
The browser calculates the result from the displayed channel values, rounds only for readable output, and keeps the visual preview tied to the same computed color.
Example workflow
Start with a known value such as #1E90FF, review the generated formats, copy the result, then test important text and UI states in the contrast checker when readability matters.
Common mistakes
Watch for missing # characters, RGB channels outside 0-255, percentages entered as plain numbers, alpha values copied into solid-color fields, and colors reused for text without checking contrast.
Related Color Tools
Open the next tool for this color task.
HWB to HEX Converter
converterConvert HWB color values into HEX output.
HEX to OKLCH Converter
converterConvert HEX colors into OKLCH values.
HEX to LCH Converter
converterConvert HEX into perceptual LCH values.
Color Converters - HEX, RGB, HWB & OKLCH
tool-hubConvert colors across web, CSS, perceptual, and print formats.