Opacity control in Figma - Cell-by-Cell Formula Trace

Sample Data

This data shows different shapes with their base colors and opacity percentages. The resulting color is the base color combined with the opacity as an RGBA value.

Cell	Value
A1	Object
B1	Base Color
C1	Opacity (%)
D1	Resulting Color
A2	Circle
B2	#FF0000
C2	50
D2	rgba(255,0,0,0.5)
A3	Square
B3	#0000FF
C3	75
D3	rgba(0,0,255,0.75)
A4	Triangle
B4	#00FF00
C4	30
D4	rgba(0,255,0,0.3)

Formula Trace

Resulting Color = rgba(R, G, B, Opacity/100)

Step 1: Convert Hex color #FF0000 to RGB (255, 0, 0)

Step 2: Divide Opacity 50 by 100

Step 3: Combine RGB and opacity to form rgba(255, 0, 0, 0.5)

Cell Reference Map

    A       B         C         D
1 |Object |Base Color|Opacity %|Resulting Color
2 |Circle |#FF0000  |50       |rgba(255,0,0,0.5)
3 |Square |#0000FF  |75       |rgba(0,0,255,0.75)
4 |Triangle|#00FF00 |30       |rgba(0,255,0,0.3)

The formula uses the Base Color in column B and Opacity in column C to calculate the Resulting Color in column D.

Result

    A       B         C         D
1 |Object |Base Color|Opacity %|Resulting Color
2 |Circle |#FF0000  |50       |rgba(255,0,0,0.5)
3 |Square |#0000FF  |75       |rgba(0,0,255,0.75)
4 |Triangle|#00FF00 |30       |rgba(0,255,0,0.3)

The resulting color column shows the base color combined with the opacity as an RGBA color string, which controls transparency in design.

Sheet Trace Quiz - 3 Questions

What does the opacity value 50 represent in the formula?

A 50% transparency or 0.5 alpha

B 50% brightness

C 50% saturation

D 50% hue

Key Result

Opacity control converts percentage opacity to decimal alpha and combines with RGB color to form RGBA color.