---
title: Color Functions
description: Brightness, darken, lighten, transparency, opacity, blend, and gradient mapping for dynamic chart styling.
---

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`](#brightness)       | Adjust color brightness levels                   |
| [`darken`](#darken)               | Reduce color brightness/lightness                |
| [`lighten`](#lighten)             | Increase color brightness/lightness              |
| [`transparency`](#transparency)   | Set color transparency level                     |
| [`opacity`](#opacity)             | Set color opacity level, inverse of transparency |
| [`blend`](#blend)                 | Mix two colors together                          |
| [`colorGradient`](#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)`.

```javascript
// 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)`.

```javascript
// 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)`.

```javascript
// 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)`.

```javascript
// 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)`.

```javascript
// 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)`.

```javascript
// 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

```javascript
//@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

```javascript
//@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

<table data-view="cards"><tbody>
<tr><td>Color Psychology</td><td>Use green for bullish signals, red for bearish, and neutral colors for informational data. Consistent color schemes improve user experience.</td><td></td></tr>
<tr><td>Accessibility</td><td>Consider color-blind users by ensuring sufficient contrast and using patterns or shapes in addition to color for important signals.</td><td></td></tr>
<tr><td>Function Selection</td><td>Use `darken()` for shadows/depth, `lighten()` for highlights, `opacity()` for layering effects, and `transparency()` for subtle backgrounds. Each function serves a different visual purpose.</td><td></td></tr>
</tbody></table>