# Complementary blue to yellow linear gradient

Complementary blue to yellow linear gradient with 32 colors: #2e3dc8, #2e3dc7, #2f3ec5, #303fc3, #3241c1, #3643bf, #3b45bb, #4147b8, #474ab4, #4d4eae, #5055a8, #525d9f, #5a6397, #67678f, #786a87, #866f7b, #8a7775, #8b8077, #8e8879, #948f75, #9c966b, #a59d5e, #ada352, #b2a94d, #b8af49, #beb447, #c3b945, #c7bd41, #cbc13e, #cdc53a, #cfc837, #d1ca35. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kccprAOcdADy3QNEFUEzwfSFomQljMsA6DpAI`
- Page: https://grabient.com/kccprAOcdADy3QNEFUEzwfSFomQljMsA6DpAI?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark to light
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.6 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 | `#2e3dc8` | `oklch(44.88% 0.2122 270.00)` | Blue Blue | white, 8 to 1 |
| 2 | `#2e3dc7` | `oklch(44.91% 0.2101 270.04)` | Blue Blue | white, 8 to 1 |
| 3 | `#2f3ec5` | `oklch(44.92% 0.2074 270.05)` | Blue Blue | white, 8 to 1 |
| 4 | `#303fc3` | `oklch(44.99% 0.2036 270.21)` | Blue Blue | white, 7.9 to 1 |
| 5 | `#3241c1` | `oklch(45.16% 0.1984 270.70)` | Blue Blue | white, 7.8 to 1 |
| 6 | `#3643bf` | `oklch(45.46% 0.1917 271.68)` | Blue Blue | white, 7.7 to 1 |
| 7 | `#3b45bb` | `oklch(45.82% 0.1841 273.08)` | Night in Manchester | white, 7.6 to 1 |
| 8 | `#4147b8` | `oklch(46.30% 0.1750 274.80)` | Night in Manchester | white, 7.4 to 1 |
| 9 | `#474ab4` | `oklch(46.93% 0.1636 276.73)` | Megadrive Screen | white, 7.2 to 1 |
| 10 | `#4d4eae` | `oklch(47.77% 0.1493 278.68)` | Brandywine Raspberry | white, 6.9 to 1 |
| 11 | `#5055a8` | `oklch(48.84% 0.1295 277.43)` | Brandywine Raspberry | white, 6.5 to 1 |
| 12 | `#525d9f` | `oklch(50.10% 0.1060 274.74)` | Purple Frenzy | white, 6.1 to 1 |
| 13 | `#5a6397` | `oklch(51.52% 0.0824 275.43)` | Wizard’s Potion | white, 5.7 to 1 |
| 14 | `#67678f` | `oklch(53.08% 0.0624 284.31)` | Twilight Purple | white, 5.3 to 1 |
| 15 | `#786a87` | `oklch(54.78% 0.0473 307.10)` | Amethyst Gem | white, 4.9 to 1 |
| 16 | `#866f7b` | `oklch(56.70% 0.0338 344.08)` | Innocent Pink | white, 4.6 to 1 |
| 17 | `#8a7775` | `oklch(58.73% 0.0237 26.07)` | Plum Haze | black, 4.9 to 1 |
| 18 | `#8b8077` | `oklch(60.78% 0.0192 63.53)` | Purri Sticks | black, 5.4 to 1 |
| 19 | `#8e8879` | `oklch(62.77% 0.0228 87.34)` | Fifth Olive-Nue | black, 5.9 to 1 |
| 20 | `#948f75` | `oklch(64.77% 0.0377 98.35)` | Paseo Verde | black, 6.4 to 1 |
| 21 | `#9c966b` | `oklch(66.78% 0.0599 101.82)` | Cactus Sand | black, 7 to 1 |
| 22 | `#a59d5e` | `oklch(68.74% 0.0836 101.71)` | Tallarn Sand | black, 7.5 to 1 |
| 23 | `#ada352` | `oklch(70.61% 0.1027 102.02)` | Desert Locust | black, 8.1 to 1 |
| 24 | `#b2a94d` | `oklch(72.38% 0.1147 103.87)` | Pickled | black, 8.6 to 1 |
| 25 | `#b8af49` | `oklch(74.11% 0.1234 104.49)` | Dill Green | black, 9.2 to 1 |
| 26 | `#beb447` | `oklch(75.73% 0.1300 104.42)` | Pesto | black, 9.8 to 1 |
| 27 | `#c3b945` | `oklch(77.20% 0.1358 104.30)` | Warm Olive | black, 10.3 to 1 |
| 28 | `#c7bd41` | `oklch(78.47% 0.1418 104.66)` | Pyrite Yellow | black, 10.8 to 1 |
| 29 | `#cbc13e` | `oklch(79.59% 0.1476 105.20)` | Anime | black, 11.2 to 1 |
| 30 | `#cdc53a` | `oklch(80.56% 0.1527 105.74)` | Tansy | black, 11.6 to 1 |
| 31 | `#cfc837` | `oklch(81.33% 0.1568 106.22)` | Barberry Bush | black, 11.9 to 1 |
| 32 | `#d1ca35` | `oklch(81.89% 0.1598 106.56)` | Lime Pop | black, 12.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #2e3dc8 0.0%, #2e3dc7 3.2%, #2f3ec5 6.5%, #303fc3 9.7%, #3241c1 12.9%, #3643bf 16.1%, #3b45bb 19.4%, #4147b8 22.6%, #474ab4 25.8%, #4d4eae 29.0%, #5055a8 32.3%, #525d9f 35.5%, #5a6397 38.7%, #67678f 41.9%, #786a87 45.2%, #866f7b 48.4%, #8a7775 51.6%, #8b8077 54.8%, #8e8879 58.1%, #948f75 61.3%, #9c966b 64.5%, #a59d5e 67.7%, #ada352 71.0%, #b2a94d 74.2%, #b8af49 77.4%, #beb447 80.6%, #c3b945 83.9%, #c7bd41 87.1%, #cbc13e 90.3%, #cdc53a 93.5%, #cfc837 96.8%, #d1ca35 100.0%);
background: linear-gradient(90deg in oklch, oklch(44.88% 0.2122 270.00) 0.0%, oklch(44.91% 0.2101 270.04) 3.2%, oklch(44.92% 0.2074 270.05) 6.5%, oklch(44.99% 0.2036 270.21) 9.7%, oklch(45.16% 0.1984 270.70) 12.9%, oklch(45.46% 0.1917 271.68) 16.1%, oklch(45.82% 0.1841 273.08) 19.4%, oklch(46.30% 0.1750 274.80) 22.6%, oklch(46.93% 0.1636 276.73) 25.8%, oklch(47.77% 0.1493 278.68) 29.0%, oklch(48.84% 0.1295 277.43) 32.3%, oklch(50.10% 0.1060 274.74) 35.5%, oklch(51.52% 0.0824 275.43) 38.7%, oklch(53.08% 0.0624 284.31) 41.9%, oklch(54.78% 0.0473 307.10) 45.2%, oklch(56.70% 0.0338 344.08) 48.4%, oklch(58.73% 0.0237 26.07) 51.6%, oklch(60.78% 0.0192 63.53) 54.8%, oklch(62.77% 0.0228 87.34) 58.1%, oklch(64.77% 0.0377 98.35) 61.3%, oklch(66.78% 0.0599 101.82) 64.5%, oklch(68.74% 0.0836 101.71) 67.7%, oklch(70.61% 0.1027 102.02) 71.0%, oklch(72.38% 0.1147 103.87) 74.2%, oklch(74.11% 0.1234 104.49) 77.4%, oklch(75.73% 0.1300 104.42) 80.6%, oklch(77.20% 0.1358 104.30) 83.9%, oklch(78.47% 0.1418 104.66) 87.1%, oklch(79.59% 0.1476 105.20) 90.3%, oklch(80.56% 0.1527 105.74) 93.5%, oklch(81.33% 0.1568 106.22) 96.8%, oklch(81.89% 0.1598 106.56) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.449 | 0.212 | 270 |
| 2 | 0.453 | 0.196 | 271.1 |
| 3 | 0.476 | 0.152 | 278.5 |
| 4 | 0.535 | 0.058 | 289 |
| 5 | 0.622 | 0.021 | 442.3 |
| 6 | 0.709 | 0.105 | 462.3 |
| 7 | 0.78 | 0.139 | 464.4 |
| 8 | 0.819 | 0.16 | 466.6 |

## Other forms

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