# Sage and tan coastal palette

The Sage and tan coastal palette brings together green, yellow, and light orange. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is green, and its lightest tone is light orange.

- Also called: Analogous gray, olive and beige angular swatches
- Seed: `kWYxRuSBU89kTvPgGjzcJFAg`
- Page: https://grabient.com/kWYxRuSBU89kTvPgGjzcJFAg?style=angularSwatches&steps=5&angle=225
- Drawn as: angular swatches, 5 steps, 225 degrees
- Kinds: dark to light, muted
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.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 | `#3a4a3e` | `oklch(38.98% 0.0276 154.69)` | Dard Hunter Green | white, 9.4 to 1 |
| 2 | `#6c7e59` | `oklch(56.69% 0.0579 129.33)` | Emerald City | black, 4.7 to 1 |
| 3 | `#a4a17a` | `oklch(70.08% 0.0537 103.96)` | Hillary | black, 7.9 to 1 |
| 4 | `#c9ab7c` | `oklch(75.59% 0.0717 77.54)` | Downing Straw | black, 9.5 to 1 |
| 5 | `#e9d7b7` | `oklch(88.58% 0.0469 82.83)` | Drumskin | black, 14.8 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #3a4a3e 0.000% 20.000%, #6c7e59 20.000% 40.000%, #a4a17a 40.000% 60.000%, #c9ab7c 60.000% 80.000%, #e9d7b7 80.000% 100.000%);
background: conic-gradient(from 225deg, oklch(38.98% 0.0276 154.69) 0.000% 20.000%, oklch(56.69% 0.0579 129.33) 20.000% 40.000%, oklch(70.08% 0.0537 103.96) 40.000% 60.000%, oklch(75.59% 0.0717 77.54) 60.000% 80.000%, oklch(88.58% 0.0469 82.83) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.39 | 0.028 | 154.7 |
| 2 | 0.567 | 0.058 | 129.3 |
| 3 | 0.701 | 0.054 | 104 |
| 4 | 0.756 | 0.072 | 77.5 |
| 5 | 0.886 | 0.047 | 82.8 |

## In these collections

- [Coastal swatches](https://grabient.com/coastal-swatches)

## Other forms

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