# Complementary dark green to blue linear gradient

Complementary dark green to blue linear gradient with 10 colors: #313101, #303301, #343300, #343504, #1e3a3d, #283b60, #203a9e, #1e3dc8, #1542e7, #1642fc. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaTS9OJ5lAiiYP2rDM_srxCbtUv7AYz_g`
- Page: https://grabient.com/kaTS9OJ5lAiiYP2rDM_srxCbtUv7AYz_g?steps=10&angle=135
- Drawn as: linear gradient, 10 steps, 135 degrees
- Kinds: vivid, dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 2 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 | `#313101` | `oklch(30.31% 0.0648 109.69)` | Wasabi Nori | white, 13.3 to 1 |
| 2 | `#303301` | `oklch(30.81% 0.0679 113.72)` | Wasabi Nori | white, 13.1 to 1 |
| 3 | `#343300` | `oklch(31.32% 0.0680 109.08)` | Wasabi Nori | white, 12.8 to 1 |
| 4 | `#343504` | `oklch(31.89% 0.0661 110.74)` | Wasabi Nori | white, 12.6 to 1 |
| 5 | `#1e3a3d` | `oklch(32.87% 0.0340 204.21)` | Nordic | white, 12.1 to 1 |
| 6 | `#283b60` | `oklch(35.51% 0.0684 262.37)` | Midnight Sleigh | white, 11.1 to 1 |
| 7 | `#203a9e` | `oklch(39.76% 0.1654 267.14)` | North Star Blue | white, 9.7 to 1 |
| 8 | `#1e3dc8` | `oklch(44.40% 0.2148 266.44)` | Third Eye Chakra | white, 8.1 to 1 |
| 9 | `#1542e7` | `oklch(48.12% 0.2497 264.87)` | Scuff Blue | white, 7 to 1 |
| 10 | `#1642fc` | `oklch(50.39% 0.2728 265.03)` | Rare Blue | white, 6.5 to 1 |

## CSS

```css
background: linear-gradient(135deg, #313101 0.0%, #303301 11.1%, #343300 22.2%, #343504 33.3%, #1e3a3d 44.4%, #283b60 55.6%, #203a9e 66.7%, #1e3dc8 77.8%, #1542e7 88.9%, #1642fc 100.0%);
background: linear-gradient(135deg in oklch, oklch(30.31% 0.0648 109.69) 0.0%, oklch(30.81% 0.0679 113.72) 11.1%, oklch(31.32% 0.0680 109.08) 22.2%, oklch(31.89% 0.0661 110.74) 33.3%, oklch(32.87% 0.0340 204.21) 44.4%, oklch(35.51% 0.0684 262.37) 55.6%, oklch(39.76% 0.1654 267.14) 66.7%, oklch(44.40% 0.2148 266.44) 77.8%, oklch(48.12% 0.2497 264.87) 88.9%, oklch(50.39% 0.2728 265.03) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.303 | 0.065 | 109.7 |
| 2 | 0.311 | 0.069 | 115 |
| 3 | 0.319 | 0.066 | 110.7 |
| 4 | 0.339 | 0.034 | 246 |
| 5 | 0.398 | 0.165 | 267.1 |
| 6 | 0.465 | 0.233 | 265 |
| 7 | 0.504 | 0.273 | 265 |

## In these collections

- [Yellow and blue gradients](https://grabient.com/yellow-and-blue-gradients)

## Other forms

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