# Golden brown midnight gradient

Analogous yellow, brown and black linear gradient with 16 colors: #f0c85b, #efc45a, #ecbd57, #e2b253, #d2a44f, #bf944a, #aa8243, #94703d, #7c5d38, #624a33, #4c392e, #3b292a, #2a1e26, #1e1722, #171221, #130f22. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Analogous yellow, brown and black linear gradient
- Seed: `ka12E_Zq6_Vgmv3EGz8Lgw9h2ItWXjbxA`
- Page: https://grabient.com/ka12E_Zq6_Vgmv3EGz8Lgw9h2ItWXjbxA?steps=16&angle=180
- Drawn as: linear gradient, 16 steps, 180 degrees
- Kinds: light to dark, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.6 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 | `#f0c85b` | `oklch(84.65% 0.1337 88.59)` | Dancing Daisy | black, 13 to 1 |
| 2 | `#efc45a` | `oklch(83.71% 0.1326 86.81)` | Blonde Girl | black, 12.6 to 1 |
| 3 | `#ecbd57` | `oklch(82.04% 0.1304 84.38)` | Sundried | black, 11.9 to 1 |
| 4 | `#e2b253` | `oklch(78.97% 0.1250 82.45)` | Gold of Triumph | black, 10.7 to 1 |
| 5 | `#d2a44f` | `oklch(74.53% 0.1164 80.95)` | Royal Gold Pearl | black, 9.1 to 1 |
| 6 | `#bf944a` | `oklch(69.29% 0.1061 79.08)` | Narcissus | black, 7.5 to 1 |
| 7 | `#aa8243` | `oklch(63.38% 0.0946 76.96)` | Walnut Shell | black, 6 to 1 |
| 8 | `#94703d` | `oklch(56.86% 0.0815 74.03)` | Golden Pilsner | black, 4.6 to 1 |
| 9 | `#7c5d38` | `oklch(50.11% 0.0663 69.58)` | Japanese Iris | white, 6 to 1 |
| 10 | `#624a33` | `oklch(42.91% 0.0478 65.19)` | Black Power | white, 8.2 to 1 |
| 11 | `#4c392e` | `oklch(36.22% 0.0331 51.61)` | Chicory Coffee | white, 10.8 to 1 |
| 12 | `#3b292a` | `oklch(30.31% 0.0258 18.26)` | Havana | white, 13.6 to 1 |
| 13 | `#2a1e26` | `oklch(25.23% 0.0233 337.97)` | Shikon | white, 16 to 1 |
| 14 | `#1e1722` | `oklch(21.68% 0.0249 312.50)` | Violet Void | white, 17.5 to 1 |
| 15 | `#171221` | `oklch(19.66% 0.0316 299.46)` | Corbeau | white, 18.3 to 1 |
| 16 | `#130f22` | `oklch(18.50% 0.0372 292.19)` | Corbeau | white, 18.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #f0c85b 0.0%, #efc45a 6.7%, #ecbd57 13.3%, #e2b253 20.0%, #d2a44f 26.7%, #bf944a 33.3%, #aa8243 40.0%, #94703d 46.7%, #7c5d38 53.3%, #624a33 60.0%, #4c392e 66.7%, #3b292a 73.3%, #2a1e26 80.0%, #1e1722 86.7%, #171221 93.3%, #130f22 100.0%);
background: linear-gradient(180deg in oklch, oklch(84.65% 0.1337 88.59) 0.0%, oklch(83.71% 0.1326 86.81) 6.7%, oklch(82.04% 0.1304 84.38) 13.3%, oklch(78.97% 0.1250 82.45) 20.0%, oklch(74.53% 0.1164 80.95) 26.7%, oklch(69.29% 0.1061 79.08) 33.3%, oklch(63.38% 0.0946 76.96) 40.0%, oklch(56.86% 0.0815 74.03) 46.7%, oklch(50.11% 0.0663 69.58) 53.3%, oklch(42.91% 0.0478 65.19) 60.0%, oklch(36.22% 0.0331 51.61) 66.7%, oklch(30.31% 0.0258 18.26) 73.3%, oklch(25.23% 0.0233 337.97) 80.0%, oklch(21.68% 0.0249 312.50) 86.7%, oklch(19.66% 0.0316 299.46) 93.3%, oklch(18.50% 0.0372 292.19) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.846 | 0.134 | 88.6 |
| 2 | 0.807 | 0.128 | 83.3 |
| 3 | 0.693 | 0.106 | 79.1 |
| 4 | 0.535 | 0.074 | 71.7 |
| 5 | 0.362 | 0.033 | 51.6 |
| 6 | 0.232 | 0.023 | -37.2 |
| 7 | 0.185 | 0.037 | -67.8 |

## In these collections

- [Gold gradients](https://grabient.com/gold-gradients)

## Other forms

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