# Midnight Bark Forest Trail

This diagonal gradient moves from midnight blue through deep pine and moss, turns into bark brown and muted bronze, then returns to shadowed green. The restrained route feels like a forest floor at dusk, with enough dark area for light text and warmer detail for emphasis. Use it for woodland posters, trail guides, book covers, or atmospheric environmental graphics.

- Also called: Tritone navy, brown and dark green linear gradient
- Seed: `kUQCWxqRQ_LyVqqlkU2A`
- Page: https://grabient.com/kUQCWxqRQ_LyVqqlkU2A?steps=32&angle=300
- Drawn as: linear gradient, 32 steps, 300 degrees
- Kinds: dark
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.3 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 | `#0c2339` | `oklch(25.20% 0.0510 249.61)` | Celestial Canvas | white, 15.8 to 1 |
| 2 | `#0d243b` | `oklch(25.57% 0.0512 249.98)` | Celestial Canvas | white, 15.7 to 1 |
| 3 | `#0f253c` | `oklch(26.00% 0.0515 251.40)` | Celestial Canvas | white, 15.5 to 1 |
| 4 | `#12263e` | `oklch(26.49% 0.0519 253.42)` | Cool Balaclavas Are Forever | white, 15.3 to 1 |
| 5 | `#142740` | `oklch(27.05% 0.0523 255.57)` | Eternal Darkness | white, 15 to 1 |
| 6 | `#172842` | `oklch(27.67% 0.0527 257.42)` | Eternal Darkness | white, 14.7 to 1 |
| 7 | `#192a44` | `oklch(28.37% 0.0532 258.50)` | Eternal Darkness | white, 14.4 to 1 |
| 8 | `#1a2c46` | `oklch(29.14% 0.0536 258.37)` | Crow Black Blue | white, 14 to 1 |
| 9 | `#1b2e49` | `oklch(29.98% 0.0541 256.55)` | Manganese Black | white, 13.6 to 1 |
| 10 | `#1b314b` | `oklch(30.91% 0.0546 252.61)` | Manganese Black | white, 13.1 to 1 |
| 11 | `#19354d` | `oklch(31.93% 0.0550 246.09)` | Sea of Stars | white, 12.6 to 1 |
| 12 | `#153a4e` | `oklch(33.11% 0.0554 236.00)` | Gibraltar Sea | white, 12 to 1 |
| 13 | `#0e404e` | `oklch(34.66% 0.0560 220.91)` | Cold and Dark | white, 11.2 to 1 |
| 14 | `#0d474b` | `oklch(36.49% 0.0566 201.93)` | Incubi Darkness | white, 10.3 to 1 |
| 15 | `#194e45` | `oklch(38.48% 0.0573 180.35)` | Swedish Green | white, 9.5 to 1 |
| 16 | `#2c533d` | `oklch(40.53% 0.0579 157.42)` | Green Stain | white, 8.7 to 1 |
| 17 | `#415634` | `oklch(42.51% 0.0585 134.42)` | Zen Garden Olive | white, 8 to 1 |
| 18 | `#54572f` | `oklch(44.32% 0.0590 112.63)` | Soldier Green | white, 7.5 to 1 |
| 19 | `#63572f` | `oklch(45.85% 0.0594 93.32)` | Uguisu Brown | white, 7.1 to 1 |
| 20 | `#6d5733` | `oklch(46.97% 0.0595 77.76)` | Bulrush | white, 6.8 to 1 |
| 21 | `#735637` | `oklch(47.58% 0.0595 67.23)` | Oak Barrel | white, 6.7 to 1 |
| 22 | `#745539` | `oklch(47.55% 0.0591 62.94)` | Black Jasmine Rice | white, 6.7 to 1 |
| 23 | `#715336` | `oklch(46.81% 0.0584 64.89)` | Rustic Cabin | white, 6.9 to 1 |
| 24 | `#6a5132` | `oklch(45.46% 0.0573 71.95)` | Wild Chocolate | white, 7.3 to 1 |
| 25 | `#614f2c` | `oklch(43.63% 0.0560 83.02)` | Jungle Beat | white, 7.9 to 1 |
| 26 | `#544c28` | `oklch(41.48% 0.0546 96.96)` | Codium Fragile | white, 8.6 to 1 |
| 27 | `#464826` | `oklch(39.15% 0.0531 112.68)` | Nori Seaweed Green | white, 9.4 to 1 |
| 28 | `#374427` | `oklch(36.76% 0.0515 129.05)` | Deep Seaweed | white, 10.3 to 1 |
| 29 | `#284029` | `oklch(34.46% 0.0500 144.97)` | English Holly | white, 11.3 to 1 |
| 30 | `#1b3b2b` | `oklch(32.40% 0.0487 159.31)` | Palm Green | white, 12.2 to 1 |
| 31 | `#11372c` | `oklch(30.71% 0.0476 170.96)` | Cardin Green | white, 13 to 1 |
| 32 | `#0b342d` | `oklch(29.53% 0.0469 178.81)` | Fence Green | white, 13.5 to 1 |

