# Teal, brown, black and navy linear gradient

Teal, brown, black and navy linear gradient with 32 colors: #2b6e6b, #306e60, #3e6b50, #51663e, #635f31, #6e562e, #734f32, #714936, #6c4434, #633f2c, #563a21, #463517, #343112, #212c14, #112717, #03221a, #001f1c, #001c1e, #001a21, #001926, #00182e, #011838, #071b3f, #092048, #002b52, #003c54, #004f58, #006557, #3b7848, #718339, #998836, #b48b3f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWfjGINxauJwPUChHcl1Caq4`
- Page: https://grabient.com/kWfjGINxauJwPUChHcl1Caq4?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: dark center, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 5.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 | `#2b6e6b` | `oklch(49.61% 0.0675 191.25)` | North Sea | white, 5.8 to 1 |
| 2 | `#306e60` | `oklch(49.21% 0.0672 177.15)` | Antique Green | white, 5.9 to 1 |
| 3 | `#3e6b50` | `oklch(48.80% 0.0669 156.08)` | Toad King | white, 6.1 to 1 |
| 4 | `#51663e` | `oklch(48.31% 0.0665 130.87)` | Mountain Forest | white, 6.2 to 1 |
| 5 | `#635f31` | `oklch(47.70% 0.0660 104.34)` | Saguaro | white, 6.5 to 1 |
| 6 | `#6e562e` | `oklch(46.90% 0.0653 79.31)` | Horses Neck | white, 6.9 to 1 |
| 7 | `#734f32` | `oklch(45.87% 0.0644 58.59)` | Seed Brown | white, 7.3 to 1 |
| 8 | `#714936` | `oklch(44.53% 0.0632 45.00)` | Riding Boots | white, 7.7 to 1 |
| 9 | `#6c4434` | `oklch(42.83% 0.0615 41.31)` | Noble Chocolate | white, 8.3 to 1 |
| 10 | `#633f2c` | `oklch(40.45% 0.0589 47.67)` | Grilled | white, 9.2 to 1 |
| 11 | `#563a21` | `oklch(37.48% 0.0553 61.77)` | Kuro Brown | white, 10.3 to 1 |
| 12 | `#463517` | `oklch(34.16% 0.0513 81.40)` | Lisbon Brown | white, 11.7 to 1 |
| 13 | `#343112` | `oklch(30.77% 0.0474 104.33)` | Swamp of Sorrows | white, 13.2 to 1 |
| 14 | `#212c14` | `oklch(27.57% 0.0441 128.35)` | Kuro Green | white, 14.6 to 1 |
| 15 | `#112717` | `oklch(24.80% 0.0418 151.23)` | Deep Slate Olive | white, 15.8 to 1 |
| 16 | `#03221a` | `oklch(22.74% 0.0410 170.76)` | Stellar Explorer | white, 16.7 to 1 |
| 17 | `#001f1c` | `oklch(21.54% 0.0378 185.80)` | Stellar Explorer | white, 17.3 to 1 |
| 18 | `#001c1e` | `oklch(20.70% 0.0352 201.70)` | Black Stallion | white, 17.6 to 1 |
| 19 | `#001a21` | `oklch(20.20% 0.0363 218.06)` | Creeping Death | white, 17.9 to 1 |
| 20 | `#001926` | `oklch(20.11% 0.0418 233.51)` | Creeping Death | white, 17.9 to 1 |
| 21 | `#00182e` | `oklch(20.51% 0.0536 246.71)` | Oxford by Night | white, 17.8 to 1 |
| 22 | `#011838` | `oklch(21.44% 0.0690 256.12)` | Naval Night | white, 17.6 to 1 |
| 23 | `#071b3f` | `oklch(23.02% 0.0751 261.18)` | Maastricht Blue | white, 16.9 to 1 |
| 24 | `#092048` | `oklch(25.30% 0.0802 260.21)` | Oxford Blue | white, 15.9 to 1 |
| 25 | `#002b52` | `oklch(28.62% 0.0838 251.26)` | Dark Tyrian Blue | white, 14.3 to 1 |
| 26 | `#003c54` | `oklch(33.40% 0.0688 232.82)` | Duskwood | white, 11.8 to 1 |
| 27 | `#004f58` | `oklch(39.20% 0.0673 207.74)` | Deep Atlantic Blue | white, 9.2 to 1 |
| 28 | `#006557` | `oklch(45.51% 0.0832 178.86)` | Dancing Dragonfly | white, 6.9 to 1 |
| 29 | `#3b7848` | `oklch(51.85% 0.0990 149.00)` | Autumn Crocodile | white, 5.2 to 1 |
| 30 | `#718339` | `oklch(57.74% 0.1018 120.92)` | Khaki Green | black, 4.9 to 1 |
| 31 | `#998836` | `oklch(62.66% 0.1042 97.44)` | Parsnip Root | black, 5.9 to 1 |
| 32 | `#b48b3f` | `oklch(66.14% 0.1061 81.35)` | Tinsel | black, 6.7 to 1 |

