# Wine and ochre hero section palette

This palette moves from red to gold. It steadily lightens across a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits website sections and presentation backgrounds, especially compositions that need a controlled shift between darker and lighter areas.

- Also called: Vivid analogous maroon to orange linear gradient
- Seed: `kST1cKxj3CWSzRU`
- Page: https://grabient.com/kST1cKxj3CWSzRU?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 7 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 | `#5f041c` | `oklch(31.10% 0.1199 14.77)` | Baal Red Wash | white, 13.8 to 1 |
| 2 | `#62061d` | `oklch(31.97% 0.1218 15.44)` | Merguez | white, 13.4 to 1 |
| 3 | `#66081e` | `oklch(33.03% 0.1244 16.19)` | Forbidden Passion | white, 12.9 to 1 |
| 4 | `#6b0a1f` | `oklch(34.24% 0.1275 17.00)` | Forbidden Passion | white, 12.3 to 1 |
| 5 | `#710d21` | `oklch(35.59% 0.1311 17.89)` | Evil Forces | white, 11.7 to 1 |
| 6 | `#771022` | `oklch(37.07% 0.1350 18.86)` | Heavy Heart | white, 11.1 to 1 |
| 7 | `#7e1423` | `oklch(38.65% 0.1391 19.91)` | Oxblood | white, 10.4 to 1 |
| 8 | `#851724` | `oklch(40.32% 0.1433 21.05)` | Sweet Cherry Red | white, 9.7 to 1 |
| 9 | `#8c1b25` | `oklch(42.05% 0.1475 22.28)` | Shinshu | white, 9.1 to 1 |
| 10 | `#941f26` | `oklch(43.82% 0.1517 23.61)` | Classy Red | white, 8.4 to 1 |
| 11 | `#9b2426` | `oklch(45.62% 0.1557 25.03)` | Tamed Beast | white, 7.8 to 1 |
| 12 | `#a32826` | `oklch(47.43% 0.1593 26.56)` | Fresh Auburn | white, 7.2 to 1 |
| 13 | `#aa2d26` | `oklch(49.22% 0.1626 28.20)` | Fabulous Red | white, 6.7 to 1 |
| 14 | `#b13225` | `oklch(50.98% 0.1654 29.95)` | Cardinal’s Cassock | white, 6.2 to 1 |
| 15 | `#b83823` | `oklch(52.69% 0.1676 31.81)` | Bricky Brick | white, 5.8 to 1 |
| 16 | `#be3e22` | `oklch(54.33% 0.1690 33.80)` | Shēn Chéng Orange | white, 5.4 to 1 |
| 17 | `#c3441f` | `oklch(55.90% 0.1697 35.95)` | Paprika Kisses | white, 5 to 1 |
| 18 | `#c84a1d` | `oklch(57.54% 0.1697 38.43)` | Red Panda | white, 4.7 to 1 |
| 19 | `#cd5219` | `oklch(59.25% 0.1690 41.23)` | Rusty Nail | black, 4.8 to 1 |
| 20 | `#d15a16` | `oklch(61.02% 0.1677 44.29)` | Tomato Bisque | black, 5.1 to 1 |
| 21 | `#d66212` | `oklch(62.81% 0.1660 47.54)` | Ancient Bamboo | black, 5.5 to 1 |
| 22 | `#d96a10` | `oklch(64.62% 0.1638 50.94)` | Apple II Chocolate | black, 6 to 1 |
| 23 | `#dd7310` | `oklch(66.42% 0.1614 54.43)` | Gold Orange | black, 6.5 to 1 |
| 24 | `#df7b12` | `oklch(68.19% 0.1588 57.94)` | Pumpkin Soup | black, 7 to 1 |
| 25 | `#e28417` | `oklch(69.92% 0.1560 61.43)` | Fulvous | black, 7.5 to 1 |
| 26 | `#e48c1d` | `oklch(71.58% 0.1533 64.83)` | Hotter Butter | black, 8 to 1 |
| 27 | `#e59424` | `oklch(73.16% 0.1505 68.10)` | Sanskrit | black, 8.5 to 1 |
| 28 | `#e69b2a` | `oklch(74.64% 0.1479 71.16)` | Clarified Butter | black, 9 to 1 |
| 29 | `#e7a131` | `oklch(76.00% 0.1455 73.97)` | Shì Zǐ Chéng Persimmon | black, 9.5 to 1 |
| 30 | `#e8a737` | `oklch(77.21% 0.1434 76.46)` | Mustard Glaze | black, 10 to 1 |
| 31 | `#e9ac3c` | `oklch(78.26% 0.1418 78.59)` | Yakitori | black, 10.4 to 1 |
| 32 | `#eab040` | `oklch(79.13% 0.1406 80.28)` | Mì Chéng Honey | black, 10.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #5f041c 0.0%, #62061d 3.2%, #66081e 6.5%, #6b0a1f 9.7%, #710d21 12.9%, #771022 16.1%, #7e1423 19.4%, #851724 22.6%, #8c1b25 25.8%, #941f26 29.0%, #9b2426 32.3%, #a32826 35.5%, #aa2d26 38.7%, #b13225 41.9%, #b83823 45.2%, #be3e22 48.4%, #c3441f 51.6%, #c84a1d 54.8%, #cd5219 58.1%, #d15a16 61.3%, #d66212 64.5%, #d96a10 67.7%, #dd7310 71.0%, #df7b12 74.2%, #e28417 77.4%, #e48c1d 80.6%, #e59424 83.9%, #e69b2a 87.1%, #e7a131 90.3%, #e8a737 93.5%, #e9ac3c 96.8%, #eab040 100.0%);
background: linear-gradient(135deg in oklch, oklch(31.10% 0.1199 14.77) 0.0%, oklch(31.97% 0.1218 15.44) 3.2%, oklch(33.03% 0.1244 16.19) 6.5%, oklch(34.24% 0.1275 17.00) 9.7%, oklch(35.59% 0.1311 17.89) 12.9%, oklch(37.07% 0.1350 18.86) 16.1%, oklch(38.65% 0.1391 19.91) 19.4%, oklch(40.32% 0.1433 21.05) 22.6%, oklch(42.05% 0.1475 22.28) 25.8%, oklch(43.82% 0.1517 23.61) 29.0%, oklch(45.62% 0.1557 25.03) 32.3%, oklch(47.43% 0.1593 26.56) 35.5%, oklch(49.22% 0.1626 28.20) 38.7%, oklch(50.98% 0.1654 29.95) 41.9%, oklch(52.69% 0.1676 31.81) 45.2%, oklch(54.33% 0.1690 33.80) 48.4%, oklch(55.90% 0.1697 35.95) 51.6%, oklch(57.54% 0.1697 38.43) 54.8%, oklch(59.25% 0.1690 41.23) 58.1%, oklch(61.02% 0.1677 44.29) 61.3%, oklch(62.81% 0.1660 47.54) 64.5%, oklch(64.62% 0.1638 50.94) 67.7%, oklch(66.42% 0.1614 54.43) 71.0%, oklch(68.19% 0.1588 57.94) 74.2%, oklch(69.92% 0.1560 61.43) 77.4%, oklch(71.58% 0.1533 64.83) 80.6%, oklch(73.16% 0.1505 68.10) 83.9%, oklch(74.64% 0.1479 71.16) 87.1%, oklch(76.00% 0.1455 73.97) 90.3%, oklch(77.21% 0.1434 76.46) 93.5%, oklch(78.26% 0.1418 78.59) 96.8%, oklch(79.13% 0.1406 80.28) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.311 | 0.12 | 14.8 |
| 2 | 0.551 | 0.169 | 34.8 |
| 3 | 0.791 | 0.141 | 80.3 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)

## Other forms

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