# Pale blue, ochre and sage color palette

The Pale blue, ochre and sage color palette brings together off-white, blue, gold, pale orange, and green. The colors span a broad lightness range, combining moderate color with clear contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is green, and its lightest tone is off-white.

- Also called: Light blue, blue, tan and dark green linear swatches
- Seed: `kW7Q2YxiXDegqLR2DkBNxZH4`
- Page: https://grabient.com/kW7Q2YxiXDegqLR2DkBNxZH4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: pastel
- Hues: two-hue
- Contrast of its darkest and lightest colors: 6.4 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 | `#dcecf0` | `oklch(93.31% 0.0179 214.45)` | Frost Wind | black, 17.3 to 1 |
| 2 | `#3578aa` | `oklch(55.12% 0.1033 244.04)` | Python Blue | white, 4.7 to 1 |
| 3 | `#e7be67` | `oklch(81.89% 0.1157 84.47)` | Golden Chalice | black, 11.9 to 1 |
| 4 | `#f2e7cb` | `oklch(92.91% 0.0386 87.64)` | Sphere | black, 17 to 1 |
| 5 | `#345b42` | `oklch(43.31% 0.0606 155.28)` | Ficus | white, 7.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #dcecf0 0.000% 20.000%, #3578aa 20.000% 40.000%, #e7be67 40.000% 60.000%, #f2e7cb 60.000% 80.000%, #345b42 80.000% 100.000%);
background: linear-gradient(90deg, oklch(93.31% 0.0179 214.45) 0.000% 20.000%, oklch(55.12% 0.1033 244.04) 20.000% 40.000%, oklch(81.89% 0.1157 84.47) 40.000% 60.000%, oklch(92.91% 0.0386 87.64) 60.000% 80.000%, oklch(43.31% 0.0606 155.28) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.933 | 0.018 | 214.5 |
| 2 | 0.551 | 0.103 | 244 |
| 3 | 0.819 | 0.116 | 84.5 |
| 4 | 0.929 | 0.039 | 87.6 |
| 5 | 0.433 | 0.061 | 155.3 |

## In these collections

- [Earth tone swatches](https://grabient.com/earth-tone-swatches)
- [Oktoberfest swatches](https://grabient.com/oktoberfest-swatches)

## Other forms

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