## CSS

```css
background: linear-gradient(225deg, #2b6e6b 0.0%, #306e60 3.2%, #3e6b50 6.5%, #51663e 9.7%, #635f31 12.9%, #6e562e 16.1%, #734f32 19.4%, #714936 22.6%, #6c4434 25.8%, #633f2c 29.0%, #563a21 32.3%, #463517 35.5%, #343112 38.7%, #212c14 41.9%, #112717 45.2%, #03221a 48.4%, #001f1c 51.6%, #001c1e 54.8%, #001a21 58.1%, #001926 61.3%, #00182e 64.5%, #011838 67.7%, #071b3f 71.0%, #092048 74.2%, #002b52 77.4%, #003c54 80.6%, #004f58 83.9%, #006557 87.1%, #3b7848 90.3%, #718339 93.5%, #998836 96.8%, #b48b3f 100.0%);
background: linear-gradient(225deg in oklch, oklch(49.61% 0.0675 191.25) 0.0%, oklch(49.21% 0.0672 177.15) 3.2%, oklch(48.80% 0.0669 156.08) 6.5%, oklch(48.31% 0.0665 130.87) 9.7%, oklch(47.70% 0.0660 104.34) 12.9%, oklch(46.90% 0.0653 79.31) 16.1%, oklch(45.87% 0.0644 58.59) 19.4%, oklch(44.53% 0.0632 45.00) 22.6%, oklch(42.83% 0.0615 41.31) 25.8%, oklch(40.45% 0.0589 47.67) 29.0%, oklch(37.48% 0.0553 61.77) 32.3%, oklch(34.16% 0.0513 81.40) 35.5%, oklch(30.77% 0.0474 104.33) 38.7%, oklch(27.57% 0.0441 128.35) 41.9%, oklch(24.80% 0.0418 151.23) 45.2%, oklch(22.74% 0.0410 170.76) 48.4%, oklch(21.54% 0.0378 185.80) 51.6%, oklch(20.70% 0.0352 201.70) 54.8%, oklch(20.20% 0.0363 218.06) 58.1%, oklch(20.11% 0.0418 233.51) 61.3%, oklch(20.51% 0.0536 246.71) 64.5%, oklch(21.44% 0.0690 256.12) 67.7%, oklch(23.02% 0.0751 261.18) 71.0%, oklch(25.30% 0.0802 260.21) 74.2%, oklch(28.62% 0.0838 251.26) 77.4%, oklch(33.40% 0.0688 232.82) 80.6%, oklch(39.20% 0.0673 207.74) 83.9%, oklch(45.51% 0.0832 178.86) 87.1%, oklch(51.85% 0.0990 149.00) 90.3%, oklch(57.74% 0.1018 120.92) 93.5%, oklch(62.66% 0.1042 97.44) 96.8%, oklch(66.14% 0.1061 81.35) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.496 | 0.068 | 191.3 |
| 2 | 0.433 | 0.062 | 41.2 |
| 3 | 0.22 | 0.041 | 178.6 |
| 4 | 0.26 | 0.081 | 258.9 |
| 5 | 0.661 | 0.106 | 81.3 |

## In these collections

- [Elevation gradients](https://grabient.com/elevation-gradients)

## Other forms

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