# Analogous brown to peach linear gradient

Analogous brown to peach linear gradient with 7 colors: #782d15, #953a17, #c04d18, #e4692a, #f89059, #ffbb94, #ffd8c1. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSZlAbVD3AvOZwO`
- Page: https://grabient.com/kSZlAbVD3AvOZwO?angle=135
- Drawn as: linear gradient, 7 steps, 135 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- 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 | `#782d15` | `oklch(40.16% 0.1102 37.97)` | Drip Coffee | white, 9.6 to 1 |
| 2 | `#953a17` | `oklch(46.94% 0.1315 39.53)` | Citrine Brown | white, 7.2 to 1 |
| 3 | `#c04d18` | `oklch(56.61% 0.1593 41.80)` | Brick Orange | white, 4.8 to 1 |
| 4 | `#e4692a` | `oklch(66.14% 0.1695 44.31)` | Iron Orange | black, 6.3 to 1 |
| 5 | `#f89059` | `oklch(75.42% 0.1445 47.28)` | Umezome Pink | black, 9.1 to 1 |
| 6 | `#ffbb94` | `oklch(84.56% 0.0944 50.50)` | Peach Encounter | black, 12.7 to 1 |
| 7 | `#ffd8c1` | `oklch(90.94% 0.0537 52.77)` | Friendship | black, 15.8 to 1 |

## CSS

```css
background: linear-gradient(135deg, #782d15 0.0%, #953a17 16.7%, #c04d18 33.3%, #e4692a 50.0%, #f89059 66.7%, #ffbb94 83.3%, #ffd8c1 100.0%);
background: linear-gradient(135deg in oklch, oklch(40.16% 0.1102 37.97) 0.0%, oklch(46.94% 0.1315 39.53) 16.7%, oklch(56.61% 0.1593 41.80) 33.3%, oklch(66.14% 0.1695 44.31) 50.0%, oklch(75.42% 0.1445 47.28) 66.7%, oklch(84.56% 0.0944 50.50) 83.3%, oklch(90.94% 0.0537 52.77) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.402 | 0.11 | 38 |
| 2 | 0.661 | 0.169 | 44.3 |
| 3 | 0.909 | 0.07 | 52.8 |

## In these collections

- [Fire gradients](https://grabient.com/fire-gradients)
- [Persimmon gradients](https://grabient.com/persimmon-gradients)

## Other forms

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