# Vivid blue, pink, peach and orange linear gradient

Vivid blue, pink, peach and orange linear gradient with 7 colors: #142e8a, #1950bc, #0c83e0, #66a9f2, #ff9ca4, #f3a018, #ef6418. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWWXG9REK_NuuvxmNdRVUS9Y`
- Page: https://grabient.com/kWWXG9REK_NuuvxmNdRVUS9Y
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.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 | `#142e8a` | `oklch(35.04% 0.1557 265.78)` | US Air Force Blue | white, 11.7 to 1 |
| 2 | `#1950bc` | `oklch(46.69% 0.1792 261.87)` | Mourning Blue | white, 7.1 to 1 |
| 3 | `#0c83e0` | `oklch(60.09% 0.1683 250.40)` | Blue Cola | black, 5.3 to 1 |
| 4 | `#66a9f2` | `oklch(72.05% 0.1281 252.04)` | Cerulean | black, 8.5 to 1 |
| 5 | `#ff9ca4` | `oklch(79.54% 0.1190 14.55)` | Salmon Tartare | black, 10.5 to 1 |
| 6 | `#f3a018` | `oklch(76.96% 0.1611 70.79)` | Mad for Mango | black, 9.8 to 1 |
| 7 | `#ef6418` | `oklch(66.93% 0.1888 43.16)` | Fuego Nuevo | black, 6.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #142e8a 0.0%, #1950bc 16.7%, #0c83e0 33.3%, #66a9f2 50.0%, #ff9ca4 66.7%, #f3a018 83.3%, #ef6418 100.0%);
background: linear-gradient(90deg in oklch, oklch(35.04% 0.1557 265.78) 0.0%, oklch(46.69% 0.1792 261.87) 16.7%, oklch(60.09% 0.1683 250.40) 33.3%, oklch(72.05% 0.1281 252.04) 50.0%, oklch(79.54% 0.1190 14.55) 66.7%, oklch(76.96% 0.1611 70.79) 83.3%, oklch(66.93% 0.1888 43.16) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.35 | 0.156 | 265.8 |
| 2 | 0.535 | 0.183 | 259.4 |
| 3 | 0.72 | 0.128 | 252 |
| 4 | 0.803 | 0.147 | 424.3 |
| 5 | 0.669 | 0.189 | 403.2 |

## In these collections

- [Blue and orange swatches](https://grabient.com/blue-and-orange-swatches)

## Other forms

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