What is HWB and how does it relate to HSV?

HWB (Hue, Whiteness, Blackness) describes a color by mixing a pure hue with white and black paint. HSV (Hue, Saturation, Value) uses Saturation to control color purity and Value to control brightness. Both share the same Hue axis (0–360°). HWB is the format used in CSS Color Level 4, while HSV is the model used by most design applications like Photoshop and GIMP.

What is the mathematical formula for HWB to HSV?

Given HWB where W and B are in [0, 1] (after normalization if W+B > 1): Value = 1 − B; Saturation = 0 if V is 0, otherwise 1 − W/V. In percentage terms: V = (1 − B/100) × 100; S = V is 0 ? 0 : (1 − (W/100) / (V/100)) × 100.

What happens when Whiteness + Blackness exceeds 100%?

When W + B > 100%, the HWB values are normalized proportionally before conversion: W_n = W / (W + B), B_n = B / (W + B). This matches CSS Color Level 4 browser behavior and results in a gray tone.

Is HSV the same as HSB?

Yes. HSB (Hue, Saturation, Brightness) is simply an alternate name for HSV. The formulas and channel ranges are identical, so you can use the output values directly wherever HSB is required.

Is HWB supported in CSS?

Yes. The hwb() color function is part of CSS Color Level 4 and is supported in all modern browsers (Chrome 101+, Firefox 96+, Safari 15+). This tool helps you convert those values into the HSV format used by design software.

Is any data sent to a server?

No. All calculations run locally in your browser using JavaScript. Your color values never leave your device.

HWB to HSV Color Converter

Name: HWB to HSV Color Converter
Availability: InStock
Author: Nham Vu

Enter HWB values or drag the sliders and instantly see the equivalent HSV (Hue, Saturation, Value) color values with a live swatch.

HWB Input

Hue

deg

Whiteness

Blackness

Color Picker

Quick Presets

hsv(200, 75%, 90%)

HSV / HSB Values

Hue

200

deg

Saturation

Value

hsv(200, 75%, 90%)

Conversion Formula

V = 1 − B

S = V > 0 ? (1 − W / V) : 0

H_hsv = H_hwb (unchanged)

where W and B are in [0, 1] (normalize if W + B > 1)

Copied!

Summary

Enter HWB values or drag the sliders and instantly see the equivalent HSV (Hue, Saturation, Value) color values with a live swatch.

How it works

Enter or drag the Hue slider (0–360°) to select a base color angle.
Adjust the Whiteness slider (0–100%) to control how much white is mixed into the color.
Set the Blackness slider (0–100%) to control how much black is mixed into the color.
The HSV equivalent — Hue, Saturation, and Value — updates instantly.
A live color swatch shows the resulting color.
Click Copy to grab the hsv() or individual channel values for use in your design tool.

Use cases

Convert CSS hwb() color values into HSV for use in Photoshop or GIMP.
Translate CSS Color Level 4 HWB colors into the HSV model used by most color pickers.
Understand how Whiteness and Blackness map to Saturation and Value in design tools.
Cross-reference HWB and HSV representations of the same color for documentation.
Verify color transformations when building color pickers or palette generators.
Explore how adding white or black to a hue affects its HSV saturation and value.
Generate HSV channel values from CSS hwb() function input.
Quick-check color channel relationships when teaching color theory.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu