Overlay Color and Opacity

ProNew

Choose a color and an opacity for an overlay, see it over a photo-like background and a checkerboard, and copy rgba() or 8-digit hex. Use this when a scrim, tint or highlight needs a transparent color.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

initial

Guide and examples

When to use it

Designing overlays on images and cards (scrims, tints, highlights) where the transparency matters as much as the color.

Do not use it when: Opaque colors do not need an opacity control.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`initial`	`string`	`#0f172acc`	Starting color, with alpha.
`onChange`	`({ hex8, rgba }) => void`	-	After every change.

Accessibility

The picker is the Color Picker Panel with its opacity slider (a native range input with a spoken value), area, hex field and keyboard support. The result is also text: the opacity percentage and the two copyable formats.
Previews are images with descriptions that include the exact CSS value; copy results are announced in a polite status.
Text on the sample overlay is real text, so legibility can be judged on the actual combination.

Testing

The pattern ships with a Testing Library test (alpha-overlay-picker.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Designing overlays on images and cards (scrims, tints, highlights) where the transparency matters as much as the color.

Do not use it when: Opaque colors do not need an opacity control.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`initial`	`string`	`#0f172acc`	Starting color, with alpha.
`onChange`	`({ hex8, rgba }) => void`	-	After every change.

Accessibility

The picker is the Color Picker Panel with its opacity slider (a native range input with a spoken value), area, hex field and keyboard support. The result is also text: the opacity percentage and the two copyable formats.
Previews are images with descriptions that include the exact CSS value; copy results are announced in a polite status.
Text on the sample overlay is real text, so legibility can be judged on the actual combination.

Testing

The pattern ships with a Testing Library test (alpha-overlay-picker.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.