---
title: Color Functions
description: Build and transform colors with rgb, new, opacity, lighten, darken, blend, and data-driven gradients.
---

Color functions let you build colors from scratch and transform existing ones: adjust opacity, lighten or darken a shade, blend two colors, or map a value onto a gradient. Every function returns a color you can pass straight into a plot's `colors` array or its per-bar `colorIndex`.

This is how you make a plot react to the data: color an RSI line by its level, fade a band by distance, or shift a candle's hue with momentum.

```javascript
//@version=2
define(title="Faded average", position="offchart", axis=true)

timeseries trade = ohlcv(symbol=currentSymbol, exchange=currentExchange)

// Start from a base color, then knock it back to 40% opacity for a softer line.
var base = color.rgb(r=37, g=99, b=235)
var soft = opacity(color=base, percent=40)

plotLine(value=sma(source=trade.close, period=20), colorIndex=soft, width=2, label=["SMA 20"], desc=["20-bar SMA in a faded blue"])
```
## What's available

| Function | Signature | What it does |
| --- | --- | --- |
| `color.rgb` | `color.rgb(r, g, b)` | Build a color from red/green/blue channels (each `0–255`). |
| `color.new` | `color.new(color, transp)` | Copy a color at a new transparency (`0` opaque, `100` clear). |
| `opacity` | `opacity(color, percent)` | Set the color's opacity to `percent`. |
| `transparency` | `transparency(color, percent)` | Set the color's transparency (the inverse of opacity). |
| `brightness` | `brightness(color, amount)` | Adjust perceived brightness. |
| `lighten` | `lighten(color, amount)` | Mix the color toward white. |
| `darken` | `darken(color, amount)` | Mix the color toward black. |
| `blend` | `blend(color1, color2, amount)` | Mix two colors; `amount` `0–1` is the weight of `color2`. |
| `colorGradient` | `colorGradient(value, range, colorStops)` | Map a numeric value onto a color ramp. |
| `palette` | `palette(name)` | Named color-stop set for `colorGradient` (e.g. `"viridis"`). |

Anywhere a color is expected you can also pass a hex string like `"#dc2626"` or a [named constant](../core-concepts/color-constants.md) like `red`; the transforms accept either and return a real color.

## Data-driven color with `colorGradient`

`colorGradient` is the one to reach for when color should encode a value. Give it the value, the `[min, max]` range that value lives in, and a set of color stops; it returns the color at that point on the ramp. Pair it with `palette(...)` for a ready-made scheme.

```javascript
//@version=2
define(title="RSI heat", position="offchart", axis=true)

timeseries trade = ohlcv(symbol=currentSymbol, exchange=currentExchange)
var momentum = rsi(source=trade.close, period=14)

// Map RSI (0–100) onto a viridis ramp: cool when oversold, hot when overbought.
var heat = colorGradient(value=momentum, range=[0, 100], colorStops=palette("viridis"))

plotLine(value=momentum, colorIndex=heat, width=2, label=["RSI"], desc=["RSI colored by its own level"])
```
## Every transform in one script

Each line below is colored by a different transform. The momentum series feeds the gradient; the rest take a base color or hex string and reshape it.

```javascript title="color_transforms.ks"
//@version=2
define(title="Color Transforms", position="offchart", axis=true)

timeseries trade = ohlcv(symbol=currentSymbol, exchange=currentExchange)
var momentum = rsi(source=trade.close, period=14)
var baseColor = color.rgb(r=37, g=99, b=235)
var newerColor = color.new(color=baseColor, transp=20)
var faded = opacity(color=baseColor, percent=55)
var transparent = transparency(color="#dc2626", percent=45)
var brighter = brightness(color="#f97316", amount=60)
var lighter = lighten(color="#16a34a", amount=30)
var darker = darken(color="#7c3aed", amount=30)
var blended = blend(color1="#2563eb", color2="#f97316", amount=0.5)
var gradient = colorGradient(value=momentum, range=[0, 100], colorStops=palette("viridis"))

plotLine(value=trade.close, colorIndex=newerColor, width=2, label=["color.new"], desc=["color.new result used as plot color"])
plotLine(value=sma(source=trade.close, period=5), colorIndex=faded, width=2, label=["opacity"], desc=["opacity result used as plot color"])
plotLine(value=ema(source=trade.close, period=5), colorIndex=transparent, width=2, label=["transparency"], desc=["transparency result used as plot color"])
plotLine(value=wma(source=trade.close, period=5), colorIndex=brighter, width=2, label=["brightness"], desc=["brightness result used as plot color"])
plotLine(value=hma(source=trade.close, period=9), colorIndex=lighter, width=2, label=["lighten"], desc=["lighten result used as plot color"])
plotLine(value=rma(source=trade.close, period=5), colorIndex=darker, width=2, label=["darken"], desc=["darken result used as plot color"])
plotLine(value=linreg(source=trade.close, period=10, offset=0), colorIndex=blended, width=2, label=["blend"], desc=["blend result used as plot color"])
plotLine(value=momentum, colorIndex=gradient, width=2, label=["colorGradient"], desc=["colorGradient result used as plot color"])
```

{% hint style="info" %}
**`blend` weights are numbers, not words.** `blend.amount` must be a number between `0` and `1` (`0` = all `color1`, `1` = all `color2`, `0.5` = an even mix). Passing a string like `"half"` fails at compile with `Type mismatch for 'blend.amount': expected number, got string`.
{% endhint %}