A script that makes a plot or drawing often sets these to a certain colour. What kind of standard colours are there in TradingView?

In this article:

Using colours in TradingView: the color variables

Besides configuring TradingView colours by hand, we can also hard-code them in TradingView scripts in one of two ways. One approach are hexadecimal colour values, which consist our of a number sign (#) followed by 6 hexadecimal digits that correspond to a RGB value (Pine Script Language Tutorial, n.d.). For instance, lime green can also be expressed as the #00FF00 hexadecimal value.

While they allow for a large amount of different colours, hexadecimal values are hard to remember and we often need to look them up in a list of hexadecimal colour values. Luckily, there are also built-in TradingView variables that correspond to a colour (TradingView, n.d.). Examples of such color variables are red, maroon, and fuchsia. Let’s look at all built-in colours before discussing a programming example that uses them.

The standard, built-in TradingView colours

The 17 color variables and their hexadecimal equivalent are (Pine Script Language Tutorial, n.d.; TradingView, n.d.):

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
Note: The na built-in variable is technically not a colour but does act as a default colour, in effect making a plot or drawing transparent (Pine Script Language Tutorial, n.d.). This feature of na is helpful when using TradingView colours conditionally.
Tip: Colours in TradingView are shifted when the script is added repeatedly to the chart, meaning that a color variable doesn’t always plot a colour that’s equal to its hexadecimal value. For more on this, see shifted colours in TradingView.

Plotting and drawing with TradingView standard colours

The basic TradingView colours (as well as the na value) are used with the color argument of the functions listed below (TradingView, n.d.). For instance, a blue line is made with plot(series=close, color=blue).

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.

Example: plotting a line with TradingView’s standard colours

An example that uses the standard colour variables is:

study(title="High and low - coloured", overlay=true)

// Inputs
avgLength = input(title="Average", type=integer, defval=10)

highLowLength = input(title="High/low extreme", 
     type=integer, defval=20)

// Calculate values
avgHigh = sma(high, avgLength)
avgLow  = sma(low, avgLength)

highestHigh = highest(avgHigh, highLowLength)
lowestLow   = lowest(avgLow, highLowLength)

// Plot values
plot(series=highestHigh, color=green)
plot(series=lowestLow, color=red)

We first set the indicator’s properties with study(). We then make two numerical input variables: avgLength and highLowLength.

avgLength = input(title="Average", type=integer, defval=10)

highLowLength = input(title="High/low extreme", 
     type=integer, defval=20)

The first input, which has a default value (defval) of 10, is used to set the number of bars that we calculate the average of the high and low prices on. The second input, named “High/low extreme”, specifies the number of bars used to determine the highest average high and lowest average low.

Next we calculate the script’s values:

avgHigh = sma(high, avgLength)
avgLow  = sma(low, avgLength)

highestHigh = highest(avgHigh, highLowLength)
lowestLow   = lowest(avgLow, highLowLength)

Both the avgHigh and avgLow variables are assigned a value returned by sma(). That function calculates a simple moving average (SMA), and needs a series of values plus an integer that sets the SMA length (TradingView, n.d.). Here, sma() calculates on the high and low prices and the avgLength input variable specifies the number of bars to calculate on.

Then we calculate the extreme values of the SMAs. The highest value is retrieved with highest() while lowest() gives us the lowest value. Both functions require a series of values to process (here the avgHigh and avgLow variables) and the length to calculate the extreme value on (TradingView, n.d.). We set that latter to the highLowLength input variable. Those highest and lowest values are stored in the highestHigh and lowestLow variables.

So what we’ve calculated are the 10-bar average of the high and low prices, followed by getting the 20-bar highest average high and 20-bar lowest average low. This way we’ve filtered out price spikes in the high and low values.

With the calculations done we use plot() to display them on the chart:

plot(series=highestHigh, color=green)
plot(series=lowestLow, color=red)

The first plot() statement shows the highestHigh values in green, while the red colour variable is used to colour the lowestLow values.

Plotting lines with TradingView’s basic colours

Our example script, with its default input settings, looks like this when added to a chart:

Example of highest high and lowest low plot in TradingView

And with other input settings the indicator displays as follows:

Example of changing the input options of a TradingView script

The input options look like:

Example of the script's input options

See hexadecimal colour values in TradingView to learn more about colour options in TradingView. Articles that discuss using colours programmatically are colouring price bars and colouring the chart’s background.

Summary

Colours in TradingView can be set manually or entered in the script’s source code. The 17 basic color variables allow us to easily define a colour by simply typing in its name (like red for red and lime for lime green). These colours are used with plots and drawings. A script that’s added repeatedly to the chart has its colours shifted.


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 November 12, 2015, from https://www.tradingview.com/study-script-reference/