# Creamsicle Ember Bands

Five discrete bands move through orange #f8c17b, red #4a251b, orange #f5d0a1, red #e96d1d, and orange #ffad4e. 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: Analogous tan, brown and orange angular swatches
- Seed: `kW104zp5W7m-bRHVv7zZzVCQ`
- Page: https://grabient.com/kW104zp5W7m-bRHVv7zZzVCQ?style=angularSwatches&steps=5&angle=30
- Drawn as: angular swatches, 5 steps, 30 degrees
- Kinds: vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.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 | `#f8c17b` | `oklch(84.65% 0.1075 72.42)` | Zing | black, 12.9 to 1 |
| 2 | `#4a251b` | `oklch(31.10% 0.0593 35.44)` | Wild Brown | white, 13.4 to 1 |
| 3 | `#f5d0a1` | `oklch(87.80% 0.0744 73.48)` | Tequila | black, 14.4 to 1 |
| 4 | `#e96d1d` | `oklch(67.32% 0.1750 47.06)` | Epicurean Orange | black, 6.6 to 1 |
| 5 | `#ffad4e` | `oklch(81.10% 0.1451 67.14)` | Alajuela Toad | black, 11.3 to 1 |

## CSS

```css
background: conic-gradient(from 30deg, #f8c17b 0.000% 20.000%, #4a251b 20.000% 40.000%, #f5d0a1 40.000% 60.000%, #e96d1d 60.000% 80.000%, #ffad4e 80.000% 100.000%);
background: conic-gradient(from 30deg, oklch(84.65% 0.1075 72.42) 0.000% 20.000%, oklch(31.10% 0.0593 35.44) 20.000% 40.000%, oklch(87.80% 0.0744 73.48) 40.000% 60.000%, oklch(67.32% 0.1750 47.06) 60.000% 80.000%, oklch(81.10% 0.1451 67.14) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.846 | 0.107 | 72.4 |
| 2 | 0.311 | 0.059 | 35.4 |
| 3 | 0.878 | 0.074 | 73.5 |
| 4 | 0.673 | 0.175 | 47.1 |
| 5 | 0.811 | 0.146 | 67.1 |

## In these collections

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

## Other forms

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