# Terracotta, cobalt blue and sage color palette

The Terracotta, cobalt blue and sage color palette brings together orange, magenta, blue, and light green. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is blue, and its lightest tone is light green.

- Also called: Brown, purple, blue and gray linear swatches
- Seed: `kYnTEiQRm3T2sOVIsL2Vh49N0NOK`
- Page: https://grabient.com/kYnTEiQRm3T2sOVIsL2Vh49N0NOK?style=linearSwatches&steps=6&angle=0
- Drawn as: linear swatches, 6 steps, 0 degrees
- Kinds: muted
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.8 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 | `#a87962` | `oklch(61.81% 0.0675 47.81)` | Tawny Birch | black, 5.5 to 1 |
| 2 | `#805777` | `oklch(51.18% 0.0703 334.90)` | Magnificence | white, 5.9 to 1 |
| 3 | `#5155a2` | `oklch(48.43% 0.1213 278.89)` | Governor Bay | white, 6.6 to 1 |
| 4 | `#4477c5` | `oklch(57.09% 0.1337 258.81)` | Celestial Plum | black, 4.6 to 1 |
| 5 | `#63a0c4` | `oklch(67.72% 0.0827 235.56)` | Gulf Stream Blue | black, 7.3 to 1 |
| 6 | `#92b0a7` | `oklch(73.23% 0.0358 174.27)` | Delicate Green | black, 9 to 1 |

## CSS

```css
background: linear-gradient(0deg, #a87962 0.000% 16.667%, #805777 16.667% 33.333%, #5155a2 33.333% 50.000%, #4477c5 50.000% 66.667%, #63a0c4 66.667% 83.333%, #92b0a7 83.333% 100.000%);
background: linear-gradient(0deg, oklch(61.81% 0.0675 47.81) 0.000% 16.667%, oklch(51.18% 0.0703 334.90) 16.667% 33.333%, oklch(48.43% 0.1213 278.89) 33.333% 50.000%, oklch(57.09% 0.1337 258.81) 50.000% 66.667%, oklch(67.72% 0.0827 235.56) 66.667% 83.333%, oklch(73.23% 0.0358 174.27) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.618 | 0.068 | 47.8 |
| 2 | 0.512 | 0.07 | -25.1 |
| 3 | 0.484 | 0.121 | -81.1 |
| 4 | 0.571 | 0.134 | -101.2 |
| 5 | 0.677 | 0.083 | -124.4 |
| 6 | 0.732 | 0.036 | -185.7 |

## In these collections

- [Beach swatches](https://grabient.com/beach-swatches)
- [Coastal swatches](https://grabient.com/coastal-swatches)
- [Late summer lake haze](https://grabient.com/late-summer-lake-haze)

## Other forms

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