Convert HWB to RGB
Convert HWB values like hwb(188 13% 7%) into CSS rgb(34, 211, 238)—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 RGB results instantly
Quick start
- Paste your HWB color(s) into the input.
- Use one color per line.
- Copy the RGB results.
Single color
Input:
hwb(188 13% 7%)Output:
rgb(34, 211, 238)Palette / batch conversion
Input:
hwb(340 0% 0%)
hwb(188 13% 7%)
hwb(221 7% 85%)Output:
rgb(255, 0, 85)
rgb(34, 211, 238)
rgb(17, 24, 39)Small rounding differences are normal. RGB 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 tints/shades and UI states.
What RGB means
RGB stands for Red, Green, Blue—the three light channels used by screens.
- Each channel is an integer from 0 to 255.
rgb(0, 0, 0)is black.rgb(255, 255, 255)is white.
RGB is especially useful when you need:
- color math (mixing, interpolation, gradients)
- canvas / image processing values
- programmatic theme generation
How HWB → RGB conversion works
Conceptually, the converter does this for each line:
- Read Hue (degrees), Whiteness (%), Blackness (%)
- Convert those values into RGB channels (0–255)
- Format the result as
rgb(r, g, b)
A practical rule:
- HWB is great for editing (“more white / more black”)
- RGB is great for output (CSS, code, pixels)
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 tweaks into real RGB values for CSS or code
- Generate UI states by adjusting Whiteness/Blackness, then export as RGB
- Build predictable tints/shades from a base hue
- Work with canvas/WebGL where numeric channel values are convenient
If you like editing colors by “add white / add black,” HWB is a great place to design the look—then RGB is a clean output for CSS and programmatic usage.
