Pine Script Colors: color.new, Transparency & Hex

Pick any color and get ready-to-paste Pine Script code for color.new(), color.rgb() and hex, with transparency converted for you. Plus every built-in color’s hex code and a gradient builder.

Pine Script transparency explained

Pine Script measures transparency from 0 to 100, which is the opposite of opacity: 0 is fully solid and 100 is invisible. So color.new(color.blue, 80) is a faint blue, good for background fills, and color.new(color.blue, 0) is solid.

Hex colors work the other way round. In #RRGGBBAA the last two digits are alpha (opacity), where FF is solid and 00 is invisible. This table converts between them:

Pine transparency	Opacity	Hex alpha (AA)
0	100%	FF
10	90%	E6
20	80%	CC
30	70%	B2
40	60%	99
50	50%	80
60	40%	66
70	30%	4C
80	20%	33
90	10%	1A
100	0%	00

Pine Script built-in colors and their hex codes

Pine’s named colors aren’t the pure web colors you might expect. color.black, for example, is a dark grey-blue (#363A45), not #000000, and color.red is #F23645. If you need an exact shade, use a hex code instead.

Constant Hex RGB

color.aqua #00BCD4 0, 188, 212

color.black #363A45 54, 58, 69

color.blue #2196F3 33, 150, 243

color.fuchsia #E040FB 224, 64, 251

color.gray #787B86 120, 123, 134

color.green #4CAF50 76, 175, 80

color.lime #00E676 0, 230, 118

color.maroon #880E4F 136, 14, 79

color.navy #311B92 49, 27, 146

color.olive #808000 128, 128, 0

color.orange #FF9800 255, 152, 0

color.purple #9C27B0 156, 39, 176

color.red #F23645 242, 54, 69

color.silver #B2B5BE 178, 181, 190

color.teal #089981 8, 153, 129

color.white #FFFFFF 255, 255, 255

color.yellow #FDD835 253, 216, 53

Constant	Hex	RGB
`color.aqua`	#00BCD4	0, 188, 212
`color.black`	#363A45	54, 58, 69
`color.blue`	#2196F3	33, 150, 243
`color.fuchsia`	#E040FB	224, 64, 251
`color.gray`	#787B86	120, 123, 134
`color.green`	#4CAF50	76, 175, 80
`color.lime`	#00E676	0, 230, 118
`color.maroon`	#880E4F	136, 14, 79
`color.navy`	#311B92	49, 27, 146
`color.olive`	#808000	128, 128, 0
`color.orange`	#FF9800	255, 152, 0
`color.purple`	#9C27B0	156, 39, 176
`color.red`	#F23645	242, 54, 69
`color.silver`	#B2B5BE	178, 181, 190
`color.teal`	#089981	8, 153, 129
`color.white`	#FFFFFF	255, 255, 255
`color.yellow`	#FDD835	253, 216, 53

Source: TradingView Pine Script v6 documentation, October 2026.

Pine Script color functions

color.new(color, transp)

Takes an existing color and returns it with the transparency you give it. The most common way to make a built-in color lighter.

plot(ta.sma(close, 30), "SMA", color.new(color.olive, 40), 3)

color.rgb(red, green, blue, transp)

Builds a color from red, green and blue values from 0 to 255, plus an optional transparency.

plot(ta.sma(close, 50), "SMA", color.rgb(128, 128, 0, 40), 3)

Hex literals

Write #RRGGBB for a solid color or #RRGGBBAA to include alpha. #80800099 is olive at 40% transparency.

color.from_gradient(value, bottom_value, top_value, bottom_color, top_color)

Returns a color between two colors depending on where value sits between the bottom and top values. Useful for coloring an oscillator by its level.

float cci = ta.cci(close, 20)
plot(cci, "CCI", color.from_gradient(cci, -200, 200, color.maroon, color.yellow), 2)

All examples are from TradingView’s Pine Script documentation and use //@version=6.

Tips for choosing Pine Script colors

Check both themes. Many people use TradingView in dark mode. A color that looks fine on white can disappear on a dark background; the preview above shows both.
Use transparency for fills. Backgrounds and fills between lines usually read best at 80–90 transparency so candles stay visible.
Don’t rely on red and green alone. Brightness or line style also helps colour-blind users tell signals apart.
Styling the chart itself? The ChartWatch chart color generator builds a full TradingView theme for candles, background and grid.

ChartWatch is independent and not affiliated with TradingView. Pine Script is a trademark of TradingView, Inc. This tool runs entirely in your browser.

FAQ

How does transparency work in Pine Script?

Transparency runs from 0 to 100. 0 is fully opaque and 100 is invisible, so it is the opposite of opacity. color.new(color.red, 70) is a light, see-through red.

How do I use a hex color in Pine Script?

Write it as a literal, for example #2196F3 for a solid color or #2196F399 with two extra alpha digits for transparency. You can also pass a hex color to color.new(), for example color.new(#2196F3, 40).

What is the hex code of color.red in Pine Script?

color.red is #F23645. color.green is #4CAF50, color.blue is #2196F3, and color.black is #363A45 rather than pure black.

What is the difference between color.new and color.rgb?

color.new() takes an existing color and sets its transparency. color.rgb() builds a new color from red, green and blue values from 0 to 255, plus an optional transparency.

How do I make a gradient color in Pine Script?

Use color.from_gradient(value, bottom_value, top_value, bottom_color, top_color). It returns a color between the two colors based on where the value sits in the range.

How do I convert Pine transparency to a hex alpha value?

Alpha = (100 - transparency) × 255 ÷ 100, written as two hex digits. Transparency 40 is alpha 99 (60% opacity) and transparency 0 is FF.

More free TradingView tools

ChartWatch is an independent tool and is not affiliated with, endorsed by, or officially connected to TradingView, Inc. “TradingView” is a trademark of its respective owner. Exchange, broker and platform names are trademarks of their respective owners.

Pine Script Colors: Picker, Transparency & Hex Codes