# Duotone green to navy angular gradient

Duotone green to navy angular gradient with 32 colors: #c0d07e, #bccf78, #b7ce70, #b1cc66, #aaca5c, #a3c853, #9ec44c, #98c045, #92bc3e, #8db738, #87b133, #81ac2e, #7aa52b, #749f28, #6e9826, #689125, #628a24, #5d8321, #587c1e, #53741d, #4d6e1f, #466724, #40602a, #3c592f, #385233, #334c36, #2d4738, #23433c, #184042, #143b49, #19364e, #213150. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg`
- Page: https://grabient.com/ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg?style=angularGradient&steps=32&angle=0
- Drawn as: angular gradient, 32 steps, 0 degrees
- Kinds: light to dark, vivid
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 7.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 | `#c0d07e` | `oklch(82.68% 0.1075 118.12)` | Alligator Alley | black, 12.5 to 1 |
| 2 | `#bccf78` | `oklch(82.11% 0.1136 119.02)` | Tart Apple | black, 12.3 to 1 |
| 3 | `#b7ce70` | `oklch(81.34% 0.1225 120.31)` | Fashion Green | black, 12 to 1 |
| 4 | `#b1cc66` | `oklch(80.40% 0.1325 121.78)` | Asparagus Fern | black, 11.7 to 1 |
| 5 | `#aaca5c` | `oklch(79.33% 0.1420 123.19)` | Be Spontaneous | black, 11.3 to 1 |
| 6 | `#a3c853` | `oklch(78.16% 0.1493 124.32)` | Sweet Midori | black, 10.9 to 1 |
| 7 | `#9ec44c` | `oklch(76.89% 0.1538 125.05)` | Aerobic Fix | black, 10.4 to 1 |
| 8 | `#98c045` | `oklch(75.50% 0.1568 125.53)` | Funky Frog | black, 9.9 to 1 |
| 9 | `#92bc3e` | `oklch(74.00% 0.1585 125.86)` | Funky Frog | black, 9.4 to 1 |
| 10 | `#8db738` | `oklch(72.38% 0.1591 126.14)` | Outrageous Green | black, 8.9 to 1 |
| 11 | `#87b133` | `oklch(70.67% 0.1588 126.45)` | Young Bud | black, 8.3 to 1 |
| 12 | `#81ac2e` | `oklch(68.85% 0.1574 126.85)` | Football Field | black, 7.8 to 1 |
| 13 | `#7aa52b` | `oklch(66.88% 0.1548 127.26)` | Spring Vegetables | black, 7.2 to 1 |
| 14 | `#749f28` | `oklch(64.81% 0.1511 127.67)` | Luminescent Green | black, 6.7 to 1 |
| 15 | `#6e9826` | `oklch(62.67% 0.1466 128.08)` | Hidden Valley | black, 6.1 to 1 |
| 16 | `#689125` | `oklch(60.52% 0.1417 128.49)` | Asparagus Sultan | black, 5.6 to 1 |
| 17 | `#628a24` | `oklch(58.37% 0.1367 128.80)` | Maximum Green | black, 5.1 to 1 |
| 18 | `#5d8321` | `oklch(56.17% 0.1315 128.61)` | Enchanted Forest | black, 4.7 to 1 |
| 19 | `#587c1e` | `oklch(53.93% 0.1260 128.31)` | Master Chief | white, 4.8 to 1 |
| 20 | `#53741d` | `oklch(51.68% 0.1196 128.40)` | Luscious Lemongrass | white, 5.3 to 1 |
| 21 | `#4d6e1f` | `oklch(49.47% 0.1120 129.40)` | Bowser Shell | white, 5.9 to 1 |
| 22 | `#466724` | `oklch(47.31% 0.1027 131.63)` | Tree Shade | white, 6.4 to 1 |
| 23 | `#40602a` | `oklch(45.12% 0.0896 133.72)` | Greenhouse | white, 7.1 to 1 |
| 24 | `#3c592f` | `oklch(42.91% 0.0744 136.19)` | Turf | white, 7.9 to 1 |
| 25 | `#385233` | `oklch(40.79% 0.0595 140.29)` | Goblin | white, 8.6 to 1 |
| 26 | `#334c36` | `oklch(38.84% 0.0474 147.27)` | Moselle Green | white, 9.4 to 1 |
| 27 | `#2d4738` | `oklch(37.14% 0.0407 158.42)` | Mushiao Green | white, 10.1 to 1 |
| 28 | `#23433c` | `oklch(35.63% 0.0401 176.68)` | Black Soap | white, 10.8 to 1 |
| 29 | `#184042` | `oklch(34.29% 0.0439 200.20)` | Tiber | white, 11.4 to 1 |
| 30 | `#143b49` | `oklch(33.14% 0.0498 224.93)` | Subterranean River | white, 11.9 to 1 |
| 31 | `#19364e` | `oklch(32.20% 0.0557 246.83)` | Gibraltar Sea | white, 12.5 to 1 |
| 32 | `#213150` | `oklch(31.50% 0.0593 261.84)` | Manganese Black | white, 12.9 to 1 |

