Situation: You want to know how to create a transparent colour from any standard TradingView colour or hexadecimal colour value.

In this article:

Solution: generate transparent colours with the color() function

We generate transparent colours in TradingView with the color() function (TradingView Wiki, 2016). This function has the following syntax (TradingView, n.d.):

color(color, transp)

The color() function works with two arguments. The first is a standard colour or hexadecimal colour value. The second is an integer with the amount of transparency we want. That value ranges from 0 (no transparency for a solid colour) to 100 for a fully transparent, invisible colour.

Note: Currently, the second argument of the color() function has to be a literal integer (like 20, 45, or 70). This means we cannot use color() with a computed variable or an input variable. And so for now we specify the transparency by typing it directly into the code of our indicator or strategy.

Based on the kind of colour, there are two ways to use color():

Approach 1. A straightforward way to use color() is with one of the 17 different standard TradingView colours. For instance, this makes the teal standard colour 80% transparent:

color(teal, 80)

Approach 2. The color() function can also change the transparency of the millions of hexadecimal colour values. For example, this returns the coral colour (#FF7F50) with 20% transparency:

color(#FF7F50, 20)

Example: transparent colours based on the day of week

The programming example below plots a 12-bar RSI (Relative Strength Index) in red against a teal chart background. With the color() function those colours get a transparency of 40% or 85% based on the day of week. That is, on Monday and Friday we use a low transparency to make the indicator’s plot more pronounced with solid colours. On the other days, when we aren’t that interested in the RSI values, we use a much higher transparency.

//@version=3
study(title="Recipe - transparent colours", overlay=false)

monFri = (dayofweek == monday) or (dayofweek == friday)

// Determine the different plot colours
bgColour = monFri ?  color(teal, 40) :
     color(teal, 85)

plotColour = monFri ? color(red, 40) :
     color(red, 85)

// Plot the RSI and colour the background
plot(series=rsi(close, 12), color=plotColour, linewidth=2)
bgcolor(color=bgColour)

When we add this example indicator to a 30-minute Dow Jones Industrial Average chart, it looks like:

Plotting with transparent colours in TradingView

Discussion: examples and using color()

To get an idea of the transparency effect created by the color() function, let’s look at different transparencies for the red, green, and blue standard TradingView colours. After that we discuss the functions that can use transparent colours.

Exploring transparent colours generated by color()

First off, the different shades of red that the color() function generates look like:

TradingView code Example colour value
color(red, 0) (no transparency)
color(red, 10)
color(red, 20)
color(red, 30)
color(red, 40)
color(red, 50)
color(red, 60)
color(red, 70)
color(red, 80)
color(red, 90)
color(red, 100) (full transparency)

And the green standard colour with different transparencies looks like:

TradingView code Example colour value
color(green, 0) (no transparency)
color(green, 10)
color(green, 20)
color(green, 30)
color(green, 40)
color(green, 50)
color(green, 60)
color(green, 70)
color(green, 80)
color(green, 90)
color(green, 100) (full transparency)

And the shades of the blue basic colour created by color() appear as:

TradingView code Example colour value
color(blue, 0) (no transparency)
color(blue, 10)
color(blue, 20)
color(blue, 30)
color(blue, 40)
color(blue, 50)
color(blue, 60)
color(blue, 70)
color(blue, 80)
color(blue, 90)
color(blue, 100) (full transparency)

All TradingView functions that use transparent colours

To show the transparent colour generated by color(), we’ll need to use a function that applies that colour to the chart. In our indicator and strategy scripts, we can use color() with the following functions (TradingView, n.d.):

Function Description
barcolor() Sets the colour of the price bars from the chart’s instrument.
bgcolor() Sets the background of price bars or the background of the indicator’s plot background.
fill() Fills the background between two plots or two horizontal lines with a certain colour.
hline() Draws a horizontal line at a fixed price level on the chart in a certain colour.
plot() Plots a series of data on the chart in a specified colour.
plotarrow() Draws an up or down arrow on the chart.
plotbar() Plots an OHLC bar on the chart.
plotcandle() Plots a candlestick on the chart.
plotchar() Displays a specified character on the price chart.
plotshape() Displays a visual shape (like flag, cross, or arrow) on the price chart.
Note: Several of these functions have a transp argument that also sets the transparency. But if we use a colour value that’s generated by color(), then the transp argument doesn’t have an effect. In other words, the transparency set by color() overrides the one set with transp (TradingView, n.d.).

For the different colours that we can create transparent version of with color(), see the standard TradingView colours and hexadecimal colours for use in TradingView.

Learn more:

  • To make a colour transparent with the color() function, we first need to have a solid colour. For that we can use one of the 17 standard TradingView colours or one of the literally millions of hexadecimal colour values.
  • Besides color(), we can also define transparent colours with the hexadecimal format. While regular hexadecimal colours specify a colour with 6 hexadecimal digits, if we add an additional hexadecimal character pair we also set the transparency of the colour.
  • Even though we can specify an exact colour and its transparency with color(), the actual colour on the chart might be something else. This happens when we add the same indicator or strategy repeatedly to the chart, in which case TradingView shifts the colours used by the script. That way we can visually tell the different versions of that script apart. But it also means that colours don’t always appear exactly like we specified them.
  • For a practical use of transparent colours, we’ll have to apply them to the TradingView chart. Currently, we can use those colours with drawing operations (like symbols and shapes) and plotting data.

References

TradingView (n.d.). Pine Script Language Reference Manual. Retrieved on June 10, 2017, from https://www.tradingview.com/study-script-reference/

TradingView Wiki (2016, December 27). Transparency in pine scripts. Retrieved on June 10, 2017, from https://www.tradingview.com/wiki/Transparency_in_pine_scripts