# Blue and sage soft multicolor palette

The Blue and sage soft multicolor palette brings together blue, gray, teal, and green. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is teal.

- Also called: Blue, navy, dark purple and gray angular gradient
- Seed: `kckifCLA7AzCItPOi8BThnGTGdwWuiMmyI7RQ`
- Page: https://grabient.com/kckifCLA7AzCItPOi8BThnGTGdwWuiMmyI7RQ?style=angularGradient&steps=21&angle=135
- Drawn as: angular gradient, 21 steps, 135 degrees
- Kinds: muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.7 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 | `#6e7799` | `oklch(57.48% 0.0537 272.81)` | Velvet Morning | black, 4.7 to 1 |
| 2 | `#5d6180` | `oklch(50.13% 0.0500 278.85)` | Strong Iris | white, 6 to 1 |
| 3 | `#464560` | `oklch(40.28% 0.0447 285.14)` | Darkest Navy | white, 9.2 to 1 |
| 4 | `#33374d` | `oklch(34.20% 0.0392 277.71)` | German Liquorice | white, 11.7 to 1 |
| 5 | `#283846` | `oklch(33.20% 0.0324 245.62)` | Adept | white, 12 to 1 |
| 6 | `#2b3f42` | `oklch(35.27% 0.0259 206.06)` | Liquorice Green | white, 11 to 1 |
| 7 | `#3a4c48` | `oklch(39.85% 0.0231 183.41)` | Deep Mooring | white, 9.1 to 1 |
| 8 | `#526460` | `oklch(48.79% 0.0238 179.27)` | Blue Fir | white, 6.2 to 1 |
| 9 | `#69817d` | `oklch(58.30% 0.0277 184.97)` | Studio Blue Green | black, 5 to 1 |
| 10 | `#719191` | `oklch(63.26% 0.0361 196.12)` | Mineral Blue | black, 6.1 to 1 |
| 11 | `#6a96a2` | `oklch(64.49% 0.0508 216.74)` | Shore Water | black, 6.4 to 1 |
| 12 | `#628fac` | `oklch(62.90% 0.0657 237.94)` | Treasure Map Waters | black, 6 to 1 |
| 13 | `#567ea5` | `oklch(58.02% 0.0753 248.34)` | Borage | black, 4.9 to 1 |
| 14 | `#38648d` | `oklch(48.94% 0.0826 248.80)` | Mississippi River | white, 6.2 to 1 |
| 15 | `#254b75` | `oklch(40.51% 0.0831 253.05)` | Sapphire Earrings | white, 9 to 1 |
| 16 | `#313b63` | `oklch(36.44% 0.0699 271.15)` | Blue Depths | white, 10.7 to 1 |
| 17 | `#3d354f` | `oklch(34.95% 0.0445 298.43)` | Maharaja | white, 11.4 to 1 |
| 18 | `#463943` | `oklch(36.19% 0.0247 333.73)` | Vincotto | white, 10.9 to 1 |
| 19 | `#594846` | `oklch(41.72% 0.0234 23.34)` | Wild Boysenberry | white, 8.6 to 1 |
| 20 | `#6e6350` | `oklch(50.53% 0.0324 83.16)` | Classic Bronze | white, 5.8 to 1 |
| 21 | `#727c63` | `oklch(57.09% 0.0400 126.28)` | Limed Ash | black, 4.7 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #6e7799 0.0%, #5d6180 5.0%, #464560 10.0%, #33374d 15.0%, #283846 20.0%, #2b3f42 25.0%, #3a4c48 30.0%, #526460 35.0%, #69817d 40.0%, #719191 45.0%, #6a96a2 50.0%, #628fac 55.0%, #567ea5 60.0%, #38648d 65.0%, #254b75 70.0%, #313b63 75.0%, #3d354f 80.0%, #463943 85.0%, #594846 90.0%, #6e6350 95.0%, #727c63 100.0%);
background: conic-gradient(from 135deg in oklch, oklch(57.48% 0.0537 272.81) 0.0%, oklch(50.13% 0.0500 278.85) 5.0%, oklch(40.28% 0.0447 285.14) 10.0%, oklch(34.20% 0.0392 277.71) 15.0%, oklch(33.20% 0.0324 245.62) 20.0%, oklch(35.27% 0.0259 206.06) 25.0%, oklch(39.85% 0.0231 183.41) 30.0%, oklch(48.79% 0.0238 179.27) 35.0%, oklch(58.30% 0.0277 184.97) 40.0%, oklch(63.26% 0.0361 196.12) 45.0%, oklch(64.49% 0.0508 216.74) 50.0%, oklch(62.90% 0.0657 237.94) 55.0%, oklch(58.02% 0.0753 248.34) 60.0%, oklch(48.94% 0.0826 248.80) 65.0%, oklch(40.51% 0.0831 253.05) 70.0%, oklch(36.44% 0.0699 271.15) 75.0%, oklch(34.95% 0.0445 298.43) 80.0%, oklch(36.19% 0.0247 333.73) 85.0%, oklch(41.72% 0.0234 23.34) 90.0%, oklch(50.53% 0.0324 83.16) 95.0%, oklch(57.09% 0.0400 126.28) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.575 | 0.054 | 272.8 |
| 2 | 0.346 | 0.04 | 280.2 |
| 3 | 0.382 | 0.023 | 187.2 |
| 4 | 0.618 | 0.032 | 190.4 |
| 5 | 0.614 | 0.07 | 244.3 |
| 6 | 0.39 | 0.081 | 257 |
| 7 | 0.366 | 0.023 | 339.4 |
| 8 | 0.571 | 0.04 | 486.3 |

## In these collections

- [Soft multicolor gradients](https://grabient.com/soft-multicolor-gradients)

## Other forms

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