# Duotone green and navy angular swatches

Duotone green and navy angular swatches with 13 colors: #c0d07e, #b4cd6a, #a2c752, #94bd40, #85b031, #759f28, #658e24, #587b1e, #486922, #3b5730, #2e4838, #153e45, #213150. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg`
- Page: https://grabient.com/ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg?style=angularSwatches&steps=13&angle=0
- Drawn as: angular swatches, 13 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 | `#b4cd6a` | `oklch(80.81% 0.1283 121.16)` | Fashion Green | black, 11.8 to 1 |
| 3 | `#a2c752` | `oklch(77.95% 0.1502 124.47)` | Sweet Midori | black, 10.8 to 1 |
| 4 | `#94bd40` | `oklch(74.38% 0.1582 125.79)` | Funky Frog | black, 9.6 to 1 |
| 5 | `#85b031` | `oklch(70.08% 0.1585 126.58)` | Young Bud | black, 8.2 to 1 |
| 6 | `#759f28` | `oklch(64.99% 0.1514 127.64)` | Luminescent Green | black, 6.7 to 1 |
| 7 | `#658e24` | `oklch(59.45% 0.1392 128.69)` | Asparagus Sultan | black, 5.4 to 1 |
| 8 | `#587b1e` | `oklch(53.74% 0.1255 128.30)` | Master Chief | white, 4.9 to 1 |
| 9 | `#486922` | `oklch(48.03% 0.1061 130.81)` | Tree Shade | white, 6.2 to 1 |
| 10 | `#3b5730` | `oklch(42.37% 0.0705 137.01)` | Ficus | white, 8 to 1 |
| 11 | `#2e4838` | `oklch(37.40% 0.0413 156.17)` | Norfolk Green | white, 10 to 1 |
| 12 | `#153e45` | `oklch(33.78% 0.0462 210.59)` | Sunken Harbour | white, 11.6 to 1 |
| 13 | `#213150` | `oklch(31.50% 0.0593 261.84)` | Manganese Black | white, 12.9 to 1 |

## CSS

```css
background: conic-gradient(from 0deg, #c0d07e 0.000% 7.692%, #b4cd6a 7.692% 15.385%, #a2c752 15.385% 23.077%, #94bd40 23.077% 30.769%, #85b031 30.769% 38.462%, #759f28 38.462% 46.154%, #658e24 46.154% 53.846%, #587b1e 53.846% 61.538%, #486922 61.538% 69.231%, #3b5730 69.231% 76.923%, #2e4838 76.923% 84.615%, #153e45 84.615% 92.308%, #213150 92.308% 100.000%);
background: conic-gradient(from 0deg, oklch(82.68% 0.1075 118.12) 0.000% 7.692%, oklch(80.81% 0.1283 121.16) 7.692% 15.385%, oklch(77.95% 0.1502 124.47) 15.385% 23.077%, oklch(74.38% 0.1582 125.79) 23.077% 30.769%, oklch(70.08% 0.1585 126.58) 30.769% 38.462%, oklch(64.99% 0.1514 127.64) 38.462% 46.154%, oklch(59.45% 0.1392 128.69) 46.154% 53.846%, oklch(53.74% 0.1255 128.30) 53.846% 61.538%, oklch(48.03% 0.1061 130.81) 61.538% 69.231%, oklch(42.37% 0.0705 137.01) 69.231% 76.923%, oklch(37.40% 0.0413 156.17) 76.923% 84.615%, oklch(33.78% 0.0462 210.59) 84.615% 92.308%, oklch(31.50% 0.0593 261.84) 92.308% 100.000%);
```

## 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=angularSwatches&steps=13&angle=0)
- [PNG](https://grabient.com/ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg.png?style=angularSwatches&steps=13&angle=0)
- [SVG](https://grabient.com/ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg.svg?style=angularSwatches&steps=13&angle=0)
- [CSS](https://grabient.com/ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg.css?style=angularSwatches&steps=13&angle=0)
- [ASE](https://grabient.com/ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg.ase?style=angularSwatches&steps=13&angle=0)
- [GPL](https://grabient.com/ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg.gpl?style=angularSwatches&steps=13&angle=0)
- [GRD](https://grabient.com/ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg.grd?style=angularSwatches&steps=13&angle=0)
- [Design tokens](https://grabient.com/ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg.tokens.json?style=angularSwatches&steps=13&angle=0)
- [Social card](https://grabient.com/api/og?seed=ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg&style=angularSwatches&steps=13&angle=0)
- [Palettes like this one](https://grabient.com/palettes?q=ka0k5UYzbAtk5wDLssAvSbAK-PQuoFcxg)
- [Guide for agents](https://grabient.com/llms.txt)