Output Color

Loading… Please Wait

About HWB to RGB Converter

Input an HWB value like hwb(180deg 0% 0% / 0.5) and Diversify India’s HWB to RGB converter will convert this value to an RGB color like rgb(128, 255, 255).

Additionally, we can even specify a background color in RGBA format. Diversify India’s HWB to RGB converter will mix these foreground and background colors to get the resultant RGB color.

HWB color parameters are hue, whiteness, blackness, and alpha. The output RGB color parameters are red, green, and blue.

Why Convert HWB to RGB?

Converting HWB to RGB is useful because RGB is the standard color model for digital screens and most image processing tasks. The HWB color model represents colors more intuitively by defining them with hue, whiteness, and blackness, which can simplify color adjustments and manipulations in design applications.

How to Convert HWB to RGB

To convert HWB to RGB, you need to transform the hue, whiteness, and blackness components into red, green, and blue components.

  1. Extract the values for Hue (H), Whiteness (W), and Blackness (B) from the HWB code.
    • Example: hwb(320deg 20% 65%) gives H = 320, W = 20%, B = 65%.
  2. Convert the whiteness and blackness values to a range of 0 to 1 by dividing by 100.
    • W = 20% / 100 = 0.2
    • B = 65% / 100 = 0.65
  3. Calculate the intermediary values (V) and (C).
    • V = 1 – B
    • C = V – W
    • Example: V = 1 – 0.65 = 0.35, C = 0.35 – 0.2 = 0.15
  4. Calculate the intermediary value (X) based on the hue (H) value.
    • X = C × (1 – ∣(H/60) % 2 – 1∣)
    • Example: X = 0.15 × (1 – ∣(320/60) % 2 – 1∣) = 0.1
  5. Calculate the red (R), green (G), and blue (B) components based on the hue (H) value.
    • For 0 ≤ 𝐻 <60: (𝑅, 𝐺, 𝐵) = (𝐶, 𝑋, 0)
    • For 60 ≤ 𝐻 < 120: (𝑅, 𝐺, 𝐵) = (𝑋, 𝐶, 0)
    • For 120 ≤ 𝐻 <180: (𝑅, 𝐺, 𝐵) = (0, 𝐶, 𝑋)
    • For 180 ≤ 𝐻 < 240: (𝑅, 𝐺, 𝐵) = (0, 𝑋, 𝐶)
    • For 240 ≤ 𝐻 < 300: (𝑅, 𝐺, 𝐵) = (𝑋, 0, 𝐶)
    • For 300 ≤ 𝐻 < 360: (𝑅, 𝐺, 𝐵) = (𝐶, 0, 𝑋)
    • Example: Since H = 320, 𝑅 = 0.15, 𝐺 = 0, 𝐵 = 0.1
  6. Adjust the RGB values with the whiteness value (W).
    • R = R + W
    • G = G + W
    • B = B + W
    • Example: 𝑅 = 0.15 + 0.2 = 0.35, 𝐺 = 0 + 0.2 = 0.2, 𝐵 = 0.1 + 0.2 = 0.3
  7. Convert the RGB values to a range of 0 to 255 by multiplying by 255.
    • 𝑅 = 0.35 × 255 ≈ 89
    • 𝐺 = 0.2 × 255 = 51
    • 𝐵 = 0.3 × 255 ≈ 77
  8. Combine the RGB values:
    • Example: rgb(89, 51, 77)

List of Color Tools