How to create a transparent colour in TradingView?

How to create a transparent colour in TradingView?

TL;DR
Use color.new(baseColor, transparency) to recycle the same hue at different opacities (0 = solid, 100 = invisible) across backgrounds, plots, and fills.

At a Glance

Difficulty	Beginner
Time to implement	5-10 min
Category	Visual Effects

Quick Actions

• Open in AI Editor
• Browse PineScript Examples
• Connect to Live Trading

Quick Start

//@version=5
indicator("Transparent palette demo", overlay=true)

strongTrend = close > ta.ema(close, 21)

bgTransparent = color.new(color.green, strongTrend ? 75 : 92)
bgcolor(bgTransparent)

Tip. Work backwards from opacity: 0 is fully solid, 100 hides the colour. Most overlays stay legible between 70 and 90.

Why It Matters

Transparent colours let you add emphasis without burying price bars. By deriving all shades from a shared palette you keep the chart cohesive, highlight regimes, and avoid the visual clash that comes from hard-coded rgba values or mismatched hex codes.

What You’ll Learn

• Build a reusable helper that produces translucent variants of any colour.
• Apply the helper to backgrounds, fills, and bar colours without duplication.
• Adjust transparency based on context (session, momentum, volatility).
• Keep overlays readable and on-brand across different chart themes.

Quick Reference

Call	Purpose
color.new(color, transparency)	Returns the same hue with a new opacity (0 solid → 100 invisible).
color.rgb(r, g, b)	Creates a base colour when you need a custom palette.
bgcolor(color, title)	Paints the chart background per bar.
plot(series, color)	Draws series lines that can reuse transparent colours.
fill(plot1, plot2, color)	Shades the space between two plots using translucent colours.

Implementation Blueprint

1. Define a base palette
   Keep your brand colours in one place—use constants or inputs so you can tweak them from the UI.

   baseBull = input.color(color.green, "Bull colour")
   baseBear = input.color(color.red, "Bear colour")
   accent   = color.rgb(66, 133, 244)  // Google blue

2. Create a helper to manage transparency
   Wrap color.new() so you only pass named colours and desired opacity.

   transparency = input.int(80, "Background transparency", minval=0, maxval=100)
   
   transp(color c, int strength) =>
       color.new(c, math.clamp(strength, 0, 100))
   
   bgBull = transp(baseBull, transparency)
   bgBear = transp(baseBear, transparency)
   accentLine = transp(accent, 20)

3. Apply the palette consistently
   Reuse the helper in bgcolor(), plot(), and fill() so every overlay shares the same opacity rules.

   isBull = close > ta.ema(close, 34)
   
   bgcolor(isBull ? bgBull : bgBear)
   plot(ta.ema(close, 34), "EMA 34", color=accentLine, linewidth=2)

Example Playbook

//@version=5
indicator("Session-aware transparency", overlay=true, max_labels_count=500)

baseBull = input.color(color.teal, "Bullish base colour")
baseBear = input.color(color.orange, "Bearish base colour")
labelTransparency = input.int(35, "Label opacity", minval=0, maxval=100)

// Helper to keep opacity consistent throughout the script
withOpacity(color c, int opacity) =>
    color.new(c, math.clamp(opacity, 0, 100))

emaFast = ta.ema(close, 21)
emaSlow = ta.ema(close, 55)
trendUp = emaFast > emaSlow

sessionIsUS = session.ismarket("0930-1600", "America/New_York")

bgStrength = sessionIsUS ? 70 : 88
bgChoice   = trendUp ? withOpacity(baseBull, bgStrength) : withOpacity(baseBear, bgStrength)
bgcolor(bgChoice, title="Trend background")

fillColor = trendUp ? withOpacity(baseBull, 85) : withOpacity(baseBear, 85)
plotFast  = plot(emaFast, "EMA 21", color=withOpacity(baseBull, 20), linewidth=2)
plotSlow  = plot(emaSlow, "EMA 55", color=withOpacity(baseBear, 30), linewidth=2)
fill(plotFast, plotSlow, color=fillColor)

if ta.crossover(emaFast, emaSlow)
    label.new(bar_index, high, "Trend up", style=label.style_label_up, textcolor=color.white, bgcolor=withOpacity(baseBull, labelTransparency))
if ta.crossunder(emaFast, emaSlow)
    label.new(bar_index, low, "Trend down", style=label.style_label_down, textcolor=color.white, bgcolor=withOpacity(baseBear, labelTransparency))

Why this works.

• Every overlay derives from the same base colours so the chart feels cohesive.
• Session-aware opacity keeps US cash hours bold while dimming overnight data.
• Labels borrow the helper too, meaning copy/paste widgets stay on-brand.

Pro Tips & Pitfalls

• Build a single helper for transparency. Updating one function is easier than hunting hard-coded color.new calls.
• Clamp transparency values between 0 and 100—negative or oversized numbers throw runtime errors.
• Keep text readable by pairing bright label text (color.white) with higher opacity label backgrounds.
• If multiple scripts use bgcolor(), the last script to call it wins. Apply transparency so overlapping regions still make sense.

Troubleshooting & FAQ

My background hides the candles

Reduce opacity (raise the transparency value). Target 70–90 for backgrounds, 40–60 for fills, and 10–30 when you only need a hint of colour.

color.new() throws a runtime error

Check the second argument. It must be an integer literal or series between 0 and 100. Use math.clamp() when values come from calculations or inputs.

I want a custom alpha per session

Store transparency in a variable and reuse it everywhere: alpha = sessionIsUS ? 65 : 90; color.new(base, alpha). That way you update one number when the design changes.

Key Takeaways

• color.new() is the fastest way to reuse a base hue at different opacity levels.
• Centralise transparency rules so labels, fills, and backgrounds stay consistent.
• Choose opacity ranges that keep price legible and respect stacked overlays.
• Clamp transparency to avoid runtime errors from calculations or user input.

---

Keep Going

• Open AI Editor to apply the pattern with guided assistance
• Browse Strategy Examples for ready-to-run templates
• Connect to Live Trading when you are ready to automate

Adapted from tradingcode.net, optimised for Algo Trade Analytics users.