# Duotone brown to teal linear gradient

Duotone brown to teal linear gradient with 32 colors: #281e04, #2d1e08, #311f0e, #352016, #392220, #3a252a, #3b2a34, #3b2f3c, #3b3444, #3b3a4b, #3c4051, #3d4758, #3e4e60, #3e5568, #3e5d71, #3e6679, #3d6f82, #3b788b, #388192, #358a9a, #3193a0, #2e9ba4, #2ba3a8, #28abad, #26b2b1, #23bab5, #21c1b9, #1fc8bd, #1ecfc1, #1cd4c4, #1cd9c6, #1dddc8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUPR89MIsrE-iOFmsz1A`
- Page: https://grabient.com/kUPR89MIsrE-iOFmsz1A?steps=32&angle=300
- Drawn as: linear gradient, 32 steps, 300 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.5 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 | `#281e04` | `oklch(24.02% 0.0427 85.78)` | Black Mesa | white, 16.4 to 1 |
| 2 | `#2d1e08` | `oklch(24.78% 0.0417 75.20)` | Coffee Grounds | white, 16.1 to 1 |
| 3 | `#311f0e` | `oklch(25.71% 0.0400 61.04)` | Coffee Grounds | white, 15.7 to 1 |
| 4 | `#352016` | `oklch(26.79% 0.0378 44.10)` | Scorched | white, 15.3 to 1 |
| 5 | `#392220` | `oklch(28.00% 0.0353 25.15)` | Warm Balaclavas Are Forever | white, 14.7 to 1 |
| 6 | `#3a252a` | `oklch(29.34% 0.0329 4.99)` | Aubergine | white, 14.1 to 1 |
| 7 | `#3b2a34` | `oklch(30.80% 0.0308 344.40)` | Late Night Out | white, 13.4 to 1 |
| 8 | `#3b2f3c` | `oklch(32.36% 0.0291 324.16)` | Disappearing Purple | white, 12.6 to 1 |
| 9 | `#3b3444` | `oklch(34.02% 0.0282 305.06)` | Royal Coronation | white, 11.8 to 1 |
| 10 | `#3b3a4b` | `oklch(35.76% 0.0283 287.87)` | Martinique | white, 11 to 1 |
| 11 | `#3c4051` | `oklch(37.57% 0.0296 273.39)` | Lava Stone | white, 10.2 to 1 |
| 12 | `#3d4758` | `oklch(39.49% 0.0323 261.90)` | Very Navy | white, 9.4 to 1 |
| 13 | `#3e4e60` | `oklch(41.61% 0.0364 252.09)` | Admiralty | white, 8.5 to 1 |
| 14 | `#3e5568` | `oklch(43.92% 0.0417 243.67)` | Twilight Chimes | white, 7.7 to 1 |
| 15 | `#3e5d71` | `oklch(46.35% 0.0479 236.44)` | Superior Blue | white, 6.9 to 1 |
| 16 | `#3e6679` | `oklch(48.87% 0.0547 230.22)` | Barbados | white, 6.2 to 1 |
| 17 | `#3d6f82` | `oklch(51.43% 0.0620 224.82)` | Santorini Blue | white, 5.5 to 1 |
| 18 | `#3b788b` | `oklch(53.99% 0.0694 220.04)` | Blue Catch | white, 4.9 to 1 |
| 19 | `#388192` | `oklch(56.49% 0.0766 215.71)` | Forget-Me-Not Blue | black, 4.7 to 1 |
| 20 | `#358a9a` | `oklch(58.91% 0.0836 211.62)` | Seachange | black, 5.2 to 1 |
| 21 | `#3193a0` | `oklch(61.18% 0.0899 207.59)` | Aqua Lake | black, 5.7 to 1 |
| 22 | `#2e9ba4` | `oklch(63.29% 0.0955 203.48)` | Mediterranean Swirl | black, 6.3 to 1 |
| 23 | `#2ba3a8` | `oklch(65.37% 0.1009 199.75)` | Cancer Seagreen Scarab | black, 6.8 to 1 |
| 24 | `#28abad` | `oklch(67.47% 0.1063 196.53)` | Greenland Green | black, 7.4 to 1 |
| 25 | `#26b2b1` | `oklch(69.54% 0.1117 193.77)` | Lake Tahoe Turquoise | black, 8.1 to 1 |
| 26 | `#23bab5` | `oklch(71.56% 0.1169 191.41)` | Super Rare Jade | black, 8.7 to 1 |
| 27 | `#21c1b9` | `oklch(73.49% 0.1219 189.40)` | Cala Benirrás Blue | black, 9.4 to 1 |
| 28 | `#1fc8bd` | `oklch(75.30% 0.1266 187.69)` | Swimmers Pool | black, 10 to 1 |
| 29 | `#1ecfc1` | `oklch(76.96% 0.1309 186.21)` | Bianchi Green | black, 10.7 to 1 |
| 30 | `#1cd4c4` | `oklch(78.44% 0.1347 184.91)` | Turquoise Panic | black, 11.2 to 1 |
| 31 | `#1cd9c6` | `oklch(79.70% 0.1379 183.74)` | Mint Morning | black, 11.7 to 1 |
| 32 | `#1dddc8` | `oklch(80.71% 0.1406 182.65)` | Mint Morning | black, 12.2 to 1 |

