# Rose and orange color palette

The Rose and orange color palette brings together red and orange. The colors span a narrow lightness range, combining strong color with gentle contrast. Its light and open character suits seasonal campaigns and event graphics. Its darkest tone is red, and its lightest tone is orange.

- Also called: Neon analogous pink to peach linear gradient
- Seed: `kSpp8FW0FBuUsQm`
- Page: https://grabient.com/kSpp8FW0FBuUsQm?steps=14&angle=99
- Drawn as: linear gradient, 14 steps, 99 degrees
- Kinds: vivid, neon, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.8 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 | `#f53f79` | `oklch(65.35% 0.2191 7.03)` | Flamboyant Flamingo | black, 5.8 to 1 |
| 2 | `#f74478` | `oklch(65.96% 0.2153 8.43)` | Diva Pink | black, 6 to 1 |
| 3 | `#f94a76` | `oklch(66.78% 0.2103 10.28)` | Bonker Pink | black, 6.2 to 1 |
| 4 | `#fa5274` | `oklch(67.75% 0.2044 12.51)` | Fiery Rose | black, 6.5 to 1 |
| 5 | `#fc5972` | `oklch(68.83% 0.1976 15.00)` | Watermelon Candy | black, 6.8 to 1 |
| 6 | `#fe6171` | `oklch(69.96% 0.1904 17.68)` | Grenadine Pink | black, 7.1 to 1 |
| 7 | `#ff6a70` | `oklch(71.10% 0.1822 20.44)` | Pompelmo | black, 7.5 to 1 |
| 8 | `#ff7270` | `oklch(72.23% 0.1724 23.30)` | Embarrassment | black, 7.9 to 1 |
| 9 | `#ff7c71` | `oklch(73.52% 0.1621 26.70)` | Hipster Salmon | black, 8.3 to 1 |
| 10 | `#ff8572` | `oklch(74.92% 0.1519 30.46)` | Fusion Coral | black, 8.8 to 1 |
| 11 | `#ff8e73` | `oklch(76.33% 0.1426 34.26)` | Alexandria | black, 9.3 to 1 |
| 12 | `#ff9676` | `oklch(77.63% 0.1347 37.81)` | Hibiscus Delight | black, 9.8 to 1 |
| 13 | `#fe9d79` | `oklch(78.73% 0.1272 40.81)` | Creamy Orange Blush | black, 10.3 to 1 |
| 14 | `#fea27c` | `oklch(79.53% 0.1213 42.96)` | Dwarven Peaches | black, 10.6 to 1 |

## CSS

```css
background: linear-gradient(99deg, #f53f79 0.0%, #f74478 7.7%, #f94a76 15.4%, #fa5274 23.1%, #fc5972 30.8%, #fe6171 38.5%, #ff6a70 46.2%, #ff7270 53.8%, #ff7c71 61.5%, #ff8572 69.2%, #ff8e73 76.9%, #ff9676 84.6%, #fe9d79 92.3%, #fea27c 100.0%);
background: linear-gradient(99deg in oklch, oklch(65.35% 0.2191 7.03) 0.0%, oklch(65.96% 0.2153 8.43) 7.7%, oklch(66.78% 0.2103 10.28) 15.4%, oklch(67.75% 0.2044 12.51) 23.1%, oklch(68.83% 0.1976 15.00) 30.8%, oklch(69.96% 0.1904 17.68) 38.5%, oklch(71.10% 0.1822 20.44) 46.2%, oklch(72.23% 0.1724 23.30) 53.8%, oklch(73.52% 0.1621 26.70) 61.5%, oklch(74.92% 0.1519 30.46) 69.2%, oklch(76.33% 0.1426 34.26) 76.9%, oklch(77.63% 0.1347 37.81) 84.6%, oklch(78.73% 0.1272 40.81) 92.3%, oklch(79.53% 0.1213 42.96) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.654 | 0.219 | 7 |
| 2 | 0.717 | 0.179 | 21.8 |
| 3 | 0.795 | 0.121 | 43 |

## In these collections

- [Summer gradients](https://grabient.com/summer-gradients)
- [Sunset gradients](https://grabient.com/sunset-gradients)

## Other forms

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