# Complementary navy to brown radial gradient

Complementary navy to brown radial gradient with 32 colors: #1d1735, #1f1835, #211a34, #241c35, #271f36, #2a2139, #2d243f, #312646, #35294c, #392c50, #3c3051, #3f3451, #433850, #483b4e, #4f3e4c, #564046, #5a4440, #5c4a3c, #5e4f3b, #625439, #685937, #6f5e35, #766234, #7b6738, #806d3e, #857245, #8a774b, #907c4f, #978251, #9e8952, #a48e52, #a89253. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcOinOoZBBCkXv8wDMJNw1NcCZQZKmD_1J_AY`
- Page: https://grabient.com/kcOinOoZBBCkXv8wDMJNw1NcCZQZKmD_1J_AY?style=radialGradient&steps=32&angle=135
- Drawn as: radial gradient, 32 steps, 135 degrees
- Kinds: dark to light, muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.6 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 | `#1d1735` | `oklch(22.83% 0.0565 290.39)` | Lost in Sadness | white, 17.1 to 1 |
| 2 | `#1f1835` | `oklch(23.35% 0.0539 292.10)` | Dark Knight | white, 16.9 to 1 |
| 3 | `#211a34` | `oklch(24.06% 0.0499 294.63)` | Sombre Night | white, 16.6 to 1 |
| 4 | `#241c35` | `oklch(24.94% 0.0461 297.28)` | Eclipse Elixir | white, 16.2 to 1 |
| 5 | `#271f36` | `oklch(25.93% 0.0440 299.36)` | Cold Steel | white, 15.7 to 1 |
| 6 | `#2a2139` | `oklch(27.03% 0.0455 300.13)` | Bleached Cedar | white, 15.2 to 1 |
| 7 | `#2d243f` | `oklch(28.32% 0.0511 299.45)` | Telopea | white, 14.6 to 1 |
| 8 | `#312646` | `oklch(29.71% 0.0580 298.33)` | Blackberry Black | white, 14 to 1 |
| 9 | `#35294c` | `oklch(31.13% 0.0635 297.88)` | Operetta Mauve | white, 13.3 to 1 |
| 10 | `#392c50` | `oklch(32.47% 0.0645 299.13)` | Midnight Pie | white, 12.7 to 1 |
| 11 | `#3c3051` | `oklch(33.73% 0.0598 300.20)` | Sanctum of Shadows | white, 12.1 to 1 |
| 12 | `#3f3451` | `oklch(34.98% 0.0515 301.52)` | Maharaja | white, 11.5 to 1 |
| 13 | `#433850` | `oklch(36.21% 0.0425 305.59)` | Gothic Grape | white, 10.9 to 1 |
| 14 | `#483b4e` | `oklch(37.44% 0.0356 314.93)` | Plum Island | white, 10.4 to 1 |
| 15 | `#4f3e4c` | `oklch(38.66% 0.0325 333.09)` | Royal Velvet | white, 9.9 to 1 |
| 16 | `#564046` | `oklch(39.84% 0.0312 0.87)` | Beauport Aubergine | white, 9.4 to 1 |
| 17 | `#5a4440` | `oklch(41.03% 0.0315 31.85)` | Heritage Oak | white, 8.9 to 1 |
| 18 | `#5c4a3c` | `oklch(42.31% 0.0335 59.31)` | Mousy Brown | white, 8.4 to 1 |
| 19 | `#5e4f3b` | `oklch(43.73% 0.0371 76.80)` | Oak Plank | white, 7.8 to 1 |
| 20 | `#625439` | `oklch(45.32% 0.0442 84.79)` | Oliva Oscuro | white, 7.3 to 1 |
| 21 | `#685937` | `oklch(47.02% 0.0533 87.09)` | Beach Casuarina | white, 6.8 to 1 |
| 22 | `#6f5e35` | `oklch(48.78% 0.0621 86.70)` | Rationality | white, 6.3 to 1 |
| 23 | `#766234` | `oklch(50.54% 0.0684 86.60)` | Twig Basket | white, 5.8 to 1 |
| 24 | `#7b6738` | `oklch(52.29% 0.0703 87.59)` | Racoon Eyes | white, 5.4 to 1 |
| 25 | `#806d3e` | `oklch(54.06% 0.0691 87.55)` | Musket | white, 5 to 1 |
| 26 | `#857245` | `oklch(55.85% 0.0668 87.04)` | Mud House | white, 4.6 to 1 |
| 27 | `#8a774b` | `oklch(57.64% 0.0656 86.68)` | Pickled Okra | black, 4.8 to 1 |
| 28 | `#907c4f` | `oklch(59.46% 0.0673 87.05)` | Safari Trail | black, 5.1 to 1 |
| 29 | `#978251` | `oklch(61.48% 0.0718 87.99)` | Picholine Olive | black, 5.6 to 1 |
| 30 | `#9e8952` | `oklch(63.51% 0.0776 89.16)` | Goldbrown | black, 6.1 to 1 |
| 31 | `#a48e52` | `oklch(65.29% 0.0831 90.26)` | Green Ochre | black, 6.5 to 1 |
| 32 | `#a89253` | `oklch(66.54% 0.0868 91.02)` | Salted Capers | black, 6.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #1d1735 0.0%, #1f1835 3.2%, #211a34 6.5%, #241c35 9.7%, #271f36 12.9%, #2a2139 16.1%, #2d243f 19.4%, #312646 22.6%, #35294c 25.8%, #392c50 29.0%, #3c3051 32.3%, #3f3451 35.5%, #433850 38.7%, #483b4e 41.9%, #4f3e4c 45.2%, #564046 48.4%, #5a4440 51.6%, #5c4a3c 54.8%, #5e4f3b 58.1%, #625439 61.3%, #685937 64.5%, #6f5e35 67.7%, #766234 71.0%, #7b6738 74.2%, #806d3e 77.4%, #857245 80.6%, #8a774b 83.9%, #907c4f 87.1%, #978251 90.3%, #9e8952 93.5%, #a48e52 96.8%, #a89253 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(22.83% 0.0565 290.39) 0.0%, oklch(23.35% 0.0539 292.10) 3.2%, oklch(24.06% 0.0499 294.63) 6.5%, oklch(24.94% 0.0461 297.28) 9.7%, oklch(25.93% 0.0440 299.36) 12.9%, oklch(27.03% 0.0455 300.13) 16.1%, oklch(28.32% 0.0511 299.45) 19.4%, oklch(29.71% 0.0580 298.33) 22.6%, oklch(31.13% 0.0635 297.88) 25.8%, oklch(32.47% 0.0645 299.13) 29.0%, oklch(33.73% 0.0598 300.20) 32.3%, oklch(34.98% 0.0515 301.52) 35.5%, oklch(36.21% 0.0425 305.59) 38.7%, oklch(37.44% 0.0356 314.93) 41.9%, oklch(38.66% 0.0325 333.09) 45.2%, oklch(39.84% 0.0312 0.87) 48.4%, oklch(41.03% 0.0315 31.85) 51.6%, oklch(42.31% 0.0335 59.31) 54.8%, oklch(43.73% 0.0371 76.80) 58.1%, oklch(45.32% 0.0442 84.79) 61.3%, oklch(47.02% 0.0533 87.09) 64.5%, oklch(48.78% 0.0621 86.70) 67.7%, oklch(50.54% 0.0684 86.60) 71.0%, oklch(52.29% 0.0703 87.59) 74.2%, oklch(54.06% 0.0691 87.55) 77.4%, oklch(55.85% 0.0668 87.04) 80.6%, oklch(57.64% 0.0656 86.68) 83.9%, oklch(59.46% 0.0673 87.05) 87.1%, oklch(61.48% 0.0718 87.99) 90.3%, oklch(63.51% 0.0776 89.16) 93.5%, oklch(65.29% 0.0831 90.26) 96.8%, oklch(66.54% 0.0868 91.02) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.228 | 0.056 | 290.4 |
| 2 | 0.264 | 0.044 | 299.9 |
| 3 | 0.323 | 0.065 | 298.8 |
| 4 | 0.378 | 0.034 | 318.9 |
| 5 | 0.433 | 0.036 | 433.1 |
| 6 | 0.508 | 0.069 | 446.8 |
| 7 | 0.587 | 0.066 | 446.8 |
| 8 | 0.665 | 0.087 | 451 |

## In these collections

- [Wallpaper gradients](https://grabient.com/wallpaper-gradients)
- [Moody gradients](https://grabient.com/moody-gradients)
- [Dark muted gradients](https://grabient.com/dark-muted-gradients)

## Other forms

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