# Teal Salon Stripe

Five bands move from sand through pale cream, deep indigo, steel blue, and finish in steel blue. The separated colors give headings, backgrounds, borders, and small accents clearly defined roles. This balance works well in formal posters, hospitality graphics, packaging, and polished identity systems, especially where readable contrast matters.

- Also called: Gray, beige, purple and navy linear swatches
- Seed: `kWhB1D8BM_Cadri-lrjrBK-Q`
- Page: https://grabient.com/kWhB1D8BM_Cadri-lrjrBK-Q?style=linearSwatches&steps=5&angle=225
- Drawn as: linear swatches, 5 steps, 225 degrees
- Kinds: muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 9.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 | `#70694f` | `oklch(51.97% 0.0400 94.92)` | Crocodile | white, 5.5 to 1 |
| 2 | `#e7d7b1` | `oklch(88.19% 0.0524 87.52)` | Sunning Deck | black, 14.7 to 1 |
| 3 | `#342452` | `oklch(30.31% 0.0813 297.47)` | Stormy Night | white, 13.8 to 1 |
| 4 | `#3e6680` | `oklch(49.21% 0.0620 238.29)` | Good Samaritan | white, 6.1 to 1 |
| 5 | `#173f4d` | `oklch(34.65% 0.0510 224.55)` | Cold and Dark | white, 11.3 to 1 |

## CSS

```css
background: linear-gradient(225deg, #70694f 0.000% 20.000%, #e7d7b1 20.000% 40.000%, #342452 40.000% 60.000%, #3e6680 60.000% 80.000%, #173f4d 80.000% 100.000%);
background: linear-gradient(225deg, oklch(51.97% 0.0400 94.92) 0.000% 20.000%, oklch(88.19% 0.0524 87.52) 20.000% 40.000%, oklch(30.31% 0.0813 297.47) 40.000% 60.000%, oklch(49.21% 0.0620 238.29) 60.000% 80.000%, oklch(34.65% 0.0510 224.55) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.52 | 0.04 | 94.9 |
| 2 | 0.882 | 0.052 | 87.5 |
| 3 | 0.303 | 0.081 | -62.5 |
| 4 | 0.492 | 0.062 | -121.7 |
| 5 | 0.346 | 0.051 | -135.4 |

## In these collections

- [Neo deco swatches](https://grabient.com/neo-deco-swatches)

## Other forms

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