In this article we’ll reiterate the most important aspects of working with colours in TradingView. Follow the links to the full articles for more information and examples.

In this article:

Changing a script’s colours by hand: using title and editable

We started this chapter on TradingView colours with an introduction to colouring in TradingView after which we looked at changing a script’s colours by hand. This latter is done in the ‘Style’ window of an indicator or strategy:

Example of the MACD style settings in TradingView

The names that are displayed in this window are set programmatically with the title argument (TradingView, n.d.). This argument is available with any function that performs plotting or drawing – barcolor(), bgcolor(), fill(), hline(), plot(), plotarrow(), plotbar(), plotcandle(), plotchar(), and plotshape() all have such a title argument (TradingView, n.d.).

Setting the title argument to a descriptive name makes it easier to distinguish between the different plots and drawings. For example, in this indicator each plot() statement has its title argument set to a custom name:

study(title="Example of multiple moving averages", 
     shorttitle="MAs example", overlay=true)

ma1 = ema(close, 10)
ma2 = sma(high, 20)
ma3 = ema(close, 30)
ma4 = sma(close, 40)
ma5 = ema(low, 50)
ma6 = sma(high, 60)
ma7 = ema(close, 70)
ma8 = sma(low, 80)
ma9 = sma(close, 90)

plot(series=ma1, color=red, title="EMA 1")
plot(series=ma2, color=fuchsia, title="SMA 1")
plot(series=ma3, color=blue, title="EMA 2")
plot(series=ma4, color=orange, title="SMA 2")
plot(series=ma5, color=black, title="EMA 3")
plot(series=ma6, color=teal, title="SMA 3")
plot(series=ma7, color=maroon, title="EMA 4")
plot(series=ma8, color=navy, title="SMA 4")
plot(series=ma9, color=lime, title="SMA 5")

Now the ‘Style’ window of this script lists each plot with an unique name:

Changing the colours of a TradingView script manually

Another way in which code affects how we change a script’s colours manually is the editable argument. This argument can be used with each function that performs plotting or drawing. Whenever editable is set to false the visual settings of that plot or drawing cannot be changed in the script’s ‘Style’ window.

So setting editable to false for each plot() statement in the previous example changes the ‘Style’ window to:

Style settings of a TradingView Pine script

Working with colours programmatically in TradingView: basic and hexadecimal colours

The remainder of chapter on TradingView colours looked at working with colours programmatically. For that we first discussed the two kinds of colours in TradingView: basic TradingView colour variables and hexadecimal colour values.

The first are a collection of 17 common colour names and are used by simply typing in the name of the colour, like red and yellow (Pine Script Language Tutorial, n.d.). These built-in colours are:

color variable Hexadecimal value Example
aqua #00FFFF
black #000000
blue #0000FF
fuchsia #FF00FF
gray #808080
green #008000
lime #00FF00
maroon #800000
navy #000080
olive #808000
orange #FF7F00
purple #800080
red #FF0000
silver #C0C0C0
teal #008080
white #FFFFFF
yellow #FFFF00

