# Analogous orange, brown and black linear gradient

Analogous orange, brown and black linear gradient with 7 colors: #f38400, #cf6f00, #a85900, #854500, #613100, #3b1b00, #1a0b02. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWt4MpSzo_7qvP-onz_lYy_4`
- Page: https://grabient.com/kWt4MpSzo_7qvP-onz_lYy_4
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light to dark, vivid, warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 7.3 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 | `#f38400` | `oklch(72.05% 0.1731 57.64)` | Tangerine Skin | black, 8 to 1 |
| 2 | `#cf6f00` | `oklch(63.87% 0.1535 57.63)` | Autumn Maple | black, 5.9 to 1 |
| 3 | `#a85900` | `oklch(54.77% 0.1316 57.62)` | Tijolo | white, 5.1 to 1 |
| 4 | `#854500` | `oklch(46.06% 0.1107 57.59)` | Chocolate Pancakes | white, 7.3 to 1 |
| 5 | `#613100` | `oklch(36.72% 0.0883 57.53)` | Beasty Brown | white, 10.8 to 1 |
| 6 | `#3b1b00` | `oklch(26.41% 0.0637 57.33)` | 90% Cocoa | white, 15.5 to 1 |
| 7 | `#1a0b02` | `oklch(16.93% 0.0344 57.66)` | Soy Sauce | white, 19.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f38400 0.0%, #cf6f00 16.7%, #a85900 33.3%, #854500 50.0%, #613100 66.7%, #3b1b00 83.3%, #1a0b02 100.0%);
background: linear-gradient(90deg in oklch, oklch(72.05% 0.1731 57.64) 0.0%, oklch(63.87% 0.1535 57.63) 16.7%, oklch(54.77% 0.1316 57.62) 33.3%, oklch(46.06% 0.1107 57.59) 50.0%, oklch(36.72% 0.0883 57.53) 66.7%, oklch(26.41% 0.0637 57.33) 83.3%, oklch(16.93% 0.0344 57.66) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.72 | 0.181 | 57.7 |
| 2 | 0.591 | 0.16 | 57.7 |
| 3 | 0.461 | 0.13 | 57.7 |
| 4 | 0.319 | 0.085 | 57.7 |
| 5 | 0.169 | 0.034 | 57.7 |

## In these collections

- [Shade swatches](https://grabient.com/shade-swatches)

## Other forms

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