# Terracotta, gray and sage amber beer hall

The Terracotta, gray and sage amber beer hall brings together orange, red, gray, teal, and light green. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is red, and its lightest tone is light green.

- Also called: Analogous orange, brown and gray linear swatches
- Seed: `kYs2QtS6s-EARvNCiLFUJA3l4Wua`
- Page: https://grabient.com/kYs2QtS6s-EARvNCiLFUJA3l4Wua?style=linearSwatches&steps=6&angle=0
- Drawn as: linear swatches, 6 steps, 0 degrees
- Kinds: muted
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.6 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 | `#db8b35` | `oklch(70.47% 0.1378 63.28)` | Status Bronze | black, 7.7 to 1 |
| 2 | `#b7663b` | `oklch(59.45% 0.1185 47.43)` | Mincemeat | black, 4.9 to 1 |
| 3 | `#7e5a58` | `oklch(50.39% 0.0482 21.01)` | Musk Deer | white, 6 to 1 |
| 4 | `#626b78` | `oklch(52.36% 0.0234 257.37)` | Noctis | white, 5.4 to 1 |
| 5 | `#6c938e` | `oklch(63.39% 0.0441 186.57)` | Pool Tide | black, 6.2 to 1 |
| 6 | `#9bb48c` | `oklch(74.02% 0.0620 133.73)` | Basilisk | black, 9.2 to 1 |

## CSS

```css
background: linear-gradient(0deg, #db8b35 0.000% 16.667%, #b7663b 16.667% 33.333%, #7e5a58 33.333% 50.000%, #626b78 50.000% 66.667%, #6c938e 66.667% 83.333%, #9bb48c 83.333% 100.000%);
background: linear-gradient(0deg, oklch(70.47% 0.1378 63.28) 0.000% 16.667%, oklch(59.45% 0.1185 47.43) 16.667% 33.333%, oklch(50.39% 0.0482 21.01) 33.333% 50.000%, oklch(52.36% 0.0234 257.37) 50.000% 66.667%, oklch(63.39% 0.0441 186.57) 66.667% 83.333%, oklch(74.02% 0.0620 133.73) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.705 | 0.138 | 63.3 |
| 2 | 0.594 | 0.119 | 47.4 |
| 3 | 0.504 | 0.048 | 21 |
| 4 | 0.524 | 0.023 | -102.6 |
| 5 | 0.634 | 0.044 | -173.4 |
| 6 | 0.74 | 0.062 | -226.3 |

## In these collections

- [Amber beer hall](https://grabient.com/amber-beer-hall)

## Other forms

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