# Complementary yellow to blue linear gradient

Complementary yellow to blue linear gradient with 8 colors: #f3d93e, #eacc49, #d3b45a, #ad9d86, #8886a0, #6076c9, #476fdc, #3f73e7. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kc4HhG67Y_mMqP1Zjb5UA4ucqvPdIvr9SkO_o`
- Page: https://grabient.com/kc4HhG67Y_mMqP1Zjb5UA4ucqvPdIvr9SkO_o?steps=8
- Drawn as: linear gradient, 8 steps, 90 degrees
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.2 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 | `#f3d93e` | `oklch(88.19% 0.1654 99.14)` | Margarine | black, 14.8 to 1 |
| 2 | `#eacc49` | `oklch(84.65% 0.1488 95.97)` | Festival | black, 13.1 to 1 |
| 3 | `#d3b45a` | `oklch(77.95% 0.1157 90.69)` | Warm Woollen | black, 10.4 to 1 |
| 4 | `#ad9d86` | `oklch(70.47% 0.0372 76.95)` | Sheepskin Gloves | black, 7.9 to 1 |
| 5 | `#8886a0` | `oklch(62.99% 0.0386 289.00)` | Mandrake | black, 5.9 to 1 |
| 6 | `#6076c9` | `oklch(58.66% 0.1295 271.04)` | Indigo Light | black, 4.9 to 1 |
| 7 | `#476fdc` | `oklch(57.09% 0.1722 265.76)` | Cornflower | white, 4.5 to 1 |
| 8 | `#3f73e7` | `oklch(58.27% 0.1860 263.64)` | Skies of Cyberspace | black, 4.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f3d93e 0.0%, #eacc49 14.3%, #d3b45a 28.6%, #ad9d86 42.9%, #8886a0 57.1%, #6076c9 71.4%, #476fdc 85.7%, #3f73e7 100.0%);
background: linear-gradient(90deg in oklch, oklch(88.19% 0.1654 99.14) 0.0%, oklch(84.65% 0.1488 95.97) 14.3%, oklch(77.95% 0.1157 90.69) 28.6%, oklch(70.47% 0.0372 76.95) 42.9%, oklch(62.99% 0.0386 289.00) 57.1%, oklch(58.66% 0.1295 271.04) 71.4%, oklch(57.09% 0.1722 265.76) 85.7%, oklch(58.27% 0.1860 263.64) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.882 | 0.165 | 99.1 |
| 2 | 0.846 | 0.149 | 96 |
| 3 | 0.78 | 0.116 | 90.7 |
| 4 | 0.705 | 0.037 | 76.9 |
| 5 | 0.63 | 0.039 | -71 |
| 6 | 0.587 | 0.13 | -89 |
| 7 | 0.571 | 0.172 | -94.2 |
| 8 | 0.583 | 0.186 | -96.4 |

## In these collections

- [Lemon blossom veranda](https://grabient.com/lemon-blossom-veranda)

## Other forms

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