# Light blue, blue, brown and orange angular gradient

Light blue, blue, brown and orange angular gradient with 32 colors: #55b2e6, #4eabe1, #46a2da, #3c97d2, #338bc9, #2b80c0, #2576b8, #1d6caf, #1662a6, #14589d, #174f92, #1b4785, #1d3f75, #1f3863, #223154, #262d49, #2d2b45, #382c44, #462e43, #56323f, #643839, #713d33, #7f422e, #914528, #a44824, #b64a22, #c44f1d, #d05819, #da621b, #e26d1f, #e97625, #ee7d28. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kauVSnyS5BLWswSmkcJtJnNEi6QVZvEFA`
- Page: https://grabient.com/kauVSnyS5BLWswSmkcJtJnNEi6QVZvEFA?style=angularGradient&steps=32&angle=270
- Drawn as: angular gradient, 32 steps, 270 degrees
- Kinds: dark center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.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 | `#55b2e6` | `oklch(72.83% 0.1157 235.55)` | Sanctuary Spa | black, 8.9 to 1 |
| 2 | `#4eabe1` | `oklch(70.83% 0.1174 236.93)` | High Blue | black, 8.2 to 1 |
| 3 | `#46a2da` | `oklch(68.01% 0.1199 238.87)` | Waimea Blue | black, 7.4 to 1 |
| 4 | `#3c97d2` | `oklch(64.70% 0.1227 241.14)` | Perfect Sky | black, 6.5 to 1 |
| 5 | `#338bc9` | `oklch(61.25% 0.1251 243.52)` | Ticino Blue | black, 5.6 to 1 |
| 6 | `#2b80c0` | `oklch(57.98% 0.1266 245.77)` | Amalfi Coast | black, 4.9 to 1 |
| 7 | `#2576b8` | `oklch(54.97% 0.1277 247.70)` | Bluish | white, 4.8 to 1 |
| 8 | `#1d6caf` | `oklch(51.89% 0.1293 249.43)` | Daphne | white, 5.5 to 1 |
| 9 | `#1662a6` | `oklch(48.82% 0.1301 251.19)` | Directoire Blue | white, 6.3 to 1 |
| 10 | `#14589d` | `oklch(45.84% 0.1291 253.20)` | Sonic Blue | white, 7.2 to 1 |
| 11 | `#174f92` | `oklch(43.02% 0.1249 255.70)` | Turkish Sea | white, 8.1 to 1 |
| 12 | `#1b4785` | `oklch(40.26% 0.1158 258.24)` | Indigo Hamlet | white, 9.2 to 1 |
| 13 | `#1d3f75` | `oklch(37.25% 0.1004 259.55)` | Blue Expanse | white, 10.4 to 1 |
| 14 | `#1f3863` | `oklch(34.34% 0.0823 261.16)` | Navy Trim | white, 11.6 to 1 |
| 15 | `#223154` | `oklch(31.97% 0.0649 264.80)` | Boatswain | white, 12.7 to 1 |
| 16 | `#262d49` | `oklch(30.54% 0.0519 272.18)` | Tropical Night Blue | white, 13.4 to 1 |
| 17 | `#2d2b45` | `oklch(30.46% 0.0463 285.43)` | Viola Black | white, 13.5 to 1 |
| 18 | `#382c44` | `oklch(31.70% 0.0456 306.43)` | Obsidian Lava Black | white, 13 to 1 |
| 19 | `#462e43` | `oklch(33.89% 0.0486 331.72)` | Purple Pennant | white, 12 to 1 |
| 20 | `#56323f` | `oklch(36.63% 0.0548 357.17)` | Blackberry Tart | white, 10.8 to 1 |
| 21 | `#643839` | `oklch(39.52% 0.0634 18.67)` | Andorra | white, 9.7 to 1 |
| 22 | `#713d33` | `oklch(42.23% 0.0743 32.33)` | Metallic Copper | white, 8.6 to 1 |
| 23 | `#7f422e` | `oklch(45.13% 0.0907 38.83)` | Coppery Orange | white, 7.7 to 1 |
| 24 | `#914528` | `oklch(48.26% 0.1108 40.77)` | Dark Brazilian Topaz | white, 6.7 to 1 |
| 25 | `#a44824` | `oklch(51.48% 0.1315 40.31)` | Potter’s Clay | white, 5.9 to 1 |
| 26 | `#b64a22` | `oklch(54.63% 0.1494 39.61)` | Orange Wood | white, 5.2 to 1 |
| 27 | `#c44f1d` | `oklch(57.56% 0.1613 40.78)` | Red Panda | white, 4.6 to 1 |
| 28 | `#d05819` | `oklch(60.53% 0.1669 43.25)` | Tomato Bisque | black, 5 to 1 |
| 29 | `#da621b` | `oklch(63.55% 0.1684 45.87)` | Ancient Bamboo | black, 5.7 to 1 |
| 30 | `#e26d1f` | `oklch(66.37% 0.1675 48.37)` | Lusty Orange | black, 6.4 to 1 |
| 31 | `#e97625` | `oklch(68.76% 0.1659 50.51)` | Orange Gluttony | black, 7 to 1 |
| 32 | `#ee7d28` | `oklch(70.47% 0.1654 52.02)` | Chaat Masala | black, 7.5 to 1 |

