# Blue and aubergine weather map palette

The Blue and aubergine weather map palette brings together light teal, teal, blue, and dark purple. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits information graphics and map mood boards. Its darkest tone is dark purple, and its lightest tone is light teal.

- Also called: Cool light blue, blue and navy radial gradient
- Seed: `kW4DqSXK9CUjBwu0PcJISvCQ`
- Page: https://grabient.com/kW4DqSXK9CUjBwu0PcJISvCQ?style=radialGradient&steps=5&angle=0
- Drawn as: radial gradient, 5 steps, 0 degrees
- Kinds: light to dark, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 11.6 to 1

## Colors

The name most people give each color, and the text color that reads on it with its contrast.

| Stop | Hex | OKLCH | Name | Text on it |
| --- | --- | --- | --- | --- |
| 1 | `#97e8f1` | `oklch(88.19% 0.0799 205.31)` | Blizzard Blue | black, 15.1 to 1 |
| 2 | `#2ab7e4` | `oklch(72.83% 0.1295 225.39)` | Cyanite | black, 9 to 1 |
| 3 | `#0079d4` | `oklch(57.09% 0.1650 250.77)` | Bright Navy Blue | black, 4.7 to 1 |
| 4 | `#2c3aa4` | `oklch(40.94% 0.1695 270.83)` | Yuè Guāng Lán Blue | white, 9.3 to 1 |
| 5 | `#280f58` | `oklch(25.98% 0.1199 290.91)` | Praise of Shadow | white, 16.1 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #97e8f1 0.0%, #2ab7e4 25.0%, #0079d4 50.0%, #2c3aa4 75.0%, #280f58 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(88.19% 0.0799 205.31) 0.0%, oklch(72.83% 0.1295 225.39) 25.0%, oklch(57.09% 0.1650 250.77) 50.0%, oklch(40.94% 0.1695 270.83) 75.0%, oklch(25.98% 0.1199 290.91) 100.0%);
```

## Keyframes

5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.882 | 0.08 | 205.3 |
| 2 | 0.728 | 0.13 | 225.4 |
| 3 | 0.571 | 0.181 | 250.8 |
| 4 | 0.409 | 0.169 | 270.8 |
| 5 | 0.26 | 0.12 | 290.9 |

## In these collections

- [Weather map gradients](https://grabient.com/weather-map-gradients)

## Other forms

- [JSON](https://grabient.com/kW4DqSXK9CUjBwu0PcJISvCQ.json?style=radialGradient&steps=5&angle=0)
- [PNG](https://grabient.com/kW4DqSXK9CUjBwu0PcJISvCQ.png?style=radialGradient&steps=5&angle=0)
- [SVG](https://grabient.com/kW4DqSXK9CUjBwu0PcJISvCQ.svg?style=radialGradient&steps=5&angle=0)
- [CSS](https://grabient.com/kW4DqSXK9CUjBwu0PcJISvCQ.css?style=radialGradient&steps=5&angle=0)
- [ASE](https://grabient.com/kW4DqSXK9CUjBwu0PcJISvCQ.ase?style=radialGradient&steps=5&angle=0)
- [GPL](https://grabient.com/kW4DqSXK9CUjBwu0PcJISvCQ.gpl?style=radialGradient&steps=5&angle=0)
- [GRD](https://grabient.com/kW4DqSXK9CUjBwu0PcJISvCQ.grd?style=radialGradient&steps=5&angle=0)
- [Design tokens](https://grabient.com/kW4DqSXK9CUjBwu0PcJISvCQ.tokens.json?style=radialGradient&steps=5&angle=0)
- [Social card](https://grabient.com/api/og?seed=kW4DqSXK9CUjBwu0PcJISvCQ&style=radialGradient&steps=5&angle=0)
- [Palettes like this one](https://grabient.com/palettes?q=kW4DqSXK9CUjBwu0PcJISvCQ)
- [Guide for agents](https://grabient.com/llms.txt)