Convert RGB to HWB
Convert CSS rgb(...) colors into HWB values like hwb(188 13% 7%)—fast, private, and right in your browser.
- Paste a single RGB color or a whole palette
- Use one color per line for batch conversion
- Copy your HWB results instantly
Quick start
- Paste your RGB color(s) into the input.
- Use one color per line.
- Copy the HWB results.
Single color
Input:
rgb(34, 211, 238)Output:
hwb(188 13% 7%)Palette / batch conversion
Input:
rgb(255, 0, 85)
rgb(34, 211, 238)
rgb(17, 24, 39)Output:
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 RGB means
RGB stands for Red, Green, Blue—the three light channels used by screens.
- Each channel is usually an integer from 0 to 255.
rgb(0, 0, 0)is black.rgb(255, 255, 255)is white.
RGB is common because it maps directly to how pixels work, so it shows up in:
- CSS and browser APIs
- design tools that copy colors as
rgb(…) - canvas / image processing code
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).
Some workflows find HWB more intuitive than HSL because it’s literally “add white / add black.”
Where HWB is useful
HWB is great for systematic tweaks:
- Make a color lighter → increase Whiteness
- Make a color darker → increase Blackness
- Keep the same identity → keep Hue stable
It’s handy for:
- building UI states (hover/active/disabled)
- generating tints and shades consistently
- explaining palettes in docs with simple intuition
How RGB → HWB conversion works
Conceptually, the converter does this for each line:
- Read the RGB channels (0–255)
- Convert the color into a hue-based representation
- Output:
- Hue (degrees)
- Whiteness and Blackness (percent)
Practical takeaway:
- RGB is great for screen-native values
- HWB is great for editing tints/shades
Common mistakes (and quick fixes)
Extra spaces at the start/end of a line
Leading and trailing spaces are ignored.
✅ rgb(255, 0, 85)
🚫 rgb(255, 0, 85)
Missing “rgb( … )” wrapper
Each line must be a full CSS-style RGB string:
✅ rgb(17, 24, 39)
🚫 17, 24, 39
Values outside 0–255
RGB channels should stay in range:
✅ rgb(0, 128, 255)
🚫 rgb(300, -5, 260)
Practical uses
- Convert RGB exports into editable values for tint/shade building
- Create consistent UI states by nudging Whiteness or Blackness
- Generate color scales while keeping Hue stable
- Document palettes with a simple “add white / add black” explanation
If you like tweaking colors by “more white” or “more black,” HWB is a great editing view—then you can convert to HEX when you’re ready to store final tokens.
