[GH-ISSUE #196] Hex colors with alpha channel (#RRGGBBAA) don't render transparency in React #40

New issue

Closed

opened 2026-03-02 23:44:04 +03:00 by kerem · 1 comment

kerem commented

2026-03-02 23:44:04 +03:00

Owner

Originally created by @remorses on GitHub (Oct 2, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/196

When using hex color codes with alpha values (e.g., #ff000080 for 50% transparent red), the transparency is ignored and the color renders as fully opaque. This forces developers to use RGBA.fromInts() instead of the more common hex format with alpha.

Reproduction

import { RGBA } from "@opentui/core";
import { render } from "@opentui/react";
import * as React from "react";

function TransparencyDemo() {
  // Using RGBA.fromInts - this works
  const workingColor = RGBA.fromInts(255, 0, 0, 128); // Red with 50% opacity

  return (
    <box style={{ flexDirection: "column", padding: 2 }}>
      <text>Transparency Bug Repro</text>
      
      <box style={{ flexDirection: "row", marginTop: 2, gap: 2 }}>
        <box style={{ flexDirection: "column" }}>
          <text>✅ Works (RGBA.fromInts)</text>
          <box style={{ padding: 3, backgroundColor: workingColor, marginTop: 1 }}>
            <text>Semi-transparent red</text>
          </box>
        </box>
        
        <box style={{ flexDirection: "column" }}>
          <text>❌ Doesn't work (hex with alpha)</text>
          <box style={{ padding: 3, backgroundColor: "#ff000080", marginTop: 1 }}>
            <text>Should be semi-transparent</text>
          </box>
        </box>
      </box>
    </box>
  );
}

await render(<TransparencyDemo />);

Expected behavior

The hex color #ff000080 should render as semi-transparent red (50% opacity), matching the behavior of RGBA.fromInts(255, 0, 0, 128).

Actual behavior

The hex color with alpha channel renders as fully opaque, ignoring the alpha value.

Workaround

Use RGBA.fromInts() instead of hex colors when transparency is needed.

Originally created by @remorses on GitHub (Oct 2, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/196 When using hex color codes with alpha values (e.g., `#ff000080` for 50% transparent red), the transparency is ignored and the color renders as fully opaque. This forces developers to use `RGBA.fromInts()` instead of the more common hex format with alpha. ## Reproduction ```tsx import { RGBA } from "@opentui/core"; import { render } from "@opentui/react"; import * as React from "react"; function TransparencyDemo() { // Using RGBA.fromInts - this works const workingColor = RGBA.fromInts(255, 0, 0, 128); // Red with 50% opacity return ( <box style={{ flexDirection: "column", padding: 2 }}> <text>Transparency Bug Repro</text> <box style={{ flexDirection: "row", marginTop: 2, gap: 2 }}> <box style={{ flexDirection: "column" }}> <text>✅ Works (RGBA.fromInts)</text> <box style={{ padding: 3, backgroundColor: workingColor, marginTop: 1 }}> <text>Semi-transparent red</text> </box> </box> <box style={{ flexDirection: "column" }}> <text>❌ Doesn't work (hex with alpha)</text> <box style={{ padding: 3, backgroundColor: "#ff000080", marginTop: 1 }}> <text>Should be semi-transparent</text> </box> </box> </box> </box> ); } await render(<TransparencyDemo />); ``` ## Expected behavior The hex color `#ff000080` should render as semi-transparent red (50% opacity), matching the behavior of `RGBA.fromInts(255, 0, 0, 128)`. ## Actual behavior The hex color with alpha channel renders as fully opaque, ignoring the alpha value. ## Workaround Use `RGBA.fromInts()` instead of hex colors when transparency is needed.