# Terracotta and gold color palette

The Terracotta and gold color palette brings together orange, gold, and yellow. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is yellow, and its lightest tone is gold.

- Also called: Monochrome brown and tan linear swatches
- Seed: `kWmloq4apBumgwXfmMESJW_o`
- Page: https://grabient.com/kWmloq4apBumgwXfmMESJW_o?style=linearSwatches&steps=6
- Drawn as: linear swatches, 6 steps, 90 degrees
- Kinds: pastel, warm, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.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 | `#b76e28` | `oklch(60.63% 0.1240 59.77)` | Brown Alpaca | black, 5.2 to 1 |
| 2 | `#d99d4f` | `oklch(73.91% 0.1187 71.50)` | Deep Bamboo Yellow | black, 8.9 to 1 |
| 3 | `#e4be76` | `oklch(82.04% 0.1006 82.50)` | Cloudy Sunset | black, 11.9 to 1 |
| 4 | `#d5c186` | `oklch(81.43% 0.0798 91.83)` | Wine Yellow | black, 11.8 to 1 |
| 5 | `#b0a576` | `oklch(71.94% 0.0649 97.04)` | Geek Chic | black, 8.4 to 1 |
| 6 | `#83774f` | `oklch(57.09% 0.0593 94.64)` | Olive Ochre | black, 4.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #b76e28 0.000% 16.667%, #d99d4f 16.667% 33.333%, #e4be76 33.333% 50.000%, #d5c186 50.000% 66.667%, #b0a576 66.667% 83.333%, #83774f 83.333% 100.000%);
background: linear-gradient(90deg, oklch(60.63% 0.1240 59.77) 0.000% 16.667%, oklch(73.91% 0.1187 71.50) 16.667% 33.333%, oklch(82.04% 0.1006 82.50) 33.333% 50.000%, oklch(81.43% 0.0798 91.83) 50.000% 66.667%, oklch(71.94% 0.0649 97.04) 66.667% 83.333%, oklch(57.09% 0.0593 94.64) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.606 | 0.124 | 59.8 |
| 2 | 0.768 | 0.116 | 74.6 |
| 3 | 0.831 | 0.09 | 87.2 |
| 4 | 0.752 | 0.068 | 96.8 |
| 5 | 0.571 | 0.059 | 94.6 |

## In these collections

- [Wood color palette](https://grabient.com/wood-color-palette)
- [Amber beer hall](https://grabient.com/amber-beer-hall)

## Other forms

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