# Tan, teal, blue and gray linear gradient

Tan, teal, blue and gray linear gradient with 7 colors: #d5bf78, #53927f, #344c6a, #252e65, #212d79, #56679e, #99a5bf. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUzURBtBXTKsvQdbjr9g`
- Page: https://grabient.com/kUzURBtBXTKsvQdbjr9g
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center, cool
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 6.9 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 | `#d5bf78` | `oklch(80.71% 0.0937 92.11)` | Morning’s Egg | black, 11.5 to 1 |
| 2 | `#53927f` | `oklch(61.27% 0.0721 172.49)` | Puerto Princesa | black, 5.8 to 1 |
| 3 | `#344c6a` | `oklch(40.94% 0.0593 254.85)` | Deep Royal | white, 8.8 to 1 |
| 4 | `#252e65` | `oklch(32.53% 0.0978 273.21)` | Underwater Realm | white, 12.7 to 1 |
| 5 | `#212d79` | `oklch(33.86% 0.1295 270.70)` | St. Patrick’s Blue | white, 12.2 to 1 |
| 6 | `#56679e` | `oklch(52.51% 0.0891 269.58)` | Electrify | white, 5.4 to 1 |
| 7 | `#99a5bf` | `oklch(72.05% 0.0400 266.47)` | Veranda Iris | black, 8.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d5bf78 0.0%, #53927f 16.7%, #344c6a 33.3%, #252e65 50.0%, #212d79 66.7%, #56679e 83.3%, #99a5bf 100.0%);
background: linear-gradient(90deg in oklch, oklch(80.71% 0.0937 92.11) 0.0%, oklch(61.27% 0.0721 172.49) 16.7%, oklch(40.94% 0.0593 254.85) 33.3%, oklch(32.53% 0.0978 273.21) 50.0%, oklch(33.86% 0.1295 270.70) 66.7%, oklch(52.51% 0.0891 269.58) 83.3%, oklch(72.05% 0.0400 266.47) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.807 | 0.094 | 92.1 |
| 2 | 0.409 | 0.059 | 254.8 |
| 3 | 0.339 | 0.13 | 270.7 |
| 4 | 0.72 | 0.04 | 266.5 |

## In these collections

- [Sky](https://grabient.com/sky)

## Other forms

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