Output Color

Loading… Please Wait

About HWB to RGBA Converter

Input an HWB value like hwb(180deg 0% 0% / 0.5) and HWB to RGBA converter will convert this value to an RGBA color like rgba(0, 255, 255, 0.5).

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

Why Convert HWB to RGBA?

Converting HWB to RGBA is essential for applications where colors need to be defined with precision, including their transparency. RGBA format is widely used in web design, graphic design, and image processing to create effects involving color blending and transparency.

How to Convert HWB to RGBA

To convert HWB to RGBA, you need to transform the hue, whiteness, and blackness values into red, green, and blue components, and then include the alpha component.

  1. Extract the values for Hue (H), Whiteness (W), Blackness (B), and Alpha (A) from the HWB code.
    • Example: hwb(120deg 20% 30% / 0.5) gives H = 120, W = 20%, B = 30%, A = 0.5.
  2. Convert the whiteness and blackness values to a range of 0 to 1 by dividing by 100.
    • W = 20% / 100 = 0.2
    • B = 30% / 100 = 0.3
  3. Calculate the intermediary values (V) and (C).
    • V = 1 – B
    • C = V – W
    • Example: V = 1 – 0.3 = 0.7, C = 0.7 – 0.2 = 0.5
  4. Calculate the intermediary value (X) based on the hue (H) value.
    • X = C × (1 – ∣(H/60) % 2 – 1∣)
    • Example: X = 0.5 × (1 – ∣(120/60) % 2 – 1∣) = 0
  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 = 120, 𝑅 = 0, 𝐺 = 0.5, 𝐵 = 0
  6. Adjust the RGB values with the whiteness value (W).
    • R = R + W
    • G = G + W
    • B = B + W
    • Example: 𝑅 = 0 + 0.2 = 0.2, 𝐺 = 0.5 + 0.2 = 0.7, 𝐵 = 0 + 0.2 = 0.2
  7. Convert the RGB values to a range of 0 to 255 by multiplying by 255.
    • 𝑅 = 0.2 × 255 ≈ 51
    • 𝐺 = 0.7 × 255 ≈ 179
    • 𝐵 = 0.2 × 255 ≈ 51
  8. Combine the RGB values with the Alpha (A) value to form the RGBA value.
    • Example: rgba(51, 179, 51, 0.5)

List of Color Tools