# Brown, orange, blue and purple linear gradient

Brown, orange, blue and purple linear gradient with 6 colors: #a2511e, #d5af5d, #d1962c, #0f4084, #3c1f15, #1b6099. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYhlojYihENqxPuwrarIxHQryprg`
- Page: https://grabient.com/kYhlojYihENqxPuwrarIxHQryprg?steps=6&angle=135
- Drawn as: linear gradient, 6 steps, 135 degrees
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 7.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 | `#a2511e` | `oklch(52.76% 0.1240 49.22)` | Hamburger | white, 5.5 to 1 |
| 2 | `#d5af5d` | `oklch(77.17% 0.1102 85.15)` | Sell Gold | black, 10.1 to 1 |
| 3 | `#d1962c` | `oklch(71.26% 0.1350 76.69)` | Golden Pheasant | black, 8 to 1 |
| 4 | `#0f4084` | `oklch(38.19% 0.1254 258.10)` | Bracing Blue | white, 10 to 1 |
| 5 | `#3c1f15` | `oklch(27.56% 0.0482 39.71)` | Délicieux au Chocolat | white, 15 to 1 |
| 6 | `#1b6099` | `oklch(47.64% 0.1144 248.59)` | Lapis Lazuli Blue | white, 6.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #a2511e 0.0%, #d5af5d 20.0%, #d1962c 40.0%, #0f4084 60.0%, #3c1f15 80.0%, #1b6099 100.0%);
background: linear-gradient(135deg in oklch, oklch(52.76% 0.1240 49.22) 0.0%, oklch(77.17% 0.1102 85.15) 20.0%, oklch(71.26% 0.1350 76.69) 40.0%, oklch(38.19% 0.1254 258.10) 60.0%, oklch(27.56% 0.0482 39.71) 80.0%, oklch(47.64% 0.1144 248.59) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.528 | 0.124 | 49.2 |
| 2 | 0.772 | 0.11 | 85.1 |
| 3 | 0.713 | 0.135 | 76.7 |
| 4 | 0.382 | 0.125 | -101.9 |
| 5 | 0.276 | 0.048 | 39.7 |
| 6 | 0.476 | 0.114 | -111.4 |

## In these collections

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

## Other forms

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