How to solve the error problem of setting the color gradient effect using linearGradient?

#harmonyos #lineargradient #arkts #colorformat

Read the original article：How to solve the error problem of setting the color gradient effect using linearGradient?

Problem Description

When using linearGradient to set a color gradient, the expected behavior is that setting the color 0x00990000 would result in full transparency. However, in practice, the color appears opaque. Using 0x01990000 can approximate full transparency. As shown in the figure:

Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [[0x00990000, 0.0], [0x80000000, 1.0]]
  })
Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [[0x01990000, 0.0], [0x80000000, 1.0]]
  })

Background Knowledge

The linearGradient color gradient property can be referenced for color transitions.

Hexadecimal color values (e.g., 0x80FFFF00) use the first two digits to represent alpha (transparency), and the following pairs represent red, green, and blue channels. Alpha has 256 levels (0–255), where 0 is fully transparent and 255 is fully opaque. In hexadecimal, this corresponds to 00 (transparent) → FF (opaque).

Troubleshooting Process

To reproduce the issue, a red gradient was used to clearly see the difference. Since the problem involves fully transparent and fully opaque colors, both 0x and # notations were tested for these cases.

It was observed that when alpha is fully transparent:

0x00990000 displays as opaque
#00990000 displays as fully transparent

Analyzing the difference between these two notations shows that 0x00990000 appears fully opaque because of HarmonyOS’s specification:

In OHOS, the 0x format supports both 8-digit and 6-digit values.
When alpha is set to 0, 0x00 is treated as no alpha specified, so it is interpreted as a 6-digit color (0x990000) rather than fully transparent.

Example reproduction:

Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [[0x00990000, 0.0], [0x80000000, 1.0]]
  })
  .margin({ top: 50 })
Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [[0xff990000, 0.0], [0x80000000, 1.0]]
  })
Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [['# 00990000', 0.0], [0x80000000, 1.0]]
  })
Row()
  .width('90%')
  .height(50)
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [['# ff990000', 0.0], [0x80000000, 1.0]]
  })

Analysis Conclusion

The issue arises because OHOS interprets the 0x format as supporting both 6-digit and 8-digit colors. When alpha is 0, 0x00 is treated as no alpha, so the color appears opaque. Using the # notation ensures the alpha channel is correctly applied.

Solution

When alpha is fully transparent, the 0x00990000 notation is not supported. To achieve the expected effect, replace the 0x prefix with #, writing it as #00990000.

When alpha is not fully transparent (e.g., 0x03), both notations (0x03990000 and #03990000) work as expected.

Verification Result

Using 0x00990000 → displayed as opaque
Using #00990000 → displayed as fully transparent
Using 0x03990000 or #03990000 → both display as partially transparent correctly.