## CSS

```css
background: linear-gradient(300deg, #0c2339 0.0%, #0d243b 3.2%, #0f253c 6.5%, #12263e 9.7%, #142740 12.9%, #172842 16.1%, #192a44 19.4%, #1a2c46 22.6%, #1b2e49 25.8%, #1b314b 29.0%, #19354d 32.3%, #153a4e 35.5%, #0e404e 38.7%, #0d474b 41.9%, #194e45 45.2%, #2c533d 48.4%, #415634 51.6%, #54572f 54.8%, #63572f 58.1%, #6d5733 61.3%, #735637 64.5%, #745539 67.7%, #715336 71.0%, #6a5132 74.2%, #614f2c 77.4%, #544c28 80.6%, #464826 83.9%, #374427 87.1%, #284029 90.3%, #1b3b2b 93.5%, #11372c 96.8%, #0b342d 100.0%);
background: linear-gradient(300deg in oklch, oklch(25.20% 0.0510 249.61) 0.0%, oklch(25.57% 0.0512 249.98) 3.2%, oklch(26.00% 0.0515 251.40) 6.5%, oklch(26.49% 0.0519 253.42) 9.7%, oklch(27.05% 0.0523 255.57) 12.9%, oklch(27.67% 0.0527 257.42) 16.1%, oklch(28.37% 0.0532 258.50) 19.4%, oklch(29.14% 0.0536 258.37) 22.6%, oklch(29.98% 0.0541 256.55) 25.8%, oklch(30.91% 0.0546 252.61) 29.0%, oklch(31.93% 0.0550 246.09) 32.3%, oklch(33.11% 0.0554 236.00) 35.5%, oklch(34.66% 0.0560 220.91) 38.7%, oklch(36.49% 0.0566 201.93) 41.9%, oklch(38.48% 0.0573 180.35) 45.2%, oklch(40.53% 0.0579 157.42) 48.4%, oklch(42.51% 0.0585 134.42) 51.6%, oklch(44.32% 0.0590 112.63) 54.8%, oklch(45.85% 0.0594 93.32) 58.1%, oklch(46.97% 0.0595 77.76) 61.3%, oklch(47.58% 0.0595 67.23) 64.5%, oklch(47.55% 0.0591 62.94) 67.7%, oklch(46.81% 0.0584 64.89) 71.0%, oklch(45.46% 0.0573 71.95) 74.2%, oklch(43.63% 0.0560 83.02) 77.4%, oklch(41.48% 0.0546 96.96) 80.6%, oklch(39.15% 0.0531 112.68) 83.9%, oklch(36.76% 0.0515 129.05) 87.1%, oklch(34.46% 0.0500 144.97) 90.3%, oklch(32.40% 0.0487 159.31) 93.5%, oklch(30.71% 0.0476 170.96) 96.8%, oklch(29.53% 0.0469 178.81) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.252 | 0.051 | 249.6 |
| 2 | 0.323 | 0.055 | 243.3 |
| 3 | 0.476 | 0.059 | 63.6 |
| 4 | 0.295 | 0.047 | 178.8 |

## In these collections

- [Forest gradients](https://grabient.com/forest-gradients)

## Other forms

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