Functions for manipulating and transforming colors create dynamic, responsive visual effects in your indicators. Use them to improve chart readability, create visual hierarchy, layer subtle overlays, and make technical analysis tools feel more polished.
Overview
| Category | Description | Features |
|---|---|---|
| Brightness Control | Adjust color brightness and luminosity with darken() and lighten() for visual hierarchy and emphasis. | Brightness adjustment, darken/lighten effects, luminosity control |
| Transparency Effects | Control opacity and transparency levels for subtle backgrounds, overlays, and layered visualizations that do not overwhelm the chart. | Opacity control, transparency levels, layer effects |
| Function | Description |
|---|---|
brightness | Adjust color brightness levels |
darken | Reduce color brightness/lightness |
lighten | Increase color brightness/lightness |
transparency | Set color transparency level |
opacity | Set color opacity level, inverse of transparency |
blend | Mix two colors together |
colorGradient | Map a numeric value to a color along a gradient |
brightness
brightness(color: color, amount: number): color — adjust color brightness levels.
| Parameter | Type | Description |
|---|---|---|
color | color | Source color to modify |
amount | number | Brightness adjustment (0-100, where 50 is no change) |
Returns: color (color with adjusted brightness).
// Brighten red by 30%
var brightRed = brightness((color = '#ff0000'), (amount = 30));darken
darken(color: color, amount: number): color — reduce color brightness/lightness.
| Parameter | Type | Description |
|---|---|---|
color | color | Source color to darken |
amount | number | Darkening amount (0-100, where 0 is no change, 100 is black) |
Returns: color (darkened color).
// Darken blue by 20%
var darkBlue = darken((color = '#0000ff'), (amount = 20));lighten
lighten(color: color, amount: number): color — increase color brightness/lightness.
| Parameter | Type | Description |
|---|---|---|
color | color | Source color to lighten |
amount | number | Lightening amount (0-100, where 0 is no change, 100 is white) |
Returns: color (lightened color).
// Lighten green by 25%
var lightGreen = lighten((color = '#00ff00'), (amount = 25));transparency
transparency(color: color, amount: number): color — set color transparency level.
| Parameter | Type | Description |
|---|---|---|
color | color | Source color to modify |
amount | number | Transparency level (0-100, where 0 is opaque, 100 is transparent) |
Returns: color (color with specified transparency).
// 50% transparent blue
var semiTransparent = transparency((color = '#ff0000'), (amount = 50));opacity
opacity(color: color, amount: number): color — set color opacity level, inverse of transparency.
| Parameter | Type | Description |
|---|---|---|
color | color | Source color to modify |
amount | number | Opacity level (0-100, where 0 is fully transparent, 100 is fully opaque) |
Returns: color (color with specified opacity).
// 50% opaque green
var halfOpaque = opacity((color = '#00ff00'), (amount = 50));blend
blend(color1: color, color2: color, amount: number): color — mix two colors together.
| Parameter | Type | Description |
|---|---|---|
color1 | color | First color to blend |
color2 | color | Second color to blend |
amount | number | Blending ratio (0-1, where 0 = color1, 1 = color2, 0.5 = equal mix) |
Returns: color (blended color result).
// Equal mix of red and blue
var purple = blend((color1 = '#ff0000'), (color2 = '#0000ff'), (amount = 0.5));colorGradient
colorGradient(value: number, range: number[], colorStops: string[] | {value: number, color: string}[]): string — map a numeric value to a color based on defined gradient stops within a specified range.
Plotting functions with fill=true or fill="momentum_fill" do not work with gradient colors.
| Parameter | Type | Description |
|---|---|---|
value | number | The numeric value to map to a color (will be clamped to range) |
range | number[] | Value range as [min, max] array defining the gradient bounds |
colorStops | string[] | {value: number, color: string}[] | Color stops defining the gradient. Simple arrays are evenly distributed; advanced arrays use custom {value, color} positions. |
Returns: string ('Interpolated color based on value position within range').
Simple Script: Basic RSI with Gradient Colors
//@version=2
define(title="RSI", position="offchart", axis=true);
var splineColors = input(name="colors1", type="color", defaultValue="orange");
var width = input(name="width", type="number", defaultValue=2);
var period = input(name="period", type="number", defaultValue=26);
var smooth = input(name="smooth", type="boolean", defaultValue=true);
var fill = true;
timeseries trade = ohlcv(symbol=currentSymbol, exchange=currentExchange);
var transformedData = rsi(source=trade, period=period);
var baseLine = 0;
var combinedData = [transformedData, baseLine];
var gradientColor = colorGradient(value=transformedData, range=[0, 100], colorStops=["red", "yellow"]);
plotLine(value=combinedData, colorIndex=gradientColor, smooth=true, width=1, label=["RSI", "Base Line"], desc=["RSI value", "Base Line at 0"]);Advanced Script: RSI Gradient Candles with Custom Color Stops
//@version=2
define(title="RSI Gradient Candles", position="mainchart", axis=true);
// Data source
timeseries ohlcvData = ohlcv(symbol=currentSymbol, exchange=currentExchange);
// Calculate RSI
var rsiPeriod = input(name="RSI Period", type="number", defaultValue=14);
var rsiValue = rsi(source=ohlcvData.close, period=rsiPeriod);
// Map RSI (0-100) to gradient colors
// Red (oversold) -> Yellow (neutral) -> Green (overbought)
var candleColor = colorGradient(
value=rsiValue,
range=[0, 100],
colorStops=[
{value: 0, color: "#d32f2f"}, // Deep red (oversold)
{value: 0.3, color: "#ff6f00"}, // Orange
{value: 0.5, color: "#fdd835"}, // Yellow (neutral)
{value: 0.7, color: "#7cb342"}, // Light green
{value: 1, color: "#2e7d32"} // Deep green (overbought)
]
);
// Plot gradient candles
plotCandle(
value=ohlcvData,
colorIndex=candleColor,
width=0.8,
label=["OHLC", "color", "color2", "color3"],
desc=["Candlesticks colored by RSI strength","color", "color2", "color3"]
);Tips
darken() for shadows/depth, lighten() for highlights, opacity() for layering effects, and transparency() for subtle backgrounds. Each function serves a different visual purpose.