# Analogous pink, red and white linear gradient

Analogous pink, red and white linear gradient with 8 colors: #fbf2f2, #d33b35, #fbf2f2, #d33b35, #fbf2f2, #d33b35, #fbf2f2, #d33b35. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kc9gcOScVA3sDvxJxUDewO_EnFQN7A78ScVAw`
- Page: https://grabient.com/kc9gcOScVA3sDvxJxUDewO_EnFQN7A78ScVAw?steps=8
- Drawn as: linear gradient, 8 steps, 90 degrees
- Kinds: vivid, warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 4.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 | `#fbf2f2` | `oklch(96.85% 0.0096 19.69)` | Ivory Tower | black, 19.1 to 1 |
| 2 | `#d33b35` | `oklch(57.87% 0.1902 27.08)` | Blade Runner Red | white, 4.7 to 1 |
| 3 | `#fbf2f2` | `oklch(96.85% 0.0096 19.69)` | Ivory Tower | black, 19.1 to 1 |
| 4 | `#d33b35` | `oklch(57.87% 0.1902 27.08)` | Blade Runner Red | white, 4.7 to 1 |
| 5 | `#fbf2f2` | `oklch(96.85% 0.0096 19.69)` | Ivory Tower | black, 19.1 to 1 |
| 6 | `#d33b35` | `oklch(57.87% 0.1902 27.08)` | Blade Runner Red | white, 4.7 to 1 |
| 7 | `#fbf2f2` | `oklch(96.85% 0.0096 19.69)` | Ivory Tower | black, 19.1 to 1 |
| 8 | `#d33b35` | `oklch(57.87% 0.1902 27.08)` | Blade Runner Red | white, 4.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #fbf2f2 0.0%, #d33b35 14.3%, #fbf2f2 28.6%, #d33b35 42.9%, #fbf2f2 57.1%, #d33b35 71.4%, #fbf2f2 85.7%, #d33b35 100.0%);
background: linear-gradient(90deg in oklch, oklch(96.85% 0.0096 19.69) 0.0%, oklch(57.87% 0.1902 27.08) 14.3%, oklch(96.85% 0.0096 19.69) 28.6%, oklch(57.87% 0.1902 27.08) 42.9%, oklch(96.85% 0.0096 19.69) 57.1%, oklch(57.87% 0.1902 27.08) 71.4%, oklch(96.85% 0.0096 19.69) 85.7%, oklch(57.87% 0.1902 27.08) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.01 | 19.7 |
| 2 | 0.579 | 0.19 | 27.1 |
| 3 | 0.969 | 0.01 | 19.7 |
| 4 | 0.579 | 0.19 | 27.1 |
| 5 | 0.969 | 0.01 | 19.7 |
| 6 | 0.579 | 0.19 | 27.1 |
| 7 | 0.969 | 0.01 | 19.7 |
| 8 | 0.579 | 0.19 | 27.1 |

## In these collections

- [Vintage Christmas color palette](https://grabient.com/vintage-christmas-color-palette)
- [Red swatches](https://grabient.com/red-swatches)

## Other forms

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