# Yellow, salmon, purple and navy linear swatches

Yellow, salmon, purple and navy linear swatches with 21 colors: #f8f300, #f5f500, #eefa00, #e5ff4f, #e2ff87, #e0ff7f, #e3fc2f, #f2eb00, #ffd135, #ffb65b, #ff9463, #f97076, #d86193, #b459a1, #9554a0, #784d97, #5f4688, #4a3f76, #393764, #2d3054, #252b49. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kU7qRNdcnAUo0L0mFDkg`
- Page: https://grabient.com/kU7qRNdcnAUo0L0mFDkg?style=linearSwatches&steps=21&angle=345
- Drawn as: linear swatches, 21 steps, 345 degrees
- Kinds: light to dark, vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 12.4 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 | `#f8f300` | `oklch(93.70% 0.2024 108.28)` | Lager | black, 17.7 to 1 |
| 2 | `#f5f500` | `oklch(93.90% 0.2050 109.96)` | Lager | black, 17.9 to 1 |
| 3 | `#eefa00` | `oklch(94.48% 0.2115 113.53)` | Banana Flash | black, 18.3 to 1 |
| 4 | `#e5ff4f` | `oklch(95.09% 0.1934 117.49)` | Green Ooze | black, 18.7 to 1 |
| 5 | `#e2ff87` | `oklch(95.43% 0.1495 120.38)` | Honeydew Peel | black, 18.8 to 1 |
| 6 | `#e0ff7f` | `oklch(95.17% 0.1582 120.69)` | Honeydew Peel | black, 18.7 to 1 |
| 7 | `#e3fc2f` | `oklch(93.98% 0.2065 116.94)` | Spoiled Egg | black, 18.1 to 1 |
| 8 | `#f2eb00` | `oklch(91.55% 0.1969 107.57)` | Robot Grendizer Gold | black, 16.6 to 1 |
| 9 | `#ffd135` | `oklch(87.69% 0.1662 91.21)` | Peeps | black, 14.4 to 1 |
| 10 | `#ffb65b` | `oklch(82.74% 0.1362 69.57)` | Peach Tea | black, 12 to 1 |
| 11 | `#ff9463` | `oklch(77.09% 0.1439 44.94)` | Mock Orange | black, 9.6 to 1 |
| 12 | `#f97076` | `oklch(71.14% 0.1676 19.64)` | Begonia | black, 7.5 to 1 |
| 13 | `#d86193` | `oklch(65.27% 0.1576 355.97)` | Flirty Rose | black, 6 to 1 |
| 14 | `#b459a1` | `oklch(59.89% 0.1470 336.22)` | Magenta Memoir | black, 4.9 to 1 |
| 15 | `#9554a0` | `oklch(55.07% 0.1353 321.56)` | Vicious Violet | white, 5.1 to 1 |
| 16 | `#784d97` | `oklch(50.10% 0.1212 309.43)` | Parfait d’Amour | white, 6.3 to 1 |
| 17 | `#5f4688` | `oklch(45.14% 0.1059 299.33)` | Lords of the Night | white, 7.7 to 1 |
| 18 | `#4a3f76` | `oklch(40.42% 0.0904 290.99)` | Deep Wisteria | white, 9.3 to 1 |
| 19 | `#393764` | `oklch(36.16% 0.0760 284.13)` | Rhynchites Nitens | white, 11 to 1 |
| 20 | `#2d3054` | `oklch(32.58% 0.0638 278.51)` | Quill Tip | white, 12.5 to 1 |
| 21 | `#252b49` | `oklch(29.92% 0.0551 273.84)` | Royal Curtsy | white, 13.7 to 1 |

## CSS

```css
background: linear-gradient(345deg, #f8f300 0.000% 4.762%, #f5f500 4.762% 9.524%, #eefa00 9.524% 14.286%, #e5ff4f 14.286% 19.048%, #e2ff87 19.048% 23.810%, #e0ff7f 23.810% 28.571%, #e3fc2f 28.571% 33.333%, #f2eb00 33.333% 38.095%, #ffd135 38.095% 42.857%, #ffb65b 42.857% 47.619%, #ff9463 47.619% 52.381%, #f97076 52.381% 57.143%, #d86193 57.143% 61.905%, #b459a1 61.905% 66.667%, #9554a0 66.667% 71.429%, #784d97 71.429% 76.190%, #5f4688 76.190% 80.952%, #4a3f76 80.952% 85.714%, #393764 85.714% 90.476%, #2d3054 90.476% 95.238%, #252b49 95.238% 100.000%);
background: linear-gradient(345deg, oklch(93.70% 0.2024 108.28) 0.000% 4.762%, oklch(93.90% 0.2050 109.96) 4.762% 9.524%, oklch(94.48% 0.2115 113.53) 9.524% 14.286%, oklch(95.09% 0.1934 117.49) 14.286% 19.048%, oklch(95.43% 0.1495 120.38) 19.048% 23.810%, oklch(95.17% 0.1582 120.69) 23.810% 28.571%, oklch(93.98% 0.2065 116.94) 28.571% 33.333%, oklch(91.55% 0.1969 107.57) 33.333% 38.095%, oklch(87.69% 0.1662 91.21) 38.095% 42.857%, oklch(82.74% 0.1362 69.57) 42.857% 47.619%, oklch(77.09% 0.1439 44.94) 47.619% 52.381%, oklch(71.14% 0.1676 19.64) 52.381% 57.143%, oklch(65.27% 0.1576 355.97) 57.143% 61.905%, oklch(59.89% 0.1470 336.22) 61.905% 66.667%, oklch(55.07% 0.1353 321.56) 66.667% 71.429%, oklch(50.10% 0.1212 309.43) 71.429% 76.190%, oklch(45.14% 0.1059 299.33) 76.190% 80.952%, oklch(40.42% 0.0904 290.99) 80.952% 85.714%, oklch(36.16% 0.0760 284.13) 85.714% 90.476%, oklch(32.58% 0.0638 278.51) 90.476% 95.238%, oklch(29.92% 0.0551 273.84) 95.238% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.937 | 0.226 | 108.3 |
| 2 | 0.925 | 0.203 | 111.5 |
| 3 | 0.583 | 0.143 | -29.1 |
| 4 | 0.299 | 0.055 | -86.2 |

## In these collections

- [Retro swatches](https://grabient.com/retro-swatches)

## Other forms

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