# Weathered Coastal Stripe

Five diagonal bands move from weathered cream through muted mauve, deep blue-gray, dusty teal, and warm brown. Each color has a distinct role, with pale relief at one end and two dependable dark anchors through the middle. The set works for editorial sidebars, apparel graphics, packaging accents, and calm interface cards with an aged coastal mood.

- Also called: Gray, navy, teal and brown linear swatches
- Seed: `kW5RA0wQ-0KkJt4_jzcRROwo`
- Page: https://grabient.com/kW5RA0wQ-0KkJt4_jzcRROwo?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Kinds: dark center, muted
- Hues: triadic
- Contrast of its darkest and lightest colors: 9.3 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 | `#e8ddcf` | `oklch(90.16% 0.0220 73.83)` | Cinnamon Cake | black, 15.6 to 1 |
| 2 | `#765e71` | `oklch(51.18% 0.0427 334.49)` | Banished Brown | white, 5.8 to 1 |
| 3 | `#2d3441` | `oklch(32.28% 0.0262 263.69)` | Anchors Aweigh | white, 12.5 to 1 |
| 4 | `#476b68` | `oklch(50.00% 0.0413 188.66)` | Pond Newt | white, 5.8 to 1 |
| 5 | `#876850` | `oklch(54.33% 0.0537 59.74)` | Pastel Brown | white, 5 to 1 |

## CSS

```css
background: linear-gradient(45deg, #e8ddcf 0.000% 20.000%, #765e71 20.000% 40.000%, #2d3441 40.000% 60.000%, #476b68 60.000% 80.000%, #876850 80.000% 100.000%);
background: linear-gradient(45deg, oklch(90.16% 0.0220 73.83) 0.000% 20.000%, oklch(51.18% 0.0427 334.49) 20.000% 40.000%, oklch(32.28% 0.0262 263.69) 40.000% 60.000%, oklch(50.00% 0.0413 188.66) 60.000% 80.000%, oklch(54.33% 0.0537 59.74) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.902 | 0.022 | 73.8 |
| 2 | 0.512 | 0.043 | -25.5 |
| 3 | 0.323 | 0.026 | -96.3 |
| 4 | 0.5 | 0.041 | -171.3 |
| 5 | 0.543 | 0.054 | -300.3 |

## In these collections

- [Muted swatches](https://grabient.com/muted-swatches)

## Other forms

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