## CSS

```css
background: conic-gradient(from 0deg, #c0d07e 0.0%, #bccf78 3.2%, #b7ce70 6.5%, #b1cc66 9.7%, #aaca5c 12.9%, #a3c853 16.1%, #9ec44c 19.4%, #98c045 22.6%, #92bc3e 25.8%, #8db738 29.0%, #87b133 32.3%, #81ac2e 35.5%, #7aa52b 38.7%, #749f28 41.9%, #6e9826 45.2%, #689125 48.4%, #628a24 51.6%, #5d8321 54.8%, #587c1e 58.1%, #53741d 61.3%, #4d6e1f 64.5%, #466724 67.7%, #40602a 71.0%, #3c592f 74.2%, #385233 77.4%, #334c36 80.6%, #2d4738 83.9%, #23433c 87.1%, #184042 90.3%, #143b49 93.5%, #19364e 96.8%, #213150 100.0%);
background: conic-gradient(from 0deg in oklch, oklch(82.68% 0.1075 118.12) 0.0%, oklch(82.11% 0.1136 119.02) 3.2%, oklch(81.34% 0.1225 120.31) 6.5%, oklch(80.40% 0.1325 121.78) 9.7%, oklch(79.33% 0.1420 123.19) 12.9%, oklch(78.16% 0.1493 124.32) 16.1%, oklch(76.89% 0.1538 125.05) 19.4%, oklch(75.50% 0.1568 125.53) 22.6%, oklch(74.00% 0.1585 125.86) 25.8%, oklch(72.38% 0.1591 126.14) 29.0%, oklch(70.67% 0.1588 126.45) 32.3%, oklch(68.85% 0.1574 126.85) 35.5%, oklch(66.88% 0.1548 127.26) 38.7%, oklch(64.81% 0.1511 127.67) 41.9%, oklch(62.67% 0.1466 128.08) 45.2%, oklch(60.52% 0.1417 128.49) 48.4%, oklch(58.37% 0.1367 128.80) 51.6%, oklch(56.17% 0.1315 128.61) 54.8%, oklch(53.93% 0.1260 128.31) 58.1%, oklch(51.68% 0.1196 128.40) 61.3%, oklch(49.47% 0.1120 129.40) 64.5%, oklch(47.31% 0.1027 131.63) 67.7%, oklch(45.12% 0.0896 133.72) 71.0%, oklch(42.91% 0.0744 136.19) 74.2%, oklch(40.79% 0.0595 140.29) 77.4%, oklch(38.84% 0.0474 147.27) 80.6%, oklch(37.14% 0.0407 158.42) 83.9%, oklch(35.63% 0.0401 176.68) 87.1%, oklch(34.29% 0.0439 200.20) 90.3%, oklch(33.14% 0.0498 224.93) 93.5%, oklch(32.20% 0.0557 246.83) 96.8%, oklch(31.50% 0.0593 261.84) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.827 | 0.107 | 118.1 |
| 2 | 0.78 | 0.15 | 124.5 |
| 3 | 0.701 | 0.158 | 126.6 |
| 4 | 0.594 | 0.139 | 128.7 |
| 5 | 0.48 | 0.106 | 130.8 |
| 6 | 0.374 | 0.041 | 156.2 |
| 7 | 0.315 | 0.059 | 261.8 |

## In these collections

- [Emerald color palette](https://grabient.com/emerald-color-palette)
- [Blue and green gradients](https://grabient.com/blue-and-green-gradients)

## Other forms

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