How to Solve the Issue of Incorrect Color Gradient When Using linearGradient

#harmonyos #lineargradient #colortransparencyissue #gradienttransparency

Read the original article：How to Solve the Issue of Incorrect Color Gradient When Using linearGradient

Problem Description

When using linearGradient to set a color gradient effect, the expected result is to set the color 0x00990000 to achieve full transparency. However, in practice, the color appears opaque. Using 0x01990000 can approximately achieve full transparency. As shown in the image:

@Entry
@Component
struct Index {
  build() {
    Column({ space: 5 }) {
      Row()
        .width('75%')
        .height(90)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0x00990000, 0.0], [0x80000000, 1.0]]
        })
      Row()
        .width('75%')
        .height(90)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0x01990000, 0.0], [0x80000000, 1.0]]
        })
    }
    .width('100%')
    .width('100%')
    .padding(25)
    .backgroundColor("#fff")
  }
}

Background Knowledge

For the linearGradient color gradient property, refer to Color Gradient.
A hexadecimal color value (e.g., 0x80FFFF00) consists of the first two digits representing transparency (alpha), followed by two digits each for red, green, and blue.

Transparency has 256 levels, from 0–255, where 0 is fully transparent and 255 is fully opaque, corresponding to hexadecimal values from 00 (transparent) → FF (opaque).

Troubleshooting Process

To reproduce the issue (here red is used to make the difference clearer), since the issue involves fully transparent and fully opaque colors, both 0x and # formats are tested for these cases.

When transparency is set to fully transparent, the colors 0x00990000 and #00990000 show different results:

0x00990000 appears opaque, while #00990000 is fully transparent.

@Entry
@Component
struct Index {
  build() {
    Column({ space: 5 }) {
      Row()
        .width('90%')
        .height(42)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0x00990000, 0.0], [0x80000000, 1.0]]
        })
      Row()
        .width('90%')
        .height(42)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff990000, 0.0], [0x80000000, 1.0]]
        })
      Row()
        .width('90%')
        .height(42)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [['# 00990000', 0.0], [0x80000000, 1.0]]
        })
      Row()
        .width('90%')
        .height(42)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [['# ff990000', 0.0], [0x80000000, 1.0]]
        })
    }
    .width('100%')
    .width('100%')
    .padding(25)
    .backgroundColor("#fff")
  }
}

Analysis Conclusion

Further analysis of the two formats shows that 0x00990000 appears fully opaque because of the HarmonyOS specification:

In OHOS, the 0x format supports both 8-digit and 6-digit formats.

Therefore, when transparency is set to 0, 0x00 is actually treated as if no transparency was set, and it is processed as a 6-digit value — equivalent to 0x990000.

Solution

When transparency is fully transparent, the 0x00990000 format is not supported.

Change the prefix 0x to the string # — i.e., write it as #00990000 to take effect correctly.

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

DEV Community