---
title: "Weather Color ramp (ColorRamp) | Weather"
description: "Weather module color ramp API reference."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Weather Color ramp (ColorRamp)

Many integrated color ramps prepared by our cartographers are ready to use.

**Example**

```js
import { ColorRamp } from "@maptiler/weather";

  // Let's use the builtin Viridis color ramp,
  const viridisPressure = ColorRamp.builtin.VIRIDIS;
```

To manually create a new color ramp that can be used with any of the weather layers, you must provide a color stop definition as follows:

```js
import { ColorRamp } from "@maptiler/weather";

  Create you custom color ramp
  const myoloramp = new ColorRamp({ 
    stops: [
      { value: -65, color: [3, 78, 77, 255] },
      { value: -55, color: [4, 98, 96, 255] },
      { value: -40, color: [5, 122, 120, 255] },
      { value: -25, color: [6, 152, 149, 255] },
      { value: -20, color: [8, 201, 198, 255] },
      { value: -12, color: [20, 245, 241, 255] },
      { value: -8, color: [108, 237, 249, 255] },
      { value: -4, color: [133, 205, 250, 255] },
      { value: 0, color: [186, 227, 252, 255] },
      { value: 4, color: [238, 221, 145, 255] },
      { value: 8, color: [232, 183, 105, 255] },
      { value: 12, color: [232, 137, 69, 255] },
      { value: 20, color: [231, 107, 24, 255] },
      { value: 25, color: [236, 84, 19, 255] },
      { value: 30, color: [236, 44, 19, 255] },
      { value: 40, color: [123, 23, 10, 255] },
      { value: 55, color: [91, 11, 0, 255] },
    ],
  })
```

Note that all the values of the color stops are in the actual unit of the layer (In the example °C) and the colors are in \[R, G, B, A\].

## API reference

[Class ColorRamp](https://docs.maptiler.com/sdk-js/modules/weather/api-reference/classes/ColorRamp/)

## Builtin color ramps

There are many builtin color ramps that are ready to be used. since most of them are defined in the interval \[0, 1\], they need to be scaled acording to their intended usage. Let’s see how to do this:

```js
import { ColorRamp } from "@maptiler/weather";

// Let's use the Viridis color ramp,
// but we want to use it for air pressure, so on a range [900, 1080] hPa
const viridisPressure = ColorRamp.builtin.VIRIDIS.scale(900, 1080);
```

### Color blindness

Because some forms of color blindness can affect up to 8% of the population, we thought it was fair that our library includes some perceptually uniform color ramps that are more color blind friendly.

The description from TypeScript auto completion will let you know about this information, otherwise, look for the ramps based on one of the following:

-   Mako
-   Turbo
-   Rocket
-   Cividis

See all the builtin color ramps:

## Related examples

-   [Weather layer with a custom color blind ramp](https://docs.maptiler.com/sdk-js/examples/weather-temperature-color-ramp/)