# Navy and sage spring thunder over veld

The Navy and sage spring thunder over veld brings together dark blue, magenta, red, orange, yellow, and green. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits seasonal campaigns and event graphics. Its darkest tone is dark blue, and its lightest tone is orange.

- Also called: Complementary navy, brown and gray linear swatches
- Seed: `kYRhu-rg9I8MZxjRnUM0ZdEMWRRs`
- Page: https://grabient.com/kYRhu-rg9I8MZxjRnUM0ZdEMWRRs?style=linearSwatches&steps=6&angle=180
- Drawn as: linear swatches, 6 steps, 180 degrees
- Kinds: light center, muted
- Hues: wide
- Contrast of its darkest and lightest colors: 4.4 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 | `#20273a` | `oklch(27.56% 0.0372 267.89)` | Midnight Express | white, 14.8 to 1 |
| 2 | `#4d3543` | `oklch(36.22% 0.0413 343.98)` | Velvet Touch | white, 10.9 to 1 |
| 3 | `#8f5c4e` | `oklch(52.76% 0.0703 36.81)` | Red Curry | white, 5.4 to 1 |
| 4 | `#af8258` | `oklch(64.17% 0.0799 64.29)` | Circus Peanut | black, 6.1 to 1 |
| 5 | `#958e61` | `oklch(64.17% 0.0634 100.22)` | Nile Reed | black, 6.3 to 1 |
| 6 | `#5a7967` | `oklch(54.72% 0.0469 158.34)` | Dark Sorrel | white, 4.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #20273a 0.000% 16.667%, #4d3543 16.667% 33.333%, #8f5c4e 33.333% 50.000%, #af8258 50.000% 66.667%, #958e61 66.667% 83.333%, #5a7967 83.333% 100.000%);
background: linear-gradient(180deg, oklch(27.56% 0.0372 267.89) 0.000% 16.667%, oklch(36.22% 0.0413 343.98) 16.667% 33.333%, oklch(52.76% 0.0703 36.81) 33.333% 50.000%, oklch(64.17% 0.0799 64.29) 50.000% 66.667%, oklch(64.17% 0.0634 100.22) 66.667% 83.333%, oklch(54.72% 0.0469 158.34) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.276 | 0.037 | 267.9 |
| 2 | 0.362 | 0.041 | 344 |
| 3 | 0.528 | 0.07 | 396.8 |
| 4 | 0.642 | 0.08 | 424.3 |
| 5 | 0.642 | 0.063 | 460.2 |
| 6 | 0.547 | 0.047 | 518.3 |

## In these collections

- [Spring thunder over veld](https://grabient.com/spring-thunder-over-veld)

## Other forms

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