# Duotone dark green to blue linear gradient

Duotone dark green to blue linear gradient with 32 colors: #222f01, #213001, #203100, #1f3200, #1e3201, #1f3301, #223200, #253200, #253301, #1f350c, #0f3820, #033933, #0d3940, #19394a, #1b3a56, #183b66, #123c78, #0a3c8a, #0c3b99, #0f3ba5, #0d3db0, #063fbb, #0040c4, #0042cc, #0044d2, #0047d7, #0049db, #004adf, #004be1, #004be3, #004ce4, #004ce4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcSDNZJRxAiYZwAqEsysTjCjhNwA9Wr_vty_4`
- Page: https://grabient.com/kcSDNZJRxAiYZwAqEsysTjCjhNwA9Wr_vty_4?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: vivid, dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 2.1 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 | `#222f01` | `oklch(28.35% 0.0703 125.16)` | Blind Forest | white, 14.2 to 1 |
| 2 | `#213001` | `oklch(28.47% 0.0716 126.08)` | Blind Forest | white, 14.1 to 1 |
| 3 | `#203100` | `oklch(28.65% 0.0737 127.42)` | Blind Forest | white, 14 to 1 |
| 4 | `#1f3200` | `oklch(28.85% 0.0757 128.86)` | Blind Forest | white, 13.9 to 1 |
| 5 | `#1e3201` | `oklch(29.05% 0.0770 130.07)` | Blind Forest | white, 13.8 to 1 |
| 6 | `#1f3301` | `oklch(29.22% 0.0770 130.01)` | Blind Forest | white, 13.7 to 1 |
| 7 | `#223200` | `oklch(29.32% 0.0755 126.85)` | Blind Forest | white, 13.7 to 1 |
| 8 | `#253200` | `oklch(29.43% 0.0729 123.77)` | Blind Forest | white, 13.6 to 1 |
| 9 | `#253301` | `oklch(29.62% 0.0726 124.64)` | Blind Forest | white, 13.5 to 1 |
| 10 | `#1f350c` | `oklch(29.99% 0.0698 133.40)` | Blind Forest | white, 13.3 to 1 |
| 11 | `#0f3820` | `oklch(30.51% 0.0631 153.85)` | Off-Road Green | white, 13 to 1 |
| 12 | `#033933` | `oklch(31.15% 0.0542 181.95)` | Night Turquoise | white, 12.7 to 1 |
| 13 | `#0d3940` | `oklch(31.91% 0.0479 211.06)` | Ghostlands Coal | white, 12.5 to 1 |
| 14 | `#19394a` | `oklch(32.80% 0.0488 234.54)` | Subterranean River | white, 12.1 to 1 |
| 15 | `#1b3a56` | `oklch(33.83% 0.0614 247.95)` | Gibraltar Sea | white, 11.7 to 1 |
| 16 | `#183b66` | `oklch(35.03% 0.0847 255.07)` | Navy Peony | white, 11.3 to 1 |
| 17 | `#123c78` | `oklch(36.34% 0.1129 258.35)` | Azure Dragon | white, 10.8 to 1 |
| 18 | `#0a3c8a` | `oklch(37.67% 0.1401 260.03)` | Mystery Oceans | white, 10.3 to 1 |
| 19 | `#0c3b99` | `oklch(38.94% 0.1608 262.14)` | Amalfitan Azure | white, 9.9 to 1 |
| 20 | `#0f3ba5` | `oklch(40.23% 0.1766 263.36)` | Philippine Blue | white, 9.5 to 1 |
| 21 | `#0d3db0` | `oklch(41.53% 0.1898 263.37)` | Yuè Guāng Lán Blue | white, 9 to 1 |
| 22 | `#063fbb` | `oklch(42.78% 0.2014 262.86)` | Once in a Blue Moon | white, 8.6 to 1 |
| 23 | `#0040c4` | `oklch(43.94% 0.2121 262.53)` | Once in a Blue Moon | white, 8.2 to 1 |
| 24 | `#0042cc` | `oklch(45.00% 0.2189 262.63)` | Flying Fish Blue | white, 7.9 to 1 |
| 25 | `#0044d2` | `oklch(46.00% 0.2239 262.63)` | Flying Fish Blue | white, 7.6 to 1 |
| 26 | `#0047d7` | `oklch(46.91% 0.2277 262.60)` | Merchant Marine Blue | white, 7.3 to 1 |
| 27 | `#0049db` | `oklch(47.67% 0.2307 262.56)` | Merchant Marine Blue | white, 7 to 1 |
| 28 | `#004adf` | `oklch(48.26% 0.2334 262.55)` | Merchant Marine Blue | white, 6.9 to 1 |
| 29 | `#004be1` | `oklch(48.66% 0.2353 262.55)` | Merchant Marine Blue | white, 6.7 to 1 |
| 30 | `#004be3` | `oklch(48.92% 0.2365 262.55)` | Merchant Marine Blue | white, 6.7 to 1 |
| 31 | `#004ce4` | `oklch(49.08% 0.2373 262.55)` | Merchant Marine Blue | white, 6.6 to 1 |
| 32 | `#004ce4` | `oklch(49.22% 0.2379 262.55)` | Merchant Marine Blue | white, 6.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #222f01 0.0%, #213001 3.2%, #203100 6.5%, #1f3200 9.7%, #1e3201 12.9%, #1f3301 16.1%, #223200 19.4%, #253200 22.6%, #253301 25.8%, #1f350c 29.0%, #0f3820 32.3%, #033933 35.5%, #0d3940 38.7%, #19394a 41.9%, #1b3a56 45.2%, #183b66 48.4%, #123c78 51.6%, #0a3c8a 54.8%, #0c3b99 58.1%, #0f3ba5 61.3%, #0d3db0 64.5%, #063fbb 67.7%, #0040c4 71.0%, #0042cc 74.2%, #0044d2 77.4%, #0047d7 80.6%, #0049db 83.9%, #004adf 87.1%, #004be1 90.3%, #004be3 93.5%, #004ce4 96.8%, #004ce4 100.0%);
background: linear-gradient(135deg in oklch, oklch(28.35% 0.0703 125.16) 0.0%, oklch(28.47% 0.0716 126.08) 3.2%, oklch(28.65% 0.0737 127.42) 6.5%, oklch(28.85% 0.0757 128.86) 9.7%, oklch(29.05% 0.0770 130.07) 12.9%, oklch(29.22% 0.0770 130.01) 16.1%, oklch(29.32% 0.0755 126.85) 19.4%, oklch(29.43% 0.0729 123.77) 22.6%, oklch(29.62% 0.0726 124.64) 25.8%, oklch(29.99% 0.0698 133.40) 29.0%, oklch(30.51% 0.0631 153.85) 32.3%, oklch(31.15% 0.0542 181.95) 35.5%, oklch(31.91% 0.0479 211.06) 38.7%, oklch(32.80% 0.0488 234.54) 41.9%, oklch(33.83% 0.0614 247.95) 45.2%, oklch(35.03% 0.0847 255.07) 48.4%, oklch(36.34% 0.1129 258.35) 51.6%, oklch(37.67% 0.1401 260.03) 54.8%, oklch(38.94% 0.1608 262.14) 58.1%, oklch(40.23% 0.1766 263.36) 61.3%, oklch(41.53% 0.1898 263.37) 64.5%, oklch(42.78% 0.2014 262.86) 67.7%, oklch(43.94% 0.2121 262.53) 71.0%, oklch(45.00% 0.2189 262.63) 74.2%, oklch(46.00% 0.2239 262.63) 77.4%, oklch(46.91% 0.2277 262.60) 80.6%, oklch(47.67% 0.2307 262.56) 83.9%, oklch(48.26% 0.2334 262.55) 87.1%, oklch(48.66% 0.2353 262.55) 90.3%, oklch(48.92% 0.2365 262.55) 93.5%, oklch(49.08% 0.2373 262.55) 96.8%, oklch(49.22% 0.2379 262.55) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.283 | 0.07 | 125.2 |
| 2 | 0.291 | 0.077 | 130.4 |
| 3 | 0.299 | 0.07 | 131.5 |
| 4 | 0.331 | 0.051 | 239.3 |
| 5 | 0.386 | 0.156 | 261.5 |
| 6 | 0.441 | 0.214 | 262.5 |
| 7 | 0.48 | 0.249 | 262.5 |
| 8 | 0.492 | 0.255 | 262.5 |

## In these collections

- [Olive color palette](https://grabient.com/olive-color-palette)
- [Indigo yukata](https://grabient.com/indigo-yukata)
- [Green multicolor gradients](https://grabient.com/green-multicolor-gradients)

## Other forms

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