# Deep teal, stone and indigo color palette

The Deep teal, stone and indigo color palette brings together teal, light green, light blue, and blue. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits botanical branding and garden event graphics. Its darkest tone is teal, and its lightest tone is light green.

- Also called: Teal, gray and blue angular swatches
- Seed: `kWcSSE15W_OuMvnemcyyqRAo`
- Page: https://grabient.com/kWcSSE15W_OuMvnemcyyqRAo?style=angularSwatches&steps=5&angle=315
- Drawn as: angular swatches, 5 steps, 315 degrees
- Kinds: light center, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 4.6 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 | `#315d58` | `oklch(44.49% 0.0496 186.33)` | Lacrosse | white, 7.4 to 1 |
| 2 | `#72a79c` | `oklch(68.90% 0.0593 179.99)` | Twining Vine | black, 7.7 to 1 |
| 3 | `#b8d4c8` | `oklch(84.65% 0.0344 167.31)` | Sage Bundle | black, 13.3 to 1 |
| 4 | `#9fa9d9` | `oklch(74.41% 0.0703 275.10)` | Whipped Violet | black, 9.1 to 1 |
| 5 | `#7275b6` | `oklch(58.66% 0.0992 281.44)` | Wind Star | black, 4.9 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #315d58 0.000% 20.000%, #72a79c 20.000% 40.000%, #b8d4c8 40.000% 60.000%, #9fa9d9 60.000% 80.000%, #7275b6 80.000% 100.000%);
background: conic-gradient(from 315deg, oklch(44.49% 0.0496 186.33) 0.000% 20.000%, oklch(68.90% 0.0593 179.99) 20.000% 40.000%, oklch(84.65% 0.0344 167.31) 40.000% 60.000%, oklch(74.41% 0.0703 275.10) 60.000% 80.000%, oklch(58.66% 0.0992 281.44) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.445 | 0.05 | 186.3 |
| 2 | 0.689 | 0.059 | 180 |
| 3 | 0.846 | 0.034 | 167.3 |
| 4 | 0.744 | 0.07 | 275.1 |
| 5 | 0.587 | 0.099 | 281.4 |

## In these collections

- [Garden swatches](https://grabient.com/garden-swatches)
- [Cottagecore swatches](https://grabient.com/cottagecore-swatches)

## Other forms

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