# Ochre color palette

The Ochre color palette brings together gold, orange, and pale orange. The colors span a moderate lightness range, combining moderate color with clear contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is orange, and its lightest tone is pale orange.

- Also called: Monochrome tan, brown and beige linear swatches
- Seed: `kUuEs8bZvAUIbvv2kUEg`
- Page: https://grabient.com/kUuEs8bZvAUIbvv2kUEg?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: dark center, pastel, warm, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 4.5 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 | `#c4a155` | `oklch(72.44% 0.1033 84.38)` | Sauterne | black, 8.5 to 1 |
| 2 | `#e7cf98` | `oklch(86.22% 0.0758 87.55)` | Honeycomb Glow | black, 13.8 to 1 |
| 3 | `#806433` | `oklch(51.97% 0.0758 79.09)` | Dirt Brown | white, 5.5 to 1 |
| 4 | `#f5e8c6` | `oklch(93.31% 0.0469 89.66)` | Summer Sunshine | black, 17.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #c4a155 0.000% 25.000%, #e7cf98 25.000% 50.000%, #806433 50.000% 75.000%, #f5e8c6 75.000% 100.000%);
background: linear-gradient(90deg, oklch(72.44% 0.1033 84.38) 0.000% 25.000%, oklch(86.22% 0.0758 87.55) 25.000% 50.000%, oklch(51.97% 0.0758 79.09) 50.000% 75.000%, oklch(93.31% 0.0469 89.66) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.724 | 0.103 | 84.4 |
| 2 | 0.862 | 0.076 | 87.5 |
| 3 | 0.52 | 0.076 | 79.1 |
| 4 | 0.933 | 0.047 | 89.7 |

## In these collections

- [Natural swatches](https://grabient.com/natural-swatches)
- [Gold swatches](https://grabient.com/gold-swatches)

## Other forms

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