# Blue, beige and orange linear gradient

Blue, beige and orange linear gradient with 32 colors: #508fd2, #5893d4, #6598d7, #739eda, #81a5dd, #8dade1, #96b5e4, #9bbee6, #9cc6e7, #9acee6, #9bd7df, #a3ded3, #b4e2c4, #c9e2b6, #dddfac, #eddba6, #f7d6a1, #fcd19a, #feca90, #fdc283, #fbbb73, #f8b362, #f5ab50, #f2a341, #f19a36, #ef8f2d, #ec8527, #e87a25, #e46f26, #e06628, #dc5e2a, #d9582b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWoley5hg_XGbLPiNT3Tz68g`
- Page: https://grabient.com/kWoley5hg_XGbLPiNT3Tz68g?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Hues: complementary
- Contrast of its darkest and lightest colors: 2.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 | `#508fd2` | `oklch(63.78% 0.1199 251.02)` | Blue Dart | black, 6.2 to 1 |
| 2 | `#5893d4` | `oklch(65.16% 0.1151 251.72)` | Blue Dart | black, 6.5 to 1 |
| 3 | `#6598d7` | `oklch(67.06% 0.1083 253.87)` | Blue Bay | black, 7 to 1 |
| 4 | `#739eda` | `oklch(69.32% 0.1001 256.49)` | Ice Blue | black, 7.6 to 1 |
| 5 | `#81a5dd` | `oklch(71.80% 0.0914 258.62)` | Blue Cue | black, 8.3 to 1 |
| 6 | `#8dade1` | `oklch(74.33% 0.0828 259.29)` | Queer Blue | black, 9.2 to 1 |
| 7 | `#96b5e4` | `oklch(76.76% 0.0751 257.54)` | Adrift on the Nile | black, 10 to 1 |
| 8 | `#9bbee6` | `oklch(78.94% 0.0691 252.40)` | Gallery Blue | black, 10.8 to 1 |
| 9 | `#9cc6e7` | `oklch(80.73% 0.0654 242.83)` | Pale Cerulean | black, 11.6 to 1 |
| 10 | `#9acee6` | `oklch(82.43% 0.0633 227.08)` | Spring Tide | black, 12.3 to 1 |
| 11 | `#9bd7df` | `oklch(84.13% 0.0621 206.19)` | Exotic Escape | black, 13.1 to 1 |
| 12 | `#a3ded3` | `oklch(85.73% 0.0620 182.07)` | Sparkling Mint | black, 13.9 to 1 |
| 13 | `#b4e2c4` | `oklch(87.14% 0.0629 156.65)` | Lattice Work | black, 14.5 to 1 |
| 14 | `#c9e2b6` | `oklch(88.29% 0.0649 131.84)` | Iced Avocado | black, 15 to 1 |
| 15 | `#dddfac` | `oklch(89.07% 0.0679 109.56)` | Tonic | black, 15.2 to 1 |
| 16 | `#eddba6` | `oklch(89.40% 0.0720 91.74)` | Tortilla | black, 15.3 to 1 |
| 17 | `#f7d6a1` | `oklch(89.19% 0.0773 79.94)` | Pismo Dunes | black, 15.1 to 1 |
| 18 | `#fcd19a` | `oklch(88.39% 0.0850 72.81)` | Whipped Apricot | black, 14.6 to 1 |
| 19 | `#feca90` | `oklch(87.10% 0.0944 69.12)` | Tangerine Silk | black, 14 to 1 |
| 20 | `#fdc283` | `oklch(85.46% 0.1050 67.90)` | Buttery | black, 13.2 to 1 |
| 21 | `#fbbb73` | `oklch(83.56% 0.1160 68.14)` | Spiced Nectarine | black, 12.4 to 1 |
| 22 | `#f8b362` | `oklch(81.55% 0.1267 68.86)` | Peanut Butter Biscuit | black, 11.5 to 1 |
| 23 | `#f5ab50` | `oklch(79.52% 0.1364 69.08)` | Pani Puri | black, 10.7 to 1 |
| 24 | `#f2a341` | `oklch(77.61% 0.1444 67.81)` | O’Brien Orange | black, 10 to 1 |
| 25 | `#f19a36` | `oklch(75.76% 0.1505 64.68)` | Amber Glow | black, 9.3 to 1 |
| 26 | `#ef8f2d` | `oklch(73.68% 0.1556 60.85)` | Sun | black, 8.6 to 1 |
| 27 | `#ec8527` | `oklch(71.45% 0.1598 56.64)` | Cadmium Orange | black, 7.9 to 1 |
| 28 | `#e87a25` | `oklch(69.20% 0.1632 52.29)` | Chaat Masala | black, 7.2 to 1 |
| 29 | `#e46f26` | `oklch(67.03% 0.1661 48.06)` | 24 Carrot | black, 6.6 to 1 |
| 30 | `#e06628` | `oklch(65.07% 0.1685 44.21)` | Hot Hazel | black, 6 to 1 |
| 31 | `#dc5e2a` | `oklch(63.42% 0.1705 40.97)` | Full of Life | black, 5.6 to 1 |
| 32 | `#d9582b` | `oklch(62.20% 0.1722 38.61)` | Lāl Red | black, 5.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #508fd2 0.0%, #5893d4 3.2%, #6598d7 6.5%, #739eda 9.7%, #81a5dd 12.9%, #8dade1 16.1%, #96b5e4 19.4%, #9bbee6 22.6%, #9cc6e7 25.8%, #9acee6 29.0%, #9bd7df 32.3%, #a3ded3 35.5%, #b4e2c4 38.7%, #c9e2b6 41.9%, #dddfac 45.2%, #eddba6 48.4%, #f7d6a1 51.6%, #fcd19a 54.8%, #feca90 58.1%, #fdc283 61.3%, #fbbb73 64.5%, #f8b362 67.7%, #f5ab50 71.0%, #f2a341 74.2%, #f19a36 77.4%, #ef8f2d 80.6%, #ec8527 83.9%, #e87a25 87.1%, #e46f26 90.3%, #e06628 93.5%, #dc5e2a 96.8%, #d9582b 100.0%);
background: linear-gradient(180deg in oklch, oklch(63.78% 0.1199 251.02) 0.0%, oklch(65.16% 0.1151 251.72) 3.2%, oklch(67.06% 0.1083 253.87) 6.5%, oklch(69.32% 0.1001 256.49) 9.7%, oklch(71.80% 0.0914 258.62) 12.9%, oklch(74.33% 0.0828 259.29) 16.1%, oklch(76.76% 0.0751 257.54) 19.4%, oklch(78.94% 0.0691 252.40) 22.6%, oklch(80.73% 0.0654 242.83) 25.8%, oklch(82.43% 0.0633 227.08) 29.0%, oklch(84.13% 0.0621 206.19) 32.3%, oklch(85.73% 0.0620 182.07) 35.5%, oklch(87.14% 0.0629 156.65) 38.7%, oklch(88.29% 0.0649 131.84) 41.9%, oklch(89.07% 0.0679 109.56) 45.2%, oklch(89.40% 0.0720 91.74) 48.4%, oklch(89.19% 0.0773 79.94) 51.6%, oklch(88.39% 0.0850 72.81) 54.8%, oklch(87.10% 0.0944 69.12) 58.1%, oklch(85.46% 0.1050 67.90) 61.3%, oklch(83.56% 0.1160 68.14) 64.5%, oklch(81.55% 0.1267 68.86) 67.7%, oklch(79.52% 0.1364 69.08) 71.0%, oklch(77.61% 0.1444 67.81) 74.2%, oklch(75.76% 0.1505 64.68) 77.4%, oklch(73.68% 0.1556 60.85) 80.6%, oklch(71.45% 0.1598 56.64) 83.9%, oklch(69.20% 0.1632 52.29) 87.1%, oklch(67.03% 0.1661 48.06) 90.3%, oklch(65.07% 0.1685 44.21) 93.5%, oklch(63.42% 0.1705 40.97) 96.8%, oklch(62.20% 0.1722 38.61) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.638 | 0.12 | 251 |
| 2 | 0.803 | 0.066 | 245.7 |
| 3 | 0.894 | 0.074 | 85.1 |
| 4 | 0.772 | 0.146 | 67.1 |
| 5 | 0.622 | 0.172 | 38.6 |

## Other forms

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