## CSS

```css
background: conic-gradient(from 270deg, #55b2e6 0.0%, #4eabe1 3.2%, #46a2da 6.5%, #3c97d2 9.7%, #338bc9 12.9%, #2b80c0 16.1%, #2576b8 19.4%, #1d6caf 22.6%, #1662a6 25.8%, #14589d 29.0%, #174f92 32.3%, #1b4785 35.5%, #1d3f75 38.7%, #1f3863 41.9%, #223154 45.2%, #262d49 48.4%, #2d2b45 51.6%, #382c44 54.8%, #462e43 58.1%, #56323f 61.3%, #643839 64.5%, #713d33 67.7%, #7f422e 71.0%, #914528 74.2%, #a44824 77.4%, #b64a22 80.6%, #c44f1d 83.9%, #d05819 87.1%, #da621b 90.3%, #e26d1f 93.5%, #e97625 96.8%, #ee7d28 100.0%);
background: conic-gradient(from 270deg in oklch, oklch(72.83% 0.1157 235.55) 0.0%, oklch(70.83% 0.1174 236.93) 3.2%, oklch(68.01% 0.1199 238.87) 6.5%, oklch(64.70% 0.1227 241.14) 9.7%, oklch(61.25% 0.1251 243.52) 12.9%, oklch(57.98% 0.1266 245.77) 16.1%, oklch(54.97% 0.1277 247.70) 19.4%, oklch(51.89% 0.1293 249.43) 22.6%, oklch(48.82% 0.1301 251.19) 25.8%, oklch(45.84% 0.1291 253.20) 29.0%, oklch(43.02% 0.1249 255.70) 32.3%, oklch(40.26% 0.1158 258.24) 35.5%, oklch(37.25% 0.1004 259.55) 38.7%, oklch(34.34% 0.0823 261.16) 41.9%, oklch(31.97% 0.0649 264.80) 45.2%, oklch(30.54% 0.0519 272.18) 48.4%, oklch(30.46% 0.0463 285.43) 51.6%, oklch(31.70% 0.0456 306.43) 54.8%, oklch(33.89% 0.0486 331.72) 58.1%, oklch(36.63% 0.0548 357.17) 61.3%, oklch(39.52% 0.0634 18.67) 64.5%, oklch(42.23% 0.0743 32.33) 67.7%, oklch(45.13% 0.0907 38.83) 71.0%, oklch(48.26% 0.1108 40.77) 74.2%, oklch(51.48% 0.1315 40.31) 77.4%, oklch(54.63% 0.1494 39.61) 80.6%, oklch(57.56% 0.1613 40.78) 83.9%, oklch(60.53% 0.1669 43.25) 87.1%, oklch(63.55% 0.1684 45.87) 90.3%, oklch(66.37% 0.1675 48.37) 93.5%, oklch(68.76% 0.1659 50.51) 96.8%, oklch(70.47% 0.1654 52.02) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.728 | 0.116 | 235.5 |
| 2 | 0.575 | 0.127 | 246.1 |
| 3 | 0.421 | 0.123 | 256.7 |
| 4 | 0.303 | 0.048 | 277.8 |
| 5 | 0.413 | 0.07 | 388.8 |
| 6 | 0.571 | 0.16 | 400.4 |
| 7 | 0.705 | 0.165 | 412 |

## In these collections

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

## Other forms

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