# Ochre color palette

The Ochre color palette brings together orange, pale yellow, and green. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is green, and its lightest tone is pale yellow.

- Also called: Brown, gray and dark green angular swatches
- Seed: `kSqkk684lCKydQi`
- Page: https://grabient.com/kSqkk684lCKydQi?style=angularSwatches&steps=3&angle=135
- Drawn as: angular swatches, 3 steps, 135 degrees
- Kinds: light center, pastel
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#b48f47` | `oklch(66.93% 0.1006 82.27)` | Venetian Gold | black, 6.9 to 1 |
| 2 | `#e4e2cf` | `oklch(90.94% 0.0248 101.29)` | Au Natural | black, 16 to 1 |
| 3 | `#354004` | `oklch(35.04% 0.0799 120.31)` | Dark Olive | white, 11 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #b48f47 0.000% 33.333%, #e4e2cf 33.333% 66.667%, #354004 66.667% 100.000%);
background: conic-gradient(from 135deg, oklch(66.93% 0.1006 82.27) 0.000% 33.333%, oklch(90.94% 0.0248 101.29) 33.333% 66.667%, oklch(35.04% 0.0799 120.31) 66.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.669 | 0.101 | 82.3 |
| 2 | 0.909 | 0.025 | 101.3 |
| 3 | 0.35 | 0.08 | 120.3 |

## In these collections

- [Desert swatches](https://grabient.com/desert-swatches)
- [Fall swatches](https://grabient.com/fall-swatches)

## Other forms

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