# Crimson and magenta hero section palette

The Crimson and magenta hero section palette brings together red and magenta. The colors span a narrow lightness range, combining strong color with gentle contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is magenta, and its lightest tone is red.

- Also called: Vivid analogous red to magenta linear gradient
- Seed: `kSlpgOTFA-EnMPQ`
- Page: https://grabient.com/kSlpgOTFA-EnMPQ?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: even lightness, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 1 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 | `#de2e47` | `oklch(59.06% 0.2094 19.69)` | Anarchist | black, 4.5 to 1 |
| 2 | `#df2e48` | `oklch(59.09% 0.2099 19.13)` | Anarchist | black, 4.6 to 1 |
| 3 | `#df2d4a` | `oklch(59.14% 0.2105 18.48)` | Anarchist | black, 4.6 to 1 |
| 4 | `#df2c4c` | `oklch(59.20% 0.2112 17.74)` | Anarchist | black, 4.6 to 1 |
| 5 | `#e02c4e` | `oklch(59.27% 0.2121 16.93)` | Manganese Red | black, 4.6 to 1 |
| 6 | `#e02b51` | `oklch(59.35% 0.2130 16.05)` | Chin-Chin Cherry | black, 4.6 to 1 |
| 7 | `#e02a53` | `oklch(59.43% 0.2139 15.09)` | Chin-Chin Cherry | black, 4.6 to 1 |
| 8 | `#e12a56` | `oklch(59.51% 0.2149 14.08)` | Chin-Chin Cherry | black, 4.6 to 1 |
| 9 | `#e12959` | `oklch(59.59% 0.2159 13.01)` | Rose Rush | black, 4.6 to 1 |
| 10 | `#e2285c` | `oklch(59.67% 0.2168 11.89)` | Radiant Raspberry | black, 4.6 to 1 |
| 11 | `#e2285f` | `oklch(59.73% 0.2177 10.73)` | Intense Passion | black, 4.6 to 1 |
| 12 | `#e22762` | `oklch(59.79% 0.2186 9.53)` | Strawberry Mix | black, 4.6 to 1 |
| 13 | `#e22766` | `oklch(59.84% 0.2193 8.30)` | Razzmatazz Lips | black, 4.7 to 1 |
| 14 | `#e12769` | `oklch(59.86% 0.2198 7.05)` | Razzmatazz Lips | black, 4.7 to 1 |
| 15 | `#e1266c` | `oklch(59.87% 0.2202 5.77)` | Razzmatazz Lips | black, 4.7 to 1 |
| 16 | `#e0266f` | `oklch(59.86% 0.2204 4.48)` | Razzmatazz Lips | black, 4.6 to 1 |
| 17 | `#e02772` | `oklch(59.82% 0.2204 3.17)` | Watermelon Sugar | black, 4.6 to 1 |
| 18 | `#df2776` | `oklch(59.75% 0.2202 1.72)` | Watermelon Sugar | black, 4.6 to 1 |
| 19 | `#dd2879` | `oklch(59.66% 0.2198 0.13)` | Mystic Magenta | black, 4.6 to 1 |
| 20 | `#dc297d` | `oklch(59.55% 0.2193 358.44)` | Mystic Magenta | black, 4.6 to 1 |
| 21 | `#da2981` | `oklch(59.41% 0.2186 356.67)` | Highlighter Lilac | black, 4.6 to 1 |
| 22 | `#d82b85` | `oklch(59.27% 0.2177 354.85)` | Highlighter Lilac | black, 4.5 to 1 |
| 23 | `#d52c89` | `oklch(59.11% 0.2168 353.00)` | Dark Princess Pink | white, 4.6 to 1 |
| 24 | `#d32d8c` | `oklch(58.95% 0.2159 351.15)` | Magenta Pink | white, 4.6 to 1 |
| 25 | `#d12e90` | `oklch(58.78% 0.2149 349.33)` | Magenta Pink | white, 4.6 to 1 |
| 26 | `#cf2f93` | `oklch(58.62% 0.2139 347.56)` | Royal Fuchsia | white, 4.6 to 1 |
| 27 | `#cc3096` | `oklch(58.46% 0.2130 345.87)` | Royal Fuchsia | white, 4.7 to 1 |
| 28 | `#ca3199` | `oklch(58.31% 0.2121 344.29)` | Royal Fuchsia | white, 4.7 to 1 |
| 29 | `#c8329b` | `oklch(58.17% 0.2112 342.83)` | Royal Fuchsia | white, 4.7 to 1 |
| 30 | `#c6339d` | `oklch(58.05% 0.2105 341.54)` | Royal Fuchsia | white, 4.8 to 1 |
| 31 | `#c5349f` | `oklch(57.95% 0.2099 340.43)` | Byzantine | white, 4.8 to 1 |
| 32 | `#c335a1` | `oklch(57.87% 0.2094 339.53)` | Byzantine | white, 4.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #de2e47 0.0%, #df2e48 3.2%, #df2d4a 6.5%, #df2c4c 9.7%, #e02c4e 12.9%, #e02b51 16.1%, #e02a53 19.4%, #e12a56 22.6%, #e12959 25.8%, #e2285c 29.0%, #e2285f 32.3%, #e22762 35.5%, #e22766 38.7%, #e12769 41.9%, #e1266c 45.2%, #e0266f 48.4%, #e02772 51.6%, #df2776 54.8%, #dd2879 58.1%, #dc297d 61.3%, #da2981 64.5%, #d82b85 67.7%, #d52c89 71.0%, #d32d8c 74.2%, #d12e90 77.4%, #cf2f93 80.6%, #cc3096 83.9%, #ca3199 87.1%, #c8329b 90.3%, #c6339d 93.5%, #c5349f 96.8%, #c335a1 100.0%);
background: linear-gradient(90deg in oklch, oklch(59.06% 0.2094 19.69) 0.0%, oklch(59.09% 0.2099 19.13) 3.2%, oklch(59.14% 0.2105 18.48) 6.5%, oklch(59.20% 0.2112 17.74) 9.7%, oklch(59.27% 0.2121 16.93) 12.9%, oklch(59.35% 0.2130 16.05) 16.1%, oklch(59.43% 0.2139 15.09) 19.4%, oklch(59.51% 0.2149 14.08) 22.6%, oklch(59.59% 0.2159 13.01) 25.8%, oklch(59.67% 0.2168 11.89) 29.0%, oklch(59.73% 0.2177 10.73) 32.3%, oklch(59.79% 0.2186 9.53) 35.5%, oklch(59.84% 0.2193 8.30) 38.7%, oklch(59.86% 0.2198 7.05) 41.9%, oklch(59.87% 0.2202 5.77) 45.2%, oklch(59.86% 0.2204 4.48) 48.4%, oklch(59.82% 0.2204 3.17) 51.6%, oklch(59.75% 0.2202 1.72) 54.8%, oklch(59.66% 0.2198 0.13) 58.1%, oklch(59.55% 0.2193 358.44) 61.3%, oklch(59.41% 0.2186 356.67) 64.5%, oklch(59.27% 0.2177 354.85) 67.7%, oklch(59.11% 0.2168 353.00) 71.0%, oklch(58.95% 0.2159 351.15) 74.2%, oklch(58.78% 0.2149 349.33) 77.4%, oklch(58.62% 0.2139 347.56) 80.6%, oklch(58.46% 0.2130 345.87) 83.9%, oklch(58.31% 0.2121 344.29) 87.1%, oklch(58.17% 0.2112 342.83) 90.3%, oklch(58.05% 0.2105 341.54) 93.5%, oklch(57.95% 0.2099 340.43) 96.8%, oklch(57.87% 0.2094 339.53) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.591 | 0.209 | 19.7 |
| 2 | 0.598 | 0.22 | 3.8 |
| 3 | 0.579 | 0.209 | -20.5 |

## In these collections

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

## Other forms

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