Another kind of colours are the hexadecimal colour values. These consist out of the number sign (#) followed by 6 hexadecimal digits (Pine Script Language Tutorial, n.d.). For instance, the red colour has a hexadecimal equivalent of #FF0000 while blue is expressed as #0000FF. Given that these hexadecimal colour values are case-insensitive (Pine Script Language Tutorial, n.d.), both #ADFF2F and #adff2f refer to green yellow.

The benefit of hexadecimal colour values is that they make a huge amount of colours possible. We looked at several of them in hexadecimal colour values for TradingView.

Both kind of colours – basic colours and hexadecimal colours – can be used with these functions (TradingView, n.d.):

Function Description
barcolor() Sets the colour of price bars of the chart’s instrument.
bgcolor() Fills the chart’s background with a colour.
fill() Colours a background section that’s between two plots or two horizontal lines.
hline() Draws a horizontal, coloured line at the specified price level.
plot() Plots a series of data with a certain colour.
plotarrow() Plots coloured up and down arrows.
plotbar() Plots OHLC bars in a particular colour.
plotcandle() Plots coloured price candles.
plotchar() Displays a coloured Unicode character.
plotshape() Plots arrows, circles, and other visual shapes with a specified colour.

Shifting TradingView colours: the same colour applied differently

While we can specify an exact colour with the basic TradingView colours and hexadecimal colour values, that colour is not always what’s displayed on the chart. This happens because TradingView ‘shifts’ colour values whenever the same script is added more than once to the chart.

For example, when we add this basic indicator to the chart:

study(title="Colouring repeatedly", overlay=true)

emaLength = input(title="EMA Length", type=integer, defval=20)

plot(series=ema(close, emaLength), color=green, linewidth=3)

Then the different EMA lines aren’t coloured green (like we specified in the code), but instead look like this:

Example of repeating the same TradingView colour repeatedly

These shifted colours do make it easier to distinguish between the different instances of a script, but it does mean that the colour we specify in the code isn’t always the colour that’s displayed on the chart. We can prevent TradingView from shifting colours by eliminating the need for multiple scripts whenever possible.

Applying colours in TradingView Pine conditionally

When using colours in TradingView Pine, we can also ‘turn off’ a colour programmatically. We do that with na. That built-in variable represents a “not a number” value (TradingView, n.d.) which, when used as a value for the color argument, applies the same colour as the chart already has (Pine Script Language Tutorial, n.d.). That gives a transparent effect, which makes it look like the plot or drawing is ‘turned off’.

This application of na is closely related to applying colours conditionally. There are, after all, limited uses for applying a transparent colour on every price bar.

Note: Most, but not all, TradingView functions that work with colours also accept a colour that’s set conditionally (including na for transparency). The functions that can conditionally use colours are barcolor(), bgcolor(), plot(), plotarrow(), plotbar(), plotcandle(), plotchar(), and plotshape(). The functions that do not accept conditional colours are fill() and hline() (TradingView, n.d.).

Conditional colours can be applied in three ways:

A quick example that uses the conditional ternary operator (?:) to set a colour conditionally is:

study(title="Conditional colours with ?:", overlay=true)

plot(series=close,
     color=close > sma(close, 5) ? green : red)

The second way to implement conditional colours is with the iff() function, like in the following code example where the bar’s colour is set to black or to transparency with na:

study(title="iff() example", overlay=true)

barcolor(color=iff(close > close[1] and close[1] > close[2], 
     black, na))

Another approach is conditional colouring with an if/else statement, like in this brief example:

//@version=2
study(title="conditional colours with if/else - example", overlay=true)

maColour = if (volume > volume[1])
    blue
else
    yellow

plot(series=sma(close, 20), color=maColour)

Gradient and random-like colours in TradingView

One application of conditional colours are gradient-like TradingView colours. We can implement these by first ordering hexadecimal colour values from light to dark, and then returning one of those colours based on a comparison with a computed or predefined value. For instance:

GreenShade(value) =>
    value >= 75 ? #00b300 : // dark green
     value > 50 ? #00cc00 :
     value > 30 ? #00e600 :
     value > 20 ? #00ff00 : // green
     value > 15 ? #1aff1a :
     value > 10 ? #3ff33 :
        #4dff4d             // light green

Pseudo-random colours in TradingView are another extension of conditional colours. For these random-like colours we first need to generate a random value, which is possible by implementing a version of the Linear Congruential Generator:

study(title="Random numbers example", overlay=false)

x = 16708 * nz(x[1], 1) % 2147483647

plot(series=x % 17, style=histogram, linewidth=3)

The values generated by this example look like:

Random values plotted in a TradingView histogram

We can use those pseudo-random numbers in a custom function that returns one of the basic TradingView colours:

x = 16708 * nz(x[1], 1) % 2147483647

RandomColour() =>
    y = x % 17
    y == 0 ? aqua :
     y == 1 ? black :
     y == 2 ? blue :
     y == 3 ? fuchsia :
     y == 4 ? gray :
     y == 5 ? green :
     y == 6 ? lime :
     y == 7 ? maroon :
     y == 8 ? navy :
     y == 9 ? olive :
     y == 10 ? orange :
     y == 11 ? purple :
     y == 12 ? red :
     y == 13 ? silver :
     y == 14 ? teal :
     y == 15 ? white :
        yellow

This way the RandomColour() function returns one of 17 colours, based on the pseudo-random number that we assigned to the x variable.

This concludes the chapter on colouring in TradingView Pine. See all TradingView programming tutorials to learn more about other topics.


References

Pine Script Language Tutorial (n.d.). Retrieved on October 23, 2015, from https://docs.google.com/document/d/1sCfC873xJEMV7MGzt1L70JTStTE9kcG2q-LDuWWkBeY/

TradingView (n.d.). Script Language Reference Manual. Retrieved on February 16, 2016, from https://www.tradingview.com/study-script-reference/