# Complementary blue, gray and brown angular gradient

Complementary blue, gray and brown angular gradient with 32 colors: #044cab, #0152b1, #005bb9, #0065c1, #006fca, #0078d2, #0080d8, #1387dd, #248edf, #3195e0, #3b9bde, #46a1da, #58a6d2, #6baac9, #7badc0, #87afb9, #8db1b3, #90b4ac, #95b6a1, #9fb592, #acb283, #b5ae77, #baaa6b, #bca65d, #bba24d, #b99e3c, #b7992d, #b39121, #ae8918, #a78113, #a17a10, #9d750d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kacHi4SL0-9UvPvdDzv3pmztgtvpKqr7A`
- Page: https://grabient.com/kacHi4SL0-9UvPvdDzv3pmztgtvpKqr7A?style=angularGradient&steps=32
- Drawn as: angular gradient, 32 steps, 90 degrees
- Kinds: light center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.5 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 | `#044cab` | `oklch(44.09% 0.1654 258.75)` | Soulstone Blue | white, 7.9 to 1 |
| 2 | `#0152b1` | `oklch(45.84% 0.1663 257.65)` | Aarhusian Sky | white, 7.3 to 1 |
| 3 | `#005bb9` | `oklch(48.33% 0.1657 256.12)` | Bottled Sea | white, 6.5 to 1 |
| 4 | `#0065c1` | `oklch(51.20% 0.1646 254.29)` | Blue Diamond | white, 5.7 to 1 |
| 5 | `#006fca` | `oklch(54.11% 0.1638 252.39)` | Indigo Carmine | white, 5 to 1 |
| 6 | `#0078d2` | `oklch(56.71% 0.1631 250.59)` | Science Blue | black, 4.6 to 1 |
| 7 | `#0080d8` | `oklch(58.89% 0.1634 249.22)` | Electron Blue | black, 5 to 1 |
| 8 | `#1387dd` | `oklch(60.96% 0.1595 248.33)` | Blue Cola | black, 5.5 to 1 |
| 9 | `#248edf` | `oklch(62.90% 0.1526 247.38)` | Bleu de France | black, 6 to 1 |
| 10 | `#3195e0` | `oklch(64.72% 0.1440 245.83)` | Homeworld | black, 6.4 to 1 |
| 11 | `#3b9bde` | `oklch(66.40% 0.1335 243.10)` | Flax Flower Blue | black, 6.9 to 1 |
| 12 | `#46a1da` | `oklch(67.95% 0.1197 239.23)` | Waimea Blue | black, 7.3 to 1 |
| 13 | `#58a6d2` | `oklch(69.40% 0.1006 235.27)` | First Landing | black, 7.8 to 1 |
| 14 | `#6baac9` | `oklch(70.72% 0.0795 230.42)` | Blue Topaz | black, 8.2 to 1 |
| 15 | `#7badc0` | `oklch(71.88% 0.0599 223.70)` | Blue Eye Samurai | black, 8.5 to 1 |
| 16 | `#87afb9` | `oklch(72.84% 0.0455 214.16)` | Sebastian Inlet | black, 8.8 to 1 |
| 17 | `#8db1b3` | `oklch(73.57% 0.0394 200.37)` | Undersea | black, 9.1 to 1 |
| 18 | `#90b4ac` | `oklch(74.13% 0.0404 180.31)` | Treetop | black, 9.3 to 1 |
| 19 | `#95b6a1` | `oklch(74.51% 0.0462 156.86)` | Garden District | black, 9.4 to 1 |
| 20 | `#9fb592` | `oklch(74.68% 0.0549 133.52)` | Soap Green | black, 9.4 to 1 |
| 21 | `#acb283` | `oklch(74.60% 0.0644 113.83)` | Great Green | black, 9.4 to 1 |
| 22 | `#b5ae77` | `oklch(74.27% 0.0732 101.11)` | Goldie Oldie | black, 9.2 to 1 |
| 23 | `#baaa6b` | `oklch(73.67% 0.0842 94.88)` | Swampwater | black, 9 to 1 |
| 24 | `#bca65d` | `oklch(72.83% 0.0969 92.85)` | Nonpareil Apple | black, 8.7 to 1 |
| 25 | `#bba24d` | `oklch(71.77% 0.1095 93.07)` | Tupelo Honey | black, 8.4 to 1 |
| 26 | `#b99e3c` | `oklch(70.50% 0.1198 93.59)` | Tiki Torch | black, 8 to 1 |
| 27 | `#b7992d` | `oklch(69.03% 0.1261 92.50)` | Sahara | black, 7.5 to 1 |
| 28 | `#b39121` | `oklch(67.05% 0.1277 90.36)` | Faint Gold | black, 7 to 1 |
| 29 | `#ae8918` | `oklch(64.68% 0.1260 88.22)` | Yellow Brown | black, 6.3 to 1 |
| 30 | `#a78113` | `oklch(62.26% 0.1226 86.22)` | Brazen | black, 5.7 to 1 |
| 31 | `#a17a10` | `oklch(60.13% 0.1192 84.54)` | Nataneyu Gold | black, 5.2 to 1 |
| 32 | `#9d750d` | `oklch(58.66% 0.1171 83.33)` | Barbarian Leather | black, 4.9 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #044cab 0.0%, #0152b1 3.2%, #005bb9 6.5%, #0065c1 9.7%, #006fca 12.9%, #0078d2 16.1%, #0080d8 19.4%, #1387dd 22.6%, #248edf 25.8%, #3195e0 29.0%, #3b9bde 32.3%, #46a1da 35.5%, #58a6d2 38.7%, #6baac9 41.9%, #7badc0 45.2%, #87afb9 48.4%, #8db1b3 51.6%, #90b4ac 54.8%, #95b6a1 58.1%, #9fb592 61.3%, #acb283 64.5%, #b5ae77 67.7%, #baaa6b 71.0%, #bca65d 74.2%, #bba24d 77.4%, #b99e3c 80.6%, #b7992d 83.9%, #b39121 87.1%, #ae8918 90.3%, #a78113 93.5%, #a17a10 96.8%, #9d750d 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(44.09% 0.1654 258.75) 0.0%, oklch(45.84% 0.1663 257.65) 3.2%, oklch(48.33% 0.1657 256.12) 6.5%, oklch(51.20% 0.1646 254.29) 9.7%, oklch(54.11% 0.1638 252.39) 12.9%, oklch(56.71% 0.1631 250.59) 16.1%, oklch(58.89% 0.1634 249.22) 19.4%, oklch(60.96% 0.1595 248.33) 22.6%, oklch(62.90% 0.1526 247.38) 25.8%, oklch(64.72% 0.1440 245.83) 29.0%, oklch(66.40% 0.1335 243.10) 32.3%, oklch(67.95% 0.1197 239.23) 35.5%, oklch(69.40% 0.1006 235.27) 38.7%, oklch(70.72% 0.0795 230.42) 41.9%, oklch(71.88% 0.0599 223.70) 45.2%, oklch(72.84% 0.0455 214.16) 48.4%, oklch(73.57% 0.0394 200.37) 51.6%, oklch(74.13% 0.0404 180.31) 54.8%, oklch(74.51% 0.0462 156.86) 58.1%, oklch(74.68% 0.0549 133.52) 61.3%, oklch(74.60% 0.0644 113.83) 64.5%, oklch(74.27% 0.0732 101.11) 67.7%, oklch(73.67% 0.0842 94.88) 71.0%, oklch(72.83% 0.0969 92.85) 74.2%, oklch(71.77% 0.1095 93.07) 77.4%, oklch(70.50% 0.1198 93.59) 80.6%, oklch(69.03% 0.1261 92.50) 83.9%, oklch(67.05% 0.1277 90.36) 87.1%, oklch(64.68% 0.1260 88.22) 90.3%, oklch(62.26% 0.1226 86.22) 93.5%, oklch(60.13% 0.1192 84.54) 96.8%, oklch(58.66% 0.1171 83.33) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.441 | 0.165 | 258.8 |
| 2 | 0.571 | 0.168 | 250.3 |
| 3 | 0.669 | 0.13 | 241.8 |
| 4 | 0.732 | 0.041 | 208 |
| 5 | 0.744 | 0.07 | 104.5 |
| 6 | 0.693 | 0.125 | 92.8 |
| 7 | 0.587 | 0.117 | 83.3 |

## In these collections

- [Yellow and blue gradients](https://grabient.com/yellow-and-blue-gradients)
- [Navy and gold](https://grabient.com/navy-and-gold)

## Other forms

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