# Beige, brown, purple and light blue linear gradient

Beige, brown, purple and light blue linear gradient with 7 colors: #f8f3d5, #cfaa75, #ab5a23, #9d4800, #b3472e, #ad8dca, #b4d4e1. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kU9B1Gxq26MS1PhsDiug`
- Page: https://grabient.com/kU9B1Gxq26MS1PhsDiug
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.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 | `#f8f3d5` | `oklch(96.06% 0.0400 99.14)` | French 75 | black, 18.7 to 1 |
| 2 | `#cfaa75` | `oklch(75.89% 0.0814 75.83)` | Golden Age | black, 9.6 to 1 |
| 3 | `#ab5a23` | `oklch(55.51% 0.1254 50.53)` | Caramelised Maple | white, 4.9 to 1 |
| 4 | `#9d4800` | `oklch(50.25% 0.1324 50.22)` | Oregon | white, 6.2 to 1 |
| 5 | `#b3472e` | `oklch(53.94% 0.1461 34.68)` | Crimson Boy | white, 5.4 to 1 |
| 6 | `#ad8dca` | `oklch(69.39% 0.0936 308.09)` | Fleur-De-Lis | black, 7.4 to 1 |
| 7 | `#b4d4e1` | `oklch(85.04% 0.0386 223.49)` | Foamy Surf | black, 13.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f8f3d5 0.0%, #cfaa75 16.7%, #ab5a23 33.3%, #9d4800 50.0%, #b3472e 66.7%, #ad8dca 83.3%, #b4d4e1 100.0%);
background: linear-gradient(90deg in oklch, oklch(96.06% 0.0400 99.14) 0.0%, oklch(75.89% 0.0814 75.83) 16.7%, oklch(55.51% 0.1254 50.53) 33.3%, oklch(50.25% 0.1324 50.22) 50.0%, oklch(53.94% 0.1461 34.68) 66.7%, oklch(69.39% 0.0936 308.09) 83.3%, oklch(85.04% 0.0386 223.49) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.04 | 99.1 |
| 2 | 0.555 | 0.125 | 50.5 |
| 3 | 0.539 | 0.146 | 34.7 |
| 4 | 0.85 | 0.039 | -136.5 |

## In these collections

- [Oktoberfest](https://grabient.com/oktoberfest)

## Other forms

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