# Blue trail gear and warm sand

Medium blue, deep navy, warm ochre sand, and pale beige meet in four angular swatches. The darker equipment colors balance two lighter earth tones, creating a restrained outdoor palette with clear boundaries and strong contrast. Use these colors for hiking lookbooks, adventure product packaging, and travel editorial layouts.

- Also called: Blue, navy and tan angular swatches
- Seed: `kUeli1LB8_9klVJqm0FA`
- Page: https://grabient.com/kUeli1LB8_9klVJqm0FA?style=angularSwatches&steps=4&angle=270
- Drawn as: angular swatches, 4 steps, 270 degrees
- Kinds: dark center
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.9 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 | `#265ea0` | `oklch(48.03% 0.1213 254.53)` | Drakenhof Nightshade | white, 6.5 to 1 |
| 2 | `#163a65` | `oklch(34.65% 0.0854 254.53)` | Navy Peony | white, 11.4 to 1 |
| 3 | `#c89355` | `oklch(70.08% 0.1020 68.90)` | Honey Yellow | black, 7.7 to 1 |
| 4 | `#e4c693` | `oklch(83.86% 0.0744 80.52)` | Venice Square | black, 12.7 to 1 |

## CSS

```css
background: conic-gradient(from 270deg, #265ea0 0.000% 25.000%, #163a65 25.000% 50.000%, #c89355 50.000% 75.000%, #e4c693 75.000% 100.000%);
background: conic-gradient(from 270deg, oklch(48.03% 0.1213 254.53) 0.000% 25.000%, oklch(34.65% 0.0854 254.53) 25.000% 50.000%, oklch(70.08% 0.1020 68.90) 50.000% 75.000%, oklch(83.86% 0.0744 80.52) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.48 | 0.121 | 254.5 |
| 2 | 0.346 | 0.085 | 254.5 |
| 3 | 0.701 | 0.102 | 428.9 |
| 4 | 0.839 | 0.074 | 440.5 |

## In these collections

- [Darecations](https://grabient.com/darecations)

## Other forms

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