## CSS

```css
background: linear-gradient(300deg, #281e04 0.0%, #2d1e08 3.2%, #311f0e 6.5%, #352016 9.7%, #392220 12.9%, #3a252a 16.1%, #3b2a34 19.4%, #3b2f3c 22.6%, #3b3444 25.8%, #3b3a4b 29.0%, #3c4051 32.3%, #3d4758 35.5%, #3e4e60 38.7%, #3e5568 41.9%, #3e5d71 45.2%, #3e6679 48.4%, #3d6f82 51.6%, #3b788b 54.8%, #388192 58.1%, #358a9a 61.3%, #3193a0 64.5%, #2e9ba4 67.7%, #2ba3a8 71.0%, #28abad 74.2%, #26b2b1 77.4%, #23bab5 80.6%, #21c1b9 83.9%, #1fc8bd 87.1%, #1ecfc1 90.3%, #1cd4c4 93.5%, #1cd9c6 96.8%, #1dddc8 100.0%);
background: linear-gradient(300deg in oklch, oklch(24.02% 0.0427 85.78) 0.0%, oklch(24.78% 0.0417 75.20) 3.2%, oklch(25.71% 0.0400 61.04) 6.5%, oklch(26.79% 0.0378 44.10) 9.7%, oklch(28.00% 0.0353 25.15) 12.9%, oklch(29.34% 0.0329 4.99) 16.1%, oklch(30.80% 0.0308 344.40) 19.4%, oklch(32.36% 0.0291 324.16) 22.6%, oklch(34.02% 0.0282 305.06) 25.8%, oklch(35.76% 0.0283 287.87) 29.0%, oklch(37.57% 0.0296 273.39) 32.3%, oklch(39.49% 0.0323 261.90) 35.5%, oklch(41.61% 0.0364 252.09) 38.7%, oklch(43.92% 0.0417 243.67) 41.9%, oklch(46.35% 0.0479 236.44) 45.2%, oklch(48.87% 0.0547 230.22) 48.4%, oklch(51.43% 0.0620 224.82) 51.6%, oklch(53.99% 0.0694 220.04) 54.8%, oklch(56.49% 0.0766 215.71) 58.1%, oklch(58.91% 0.0836 211.62) 61.3%, oklch(61.18% 0.0899 207.59) 64.5%, oklch(63.29% 0.0955 203.48) 67.7%, oklch(65.37% 0.1009 199.75) 71.0%, oklch(67.47% 0.1063 196.53) 74.2%, oklch(69.54% 0.1117 193.77) 77.4%, oklch(71.56% 0.1169 191.41) 80.6%, oklch(73.49% 0.1219 189.40) 83.9%, oklch(75.30% 0.1266 187.69) 87.1%, oklch(76.96% 0.1309 186.21) 90.3%, oklch(78.44% 0.1347 184.91) 93.5%, oklch(79.70% 0.1379 183.74) 96.8%, oklch(80.71% 0.1406 182.65) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.043 | 85.8 |
| 2 | 0.382 | 0.03 | -90.7 |
| 3 | 0.626 | 0.094 | -155.2 |
| 4 | 0.807 | 0.141 | -177.3 |

## In these collections

- [Multicolor gradients](https://grabient.com/multicolor-gradients)

## Other forms

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