# Navy cranberry fir winter bands

From the upper left toward the lower right, five diagonal bands shift from midnight navy to cranberry, fir green, pale sage, and snow cream. The dark cool anchor and berry accent give the winter route depth, while the two softened botanical lights keep it crisp rather than severe. Use it for seasonal packaging, cold-weather editorial panels, or winter event graphics.

- Also called: White, gray, maroon and navy linear swatches
- Seed: `kW9gY8bAhFj8SwyxIKzoZA0Y`
- Page: https://grabient.com/kW9gY8bAhFj8SwyxIKzoZA0Y?style=linearSwatches&steps=5&angle=315
- Drawn as: linear swatches, 5 steps, 315 degrees
- Kinds: light to dark, muted
- Hues: triadic
- Contrast of its darkest and lightest colors: 14 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 | `#f7f4ee` | `oklch(96.85% 0.0083 84.38)` | The Speed of Light | black, 19.1 to 1 |
| 2 | `#c9d1c2` | `oklch(85.04% 0.0220 131.93)` | White Granite | black, 13.3 to 1 |
| 3 | `#486b58` | `oklch(49.61% 0.0510 159.40)` | Kale Green | white, 5.9 to 1 |
| 4 | `#692d43` | `oklch(38.58% 0.0896 358.78)` | Cherry Juice Red | white, 10.2 to 1 |
| 5 | `#19253a` | `oklch(26.38% 0.0441 261.56)` | Cool Balaclavas Are Forever | white, 15.3 to 1 |

## CSS

```css
background: linear-gradient(315deg, #f7f4ee 0.000% 20.000%, #c9d1c2 20.000% 40.000%, #486b58 40.000% 60.000%, #692d43 60.000% 80.000%, #19253a 80.000% 100.000%);
background: linear-gradient(315deg, oklch(96.85% 0.0083 84.38) 0.000% 20.000%, oklch(85.04% 0.0220 131.93) 20.000% 40.000%, oklch(49.61% 0.0510 159.40) 40.000% 60.000%, oklch(38.58% 0.0896 358.78) 60.000% 80.000%, oklch(26.38% 0.0441 261.56) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.008 | 84.4 |
| 2 | 0.85 | 0.022 | 131.9 |
| 3 | 0.496 | 0.051 | 159.4 |
| 4 | 0.386 | 0.09 | -1.2 |
| 5 | 0.264 | 0.044 | -98.4 |

## In these collections

- [Winter](https://grabient.com/winter)

## Other forms

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