# Vivid triadic blue, pink and yellow linear gradient

Vivid triadic blue, pink and yellow linear gradient with 32 colors: #004374, #004479, #04467f, #0f4887, #1e4a8e, #304c95, #44509a, #59549e, #6c58a0, #7e5ca1, #9061a2, #a266a2, #b46ba0, #c4719d, #d3779a, #e17d96, #ee8491, #f88b8b, #ff9283, #ff9a7d, #ff9f74, #ffa46a, #fdaa64, #feb05f, #ffb65c, #ffbc5d, #ffc25c, #ffc651, #fcca47, #f6cd46, #f0d145, #ebd346. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcX0yxNi1BcQoRPUK0V4bFEOavw_stkJbbjCI`
- Page: https://grabient.com/kcX0yxNi1BcQoRPUK0V4bFEOavw_stkJbbjCI?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark to light, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 6.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 | `#004374` | `oklch(37.41% 0.1031 248.97)` | Mermaid Blues | white, 10.2 to 1 |
| 2 | `#004479` | `oklch(38.09% 0.1084 250.33)` | Mermaid Blues | white, 9.9 to 1 |
| 3 | `#04467f` | `oklch(39.04% 0.1140 252.12)` | Lost River | white, 9.6 to 1 |
| 4 | `#0f4887` | `oklch(40.25% 0.1196 254.86)` | Lady of the Night | white, 9.1 to 1 |
| 5 | `#1e4a8e` | `oklch(41.77% 0.1234 259.14)` | Nuit Blanche | white, 8.6 to 1 |
| 6 | `#304c95` | `oklch(43.64% 0.1237 265.56)` | Le Grand Bleu | white, 8 to 1 |
| 7 | `#44509a` | `oklch(45.93% 0.1207 274.23)` | Crushed Velvet | white, 7.3 to 1 |
| 8 | `#59549e` | `oklch(48.51% 0.1161 284.32)` | Coronation Blue | white, 6.6 to 1 |
| 9 | `#6c58a0` | `oklch(51.22% 0.1120 294.96)` | Sumire Violet | white, 5.9 to 1 |
| 10 | `#7e5ca1` | `oklch(53.93% 0.1102 305.30)` | Sonic Plum | white, 5.3 to 1 |
| 11 | `#9061a2` | `oklch(56.73% 0.1106 315.82)` | Empire Violet | white, 4.7 to 1 |
| 12 | `#a266a2` | `oklch(59.66% 0.1123 326.72)` | Royal Pretender | black, 4.9 to 1 |
| 13 | `#b46ba0` | `oklch(62.58% 0.1148 337.50)` | Pink Parade | black, 5.5 to 1 |
| 14 | `#c4719d` | `oklch(65.38% 0.1177 347.64)` | Fading Love | black, 6.2 to 1 |
| 15 | `#d3779a` | `oklch(68.04% 0.1209 356.77)` | Little Bow Pink | black, 6.8 to 1 |
| 16 | `#e17d96` | `oklch(70.71% 0.1253 5.13)` | Frosty Berry | black, 7.6 to 1 |
| 17 | `#ee8491` | `oklch(73.23% 0.1298 13.01)` | Xoxo | black, 8.3 to 1 |
| 18 | `#f88b8b` | `oklch(75.46% 0.1335 20.72)` | Vinaceous Cinnamon | black, 9 to 1 |
| 19 | `#ff9283` | `oklch(77.21% 0.1344 28.55)` | Adobe Avenue | black, 9.6 to 1 |
| 20 | `#ff9a7d` | `oklch(78.38% 0.1286 36.67)` | Peachy Salmon | black, 10.1 to 1 |
| 21 | `#ff9f74` | `oklch(79.16% 0.1282 44.75)` | Candyman | black, 10.4 to 1 |
| 22 | `#ffa46a` | `oklch(79.80% 0.1309 52.40)` | Baby Melon | black, 10.7 to 1 |
| 23 | `#fdaa64` | `oklch(80.57% 0.1307 59.22)` | Downy Feather | black, 11.1 to 1 |
| 24 | `#feb05f` | `oklch(81.63% 0.1332 64.87)` | Vintage Orange | black, 11.5 to 1 |
| 25 | `#ffb65c` | `oklch(82.83% 0.1353 69.55)` | Peach Tea | black, 12 to 1 |
| 26 | `#ffbc5d` | `oklch(84.01% 0.1349 73.69)` | Orange Quench | black, 12.6 to 1 |
| 27 | `#ffc25c` | `oklch(85.01% 0.1370 77.74)` | Orange Delight | black, 13 to 1 |
| 28 | `#ffc651` | `oklch(85.67% 0.1455 82.15)` | Golden Promise | black, 13.4 to 1 |
| 29 | `#fcca47` | `oklch(86.01% 0.1521 87.06)` | English Daisy | black, 13.6 to 1 |
| 30 | `#f6cd46` | `oklch(86.14% 0.1537 91.96)` | Marigold Dust | black, 13.7 to 1 |
| 31 | `#f0d145` | `oklch(86.17% 0.1548 96.21)` | Aurora | black, 13.8 to 1 |
| 32 | `#ebd346` | `oklch(86.22% 0.1557 99.20)` | Aurora | black, 13.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #004374 0.0%, #004479 3.2%, #04467f 6.5%, #0f4887 9.7%, #1e4a8e 12.9%, #304c95 16.1%, #44509a 19.4%, #59549e 22.6%, #6c58a0 25.8%, #7e5ca1 29.0%, #9061a2 32.3%, #a266a2 35.5%, #b46ba0 38.7%, #c4719d 41.9%, #d3779a 45.2%, #e17d96 48.4%, #ee8491 51.6%, #f88b8b 54.8%, #ff9283 58.1%, #ff9a7d 61.3%, #ff9f74 64.5%, #ffa46a 67.7%, #fdaa64 71.0%, #feb05f 74.2%, #ffb65c 77.4%, #ffbc5d 80.6%, #ffc25c 83.9%, #ffc651 87.1%, #fcca47 90.3%, #f6cd46 93.5%, #f0d145 96.8%, #ebd346 100.0%);
background: linear-gradient(90deg in oklch, oklch(37.41% 0.1031 248.97) 0.0%, oklch(38.09% 0.1084 250.33) 3.2%, oklch(39.04% 0.1140 252.12) 6.5%, oklch(40.25% 0.1196 254.86) 9.7%, oklch(41.77% 0.1234 259.14) 12.9%, oklch(43.64% 0.1237 265.56) 16.1%, oklch(45.93% 0.1207 274.23) 19.4%, oklch(48.51% 0.1161 284.32) 22.6%, oklch(51.22% 0.1120 294.96) 25.8%, oklch(53.93% 0.1102 305.30) 29.0%, oklch(56.73% 0.1106 315.82) 32.3%, oklch(59.66% 0.1123 326.72) 35.5%, oklch(62.58% 0.1148 337.50) 38.7%, oklch(65.38% 0.1177 347.64) 41.9%, oklch(68.04% 0.1209 356.77) 45.2%, oklch(70.71% 0.1253 5.13) 48.4%, oklch(73.23% 0.1298 13.01) 51.6%, oklch(75.46% 0.1335 20.72) 54.8%, oklch(77.21% 0.1344 28.55) 58.1%, oklch(78.38% 0.1286 36.67) 61.3%, oklch(79.16% 0.1282 44.75) 64.5%, oklch(79.80% 0.1309 52.40) 67.7%, oklch(80.57% 0.1307 59.22) 71.0%, oklch(81.63% 0.1332 64.87) 74.2%, oklch(82.83% 0.1353 69.55) 77.4%, oklch(84.01% 0.1349 73.69) 80.6%, oklch(85.01% 0.1370 77.74) 83.9%, oklch(85.67% 0.1455 82.15) 87.1%, oklch(86.01% 0.1521 87.06) 90.3%, oklch(86.14% 0.1537 91.96) 93.5%, oklch(86.17% 0.1548 96.21) 96.8%, oklch(86.22% 0.1557 99.20) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.374 | 0.105 | 248.9 |
| 2 | 0.425 | 0.124 | 261.6 |
| 3 | 0.535 | 0.11 | 303.9 |
| 4 | 0.661 | 0.119 | 350.4 |
| 5 | 0.768 | 0.135 | 386.3 |
| 6 | 0.807 | 0.131 | 420.1 |
| 7 | 0.854 | 0.149 | 440.2 |
| 8 | 0.862 | 0.156 | 459.2 |

## In these collections

- [Orange and blue gradients](https://grabient.com/orange-and-blue-gradients)

## Other forms

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