# Tangerine Umber Bands

Five discrete bands move through red #e96d1a, orange #ffae4c, red #4a251b, orange #f7c27b, and red #b85a31. The five fixed bands provide warm roles for food packaging, seasonal graphics, or charts that need orange variation with reliable dark and pale anchors. The stated order preserves the native composition.

- Also called: Vivid orange, tan and brown linear swatches
- Seed: `kWq38iZzVCSeVvDrp0RSTC8Q`
- Page: https://grabient.com/kWq38iZzVCSeVvDrp0RSTC8Q?style=linearSwatches&steps=5&angle=240
- Drawn as: linear swatches, 5 steps, 240 degrees
- Kinds: dark center, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.2 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 | `#e96d1a` | `oklch(67.32% 0.1750 47.81)` | Epicurean Orange | black, 6.6 to 1 |
| 2 | `#ffae4c` | `oklch(81.10% 0.1461 67.89)` | Alajuela Toad | black, 11.3 to 1 |
| 3 | `#4a251b` | `oklch(31.10% 0.0593 36.19)` | Wild Brown | white, 13.4 to 1 |
| 4 | `#f7c27b` | `oklch(84.65% 0.1075 73.17)` | Zing | black, 12.9 to 1 |
| 5 | `#b85a31` | `oklch(57.48% 0.1337 42.53)` | Gold Varnish Brown | white, 4.6 to 1 |

## CSS

```css
background: linear-gradient(240deg, #e96d1a 0.000% 20.000%, #ffae4c 20.000% 40.000%, #4a251b 40.000% 60.000%, #f7c27b 60.000% 80.000%, #b85a31 80.000% 100.000%);
background: linear-gradient(240deg, oklch(67.32% 0.1750 47.81) 0.000% 20.000%, oklch(81.10% 0.1461 67.89) 20.000% 40.000%, oklch(31.10% 0.0593 36.19) 40.000% 60.000%, oklch(84.65% 0.1075 73.17) 60.000% 80.000%, oklch(57.48% 0.1337 42.53) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.673 | 0.175 | 47.8 |
| 2 | 0.811 | 0.146 | 67.9 |
| 3 | 0.311 | 0.059 | 36.2 |
| 4 | 0.846 | 0.107 | 73.2 |
| 5 | 0.575 | 0.134 | 42.5 |

## In these collections

- [Orange swatches](https://grabient.com/orange-swatches)

## Other forms

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