# Navy, brown and tan angular gradient

Navy, brown and tan angular gradient with 80 colors: #354b62, #374b62, #3a4a63, #3d4963, #414863, #454763, #494561, #4d4460, #51425d, #55415a, #584056, #5c4052, #5e3f4e, #613f49, #634045, #644141, #66423e, #67443b, #684538, #694736, #6b4a35, #6c4c34, #6f4e33, #715132, #745431, #785730, #7b5a2f, #7f5d2e, #84602e, #88632d, #8d662c, #926a2c, #976d2c, #9b712c, #a0742d, #a5782e, #aa7c30, #ae7f32, #b28335, #b68839, #b98c3d, #bc9143, #bf974b, #c39d53, #c7a45c, #caab66, #ceb271, #d2b97b, #d6c086, #dac691, #decd9b, #e1d2a5, #e5d8ae, #e8dcb6, #ebe0bd, #ede3c3, #eee6c8, #efe7cb, #efe6cc, #eee5cb, #ede2c8, #eadec3, #e6d7bc, #e1d0b3, #dcc7a9, #d6bd9e, #d0b292, #caa687, #c39a7b, #bc8d6f, #b58164, #ae745b, #a76752, #9f5b4a, #985044, #91453f, #8a3c3a, #843337, #7f2c35, #7a2633. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWZyKwt5RTVQoQx1DUFMyq3A`
- Page: https://grabient.com/kWZyKwt5RTVQoQx1DUFMyq3A?style=angularGradient&steps=80&angle=315
- Drawn as: angular gradient, 80 steps, 315 degrees
- Kinds: light center, muted, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.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 | `#354b62` | `oklch(40.55% 0.0469 248.20)` | Bluedgeons | white, 8.9 to 1 |
| 2 | `#374b62` | `oklch(40.62% 0.0470 252.93)` | Master | white, 8.9 to 1 |
| 3 | `#3a4a63` | `oklch(40.65% 0.0471 258.72)` | Silent Sea | white, 8.9 to 1 |
| 4 | `#3d4963` | `oklch(40.67% 0.0472 265.48)` | Silent Sea | white, 8.9 to 1 |
| 5 | `#414863` | `oklch(40.67% 0.0472 273.08)` | Blue Wonder | white, 9 to 1 |
| 6 | `#454763` | `oklch(40.66% 0.0472 281.39)` | Darkshore | white, 9 to 1 |
| 7 | `#494561` | `oklch(40.66% 0.0472 290.32)` | Purple Blanket | white, 9 to 1 |
| 8 | `#4d4460` | `oklch(40.65% 0.0473 299.73)` | Royal Indigo | white, 9.1 to 1 |
| 9 | `#51425d` | `oklch(40.66% 0.0473 309.51)` | Royal Indigo | white, 9.1 to 1 |
| 10 | `#55415a` | `oklch(40.68% 0.0474 319.55)` | Navy Cosmos | white, 9.1 to 1 |
| 11 | `#584056` | `oklch(40.73% 0.0476 329.73)` | Bella | white, 9.1 to 1 |
| 12 | `#5c4052` | `oklch(40.81% 0.0478 339.92)` | Amaranthine | white, 9.1 to 1 |
| 13 | `#5e3f4e` | `oklch(40.92% 0.0481 350.01)` | Old Eggplant | white, 9 to 1 |
| 14 | `#613f49` | `oklch(41.07% 0.0485 359.89)` | Catawba Grape | white, 9 to 1 |
| 15 | `#634045` | `oklch(41.28% 0.0490 9.44)` | Deep Maroon | white, 8.9 to 1 |
| 16 | `#644141` | `oklch(41.54% 0.0497 18.54)` | Federation Brown | white, 8.8 to 1 |
| 17 | `#66423e` | `oklch(41.85% 0.0505 27.07)` | Autumn Fall | white, 8.7 to 1 |
| 18 | `#67443b` | `oklch(42.24% 0.0515 34.91)` | Chocolate Lab | white, 8.5 to 1 |
| 19 | `#684538` | `oklch(42.70% 0.0526 41.96)` | Rugged Brown | white, 8.3 to 1 |
| 20 | `#694736` | `oklch(43.24% 0.0540 48.08)` | Satin Soil | white, 8.1 to 1 |
| 21 | `#6b4a35` | `oklch(43.87% 0.0555 53.18)` | Guitar | white, 7.9 to 1 |
| 22 | `#6c4c34` | `oklch(44.58% 0.0575 57.51)` | Tilled Soil | white, 7.7 to 1 |
| 23 | `#6f4e33` | `oklch(45.37% 0.0600 61.24)` | Coffee | white, 7.4 to 1 |
| 24 | `#715132` | `oklch(46.25% 0.0630 64.40)` | Chocolate Rain | white, 7.1 to 1 |
| 25 | `#745431` | `oklch(47.19% 0.0662 67.06)` | Oak Barrel | white, 6.8 to 1 |
| 26 | `#785730` | `oklch(48.19% 0.0698 69.25)` | Arable Brown | white, 6.5 to 1 |
| 27 | `#7b5a2f` | `oklch(49.25% 0.0735 71.02)` | Breen | white, 6.2 to 1 |
| 28 | `#7f5d2e` | `oklch(50.37% 0.0774 72.43)` | Sleek Otter | white, 5.9 to 1 |
| 29 | `#84602e` | `oklch(51.53% 0.0814 73.52)` | Bronze Brown | white, 5.6 to 1 |
| 30 | `#88632d` | `oklch(52.73% 0.0854 74.33)` | Kumera | white, 5.4 to 1 |
| 31 | `#8d662c` | `oklch(53.96% 0.0893 74.92)` | Tapenade | white, 5.1 to 1 |
| 32 | `#926a2c` | `oklch(55.22% 0.0931 75.33)` | Armageddon Dunes | white, 4.8 to 1 |
| 33 | `#976d2c` | `oklch(56.50% 0.0967 75.61)` | Damascene | white, 4.6 to 1 |
| 34 | `#9b712c` | `oklch(57.79% 0.1000 75.81)` | Buttered Rum | black, 4.7 to 1 |
| 35 | `#a0742d` | `oklch(59.10% 0.1030 75.98)` | Digger’s Gold | black, 5 to 1 |
| 36 | `#a5782e` | `oklch(60.40% 0.1055 76.16)` | Natural Evolution | black, 5.3 to 1 |
| 37 | `#aa7c30` | `oklch(61.70% 0.1076 76.40)` | Release the Hounds | black, 5.6 to 1 |
| 38 | `#ae7f32` | `oklch(63.00% 0.1092 76.75)` | Bronze Leaf | black, 5.9 to 1 |
| 39 | `#b28335` | `oklch(64.27% 0.1101 77.26)` | Weissbier | black, 6.2 to 1 |
| 40 | `#b68839` | `oklch(65.52% 0.1104 77.97)` | Brass Yellow | black, 6.5 to 1 |
| 41 | `#b98c3d` | `oklch(66.78% 0.1099 78.92)` | Trading Post | black, 6.8 to 1 |
| 42 | `#bc9143` | `oklch(68.21% 0.1084 80.01)` | Fervent Brass | black, 7.2 to 1 |
| 43 | `#bf974b` | `oklch(69.81% 0.1060 81.21)` | Where Buffalo Roam | black, 7.7 to 1 |
| 44 | `#c39d53` | `oklch(71.54% 0.1028 82.49)` | Steampunk Gold | black, 8.2 to 1 |
| 45 | `#c7a45c` | `oklch(73.38% 0.0990 83.81)` | Winter Pear Beige | black, 8.8 to 1 |
| 46 | `#caab66` | `oklch(75.30% 0.0945 85.15)` | Ginger Crunch | black, 9.5 to 1 |
| 47 | `#ceb271` | `oklch(77.26% 0.0897 86.49)` | Tan | black, 10.1 to 1 |
| 48 | `#d2b97b` | `oklch(79.24% 0.0845 87.79)` | Further Afield | black, 10.9 to 1 |
| 49 | `#d6c086` | `oklch(81.19% 0.0790 89.03)` | Vermicelles | black, 11.7 to 1 |
| 50 | `#dac691` | `oklch(83.09% 0.0735 90.17)` | Lemon Sorbet Yellow | black, 12.4 to 1 |
| 51 | `#decd9b` | `oklch(84.91% 0.0679 91.20)` | Desert Temple | black, 13.2 to 1 |
| 52 | `#e1d2a5` | `oklch(86.61% 0.0625 92.07)` | Gratin Dauphinois | black, 14 to 1 |
| 53 | `#e5d8ae` | `oklch(88.17% 0.0572 92.78)` | Champagne Cocktail | black, 14.7 to 1 |
| 54 | `#e8dcb6` | `oklch(89.54% 0.0523 93.28)` | Jodhpurs | black, 15.3 to 1 |
| 55 | `#ebe0bd` | `oklch(90.71% 0.0478 93.54)` | Beurre Blanc | black, 15.9 to 1 |
| 56 | `#ede3c3` | `oklch(91.64% 0.0439 93.55)` | Cream Silk | black, 16.4 to 1 |
| 57 | `#eee6c8` | `oklch(92.29% 0.0406 93.27)` | Scotch Mist | black, 16.7 to 1 |
| 58 | `#efe7cb` | `oklch(92.63% 0.0381 92.68)` | Distressed White | black, 16.9 to 1 |
| 59 | `#efe6cc` | `oklch(92.64% 0.0365 91.74)` | Wax Poetic | black, 16.9 to 1 |
| 60 | `#eee5cb` | `oklch(92.28% 0.0358 90.43)` | Banana Milkshake | black, 16.7 to 1 |
| 61 | `#ede2c8` | `oklch(91.49% 0.0362 88.66)` | Wedding Cake | black, 16.3 to 1 |
| 62 | `#eadec3` | `oklch(90.20% 0.0376 86.31)` | Adobe Sand | black, 15.6 to 1 |
| 63 | `#e6d7bc` | `oklch(88.48% 0.0398 83.44)` | Nature Trail | black, 14.8 to 1 |
| 64 | `#e1d0b3` | `oklch(86.36% 0.0427 80.10)` | Assateague Sand | black, 13.8 to 1 |
| 65 | `#dcc7a9` | `oklch(83.89% 0.0464 76.36)` | Peasant Bread | black, 12.7 to 1 |
| 66 | `#d6bd9e` | `oklch(81.14% 0.0505 72.28)` | Silken Stockings | black, 11.6 to 1 |
| 67 | `#d0b292` | `oklch(78.14% 0.0552 67.93)` | Baker’s Bread | black, 10.4 to 1 |
| 68 | `#caa687` | `oklch(74.95% 0.0603 63.37)` | Labyrinth Walk | black, 9.3 to 1 |
| 69 | `#c39a7b` | `oklch(71.62% 0.0656 58.66)` | Egyptian Pyramid | black, 8.2 to 1 |
| 70 | `#bc8d6f` | `oklch(68.20% 0.0711 53.86)` | Nobody but Ben | black, 7.1 to 1 |
| 71 | `#b58164` | `oklch(64.74% 0.0768 49.04)` | Silken Chocolate | black, 6.2 to 1 |
| 72 | `#ae745b` | `oklch(61.29% 0.0824 44.26)` | Arizona Clay | black, 5.4 to 1 |
| 73 | `#a76752` | `oklch(57.90% 0.0880 39.58)` | Ruddy Oak | black, 4.7 to 1 |
| 74 | `#9f5b4a` | `oklch(54.62% 0.0934 35.07)` | Grand Canyon | white, 5.1 to 1 |
| 75 | `#985044` | `oklch(51.51% 0.0986 30.78)` | Thy Flesh Consumed | white, 5.8 to 1 |
| 76 | `#91453f` | `oklch(48.61% 0.1033 26.79)` | Red Craft | white, 6.7 to 1 |
| 77 | `#8a3c3a` | `oklch(45.98% 0.1077 23.16)` | Red Blooded | white, 7.5 to 1 |
| 78 | `#843337` | `oklch(43.65% 0.1115 19.94)` | Tall Poppy | white, 8.3 to 1 |
| 79 | `#7f2c35` | `oklch(41.70% 0.1147 17.21)` | Paprika | white, 9.1 to 1 |
| 80 | `#7a2633` | `oklch(40.16% 0.1171 15.01)` | Amaranth Blossom | white, 9.7 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #354b62 0.0%, #374b62 1.3%, #3a4a63 2.5%, #3d4963 3.8%, #414863 5.1%, #454763 6.3%, #494561 7.6%, #4d4460 8.9%, #51425d 10.1%, #55415a 11.4%, #584056 12.7%, #5c4052 13.9%, #5e3f4e 15.2%, #613f49 16.5%, #634045 17.7%, #644141 19.0%, #66423e 20.3%, #67443b 21.5%, #684538 22.8%, #694736 24.1%, #6b4a35 25.3%, #6c4c34 26.6%, #6f4e33 27.8%, #715132 29.1%, #745431 30.4%, #785730 31.6%, #7b5a2f 32.9%, #7f5d2e 34.2%, #84602e 35.4%, #88632d 36.7%, #8d662c 38.0%, #926a2c 39.2%, #976d2c 40.5%, #9b712c 41.8%, #a0742d 43.0%, #a5782e 44.3%, #aa7c30 45.6%, #ae7f32 46.8%, #b28335 48.1%, #b68839 49.4%, #b98c3d 50.6%, #bc9143 51.9%, #bf974b 53.2%, #c39d53 54.4%, #c7a45c 55.7%, #caab66 57.0%, #ceb271 58.2%, #d2b97b 59.5%, #d6c086 60.8%, #dac691 62.0%, #decd9b 63.3%, #e1d2a5 64.6%, #e5d8ae 65.8%, #e8dcb6 67.1%, #ebe0bd 68.4%, #ede3c3 69.6%, #eee6c8 70.9%, #efe7cb 72.2%, #efe6cc 73.4%, #eee5cb 74.7%, #ede2c8 75.9%, #eadec3 77.2%, #e6d7bc 78.5%, #e1d0b3 79.7%, #dcc7a9 81.0%, #d6bd9e 82.3%, #d0b292 83.5%, #caa687 84.8%, #c39a7b 86.1%, #bc8d6f 87.3%, #b58164 88.6%, #ae745b 89.9%, #a76752 91.1%, #9f5b4a 92.4%, #985044 93.7%, #91453f 94.9%, #8a3c3a 96.2%, #843337 97.5%, #7f2c35 98.7%, #7a2633 100.0%);
background: conic-gradient(from 315deg in oklch, oklch(40.55% 0.0469 248.20) 0.0%, oklch(40.62% 0.0470 252.93) 1.3%, oklch(40.65% 0.0471 258.72) 2.5%, oklch(40.67% 0.0472 265.48) 3.8%, oklch(40.67% 0.0472 273.08) 5.1%, oklch(40.66% 0.0472 281.39) 6.3%, oklch(40.66% 0.0472 290.32) 7.6%, oklch(40.65% 0.0473 299.73) 8.9%, oklch(40.66% 0.0473 309.51) 10.1%, oklch(40.68% 0.0474 319.55) 11.4%, oklch(40.73% 0.0476 329.73) 12.7%, oklch(40.81% 0.0478 339.92) 13.9%, oklch(40.92% 0.0481 350.01) 15.2%, oklch(41.07% 0.0485 359.89) 16.5%, oklch(41.28% 0.0490 9.44) 17.7%, oklch(41.54% 0.0497 18.54) 19.0%, oklch(41.85% 0.0505 27.07) 20.3%, oklch(42.24% 0.0515 34.91) 21.5%, oklch(42.70% 0.0526 41.96) 22.8%, oklch(43.24% 0.0540 48.08) 24.1%, oklch(43.87% 0.0555 53.18) 25.3%, oklch(44.58% 0.0575 57.51) 26.6%, oklch(45.37% 0.0600 61.24) 27.8%, oklch(46.25% 0.0630 64.40) 29.1%, oklch(47.19% 0.0662 67.06) 30.4%, oklch(48.19% 0.0698 69.25) 31.6%, oklch(49.25% 0.0735 71.02) 32.9%, oklch(50.37% 0.0774 72.43) 34.2%, oklch(51.53% 0.0814 73.52) 35.4%, oklch(52.73% 0.0854 74.33) 36.7%, oklch(53.96% 0.0893 74.92) 38.0%, oklch(55.22% 0.0931 75.33) 39.2%, oklch(56.50% 0.0967 75.61) 40.5%, oklch(57.79% 0.1000 75.81) 41.8%, oklch(59.10% 0.1030 75.98) 43.0%, oklch(60.40% 0.1055 76.16) 44.3%, oklch(61.70% 0.1076 76.40) 45.6%, oklch(63.00% 0.1092 76.75) 46.8%, oklch(64.27% 0.1101 77.26) 48.1%, oklch(65.52% 0.1104 77.97) 49.4%, oklch(66.78% 0.1099 78.92) 50.6%, oklch(68.21% 0.1084 80.01) 51.9%, oklch(69.81% 0.1060 81.21) 53.2%, oklch(71.54% 0.1028 82.49) 54.4%, oklch(73.38% 0.0990 83.81) 55.7%, oklch(75.30% 0.0945 85.15) 57.0%, oklch(77.26% 0.0897 86.49) 58.2%, oklch(79.24% 0.0845 87.79) 59.5%, oklch(81.19% 0.0790 89.03) 60.8%, oklch(83.09% 0.0735 90.17) 62.0%, oklch(84.91% 0.0679 91.20) 63.3%, oklch(86.61% 0.0625 92.07) 64.6%, oklch(88.17% 0.0572 92.78) 65.8%, oklch(89.54% 0.0523 93.28) 67.1%, oklch(90.71% 0.0478 93.54) 68.4%, oklch(91.64% 0.0439 93.55) 69.6%, oklch(92.29% 0.0406 93.27) 70.9%, oklch(92.63% 0.0381 92.68) 72.2%, oklch(92.64% 0.0365 91.74) 73.4%, oklch(92.28% 0.0358 90.43) 74.7%, oklch(91.49% 0.0362 88.66) 75.9%, oklch(90.20% 0.0376 86.31) 77.2%, oklch(88.48% 0.0398 83.44) 78.5%, oklch(86.36% 0.0427 80.10) 79.7%, oklch(83.89% 0.0464 76.36) 81.0%, oklch(81.14% 0.0505 72.28) 82.3%, oklch(78.14% 0.0552 67.93) 83.5%, oklch(74.95% 0.0603 63.37) 84.8%, oklch(71.62% 0.0656 58.66) 86.1%, oklch(68.20% 0.0711 53.86) 87.3%, oklch(64.74% 0.0768 49.04) 88.6%, oklch(61.29% 0.0824 44.26) 89.9%, oklch(57.90% 0.0880 39.58) 91.1%, oklch(54.62% 0.0934 35.07) 92.4%, oklch(51.51% 0.0986 30.78) 93.7%, oklch(48.61% 0.1033 26.79) 94.9%, oklch(45.98% 0.1077 23.16) 96.2%, oklch(43.65% 0.1115 19.94) 97.5%, oklch(41.70% 0.1147 17.21) 98.7%, oklch(40.16% 0.1171 15.01) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.406 | 0.047 | 248.2 |
| 2 | 0.437 | 0.055 | 412 |
| 3 | 0.661 | 0.11 | 438.4 |
| 4 | 0.921 | 0.036 | 450 |
| 5 | 0.402 | 0.117 | 375 |

## In these collections

- [Library card nostalgia](https://grabient.com/library-card-nostalgia)

## Other forms

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