# Navy, gray and champagne golden hour palette

The Navy, gray and champagne golden hour palette brings together dark blue, blue, gray, light gray, light yellow, and pale orange. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is pale orange.

- Also called: Complementary navy, gray and beige radial gradient
- Seed: `kYOB2yNpm-0wCP1ZAi7aBDAPedPw`
- Page: https://grabient.com/kYOB2yNpm-0wCP1ZAi7aBDAPedPw?style=radialGradient&steps=48&angle=220
- Drawn as: radial gradient, 48 steps, 220 degrees
- Kinds: dark to light, muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 14.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 | `#0b1c2d` | `oklch(22.05% 0.0400 250.31)` | Trapped Darkness | white, 17.2 to 1 |
| 2 | `#0d1f31` | `oklch(23.40% 0.0424 249.68)` | The Count’s Black | white, 16.6 to 1 |
| 3 | `#0f2437` | `oklch(25.18% 0.0461 248.84)` | Celestial Canvas | white, 15.8 to 1 |
| 4 | `#11293f` | `oklch(27.30% 0.0507 247.83)` | Eternal Darkness | white, 14.8 to 1 |
| 5 | `#132f47` | `oklch(29.67% 0.0557 246.71)` | Crow Black Blue | white, 13.7 to 1 |
| 6 | `#153650` | `oklch(32.19% 0.0606 245.53)` | Gibraltar Sea | white, 12.5 to 1 |
| 7 | `#183d59` | `oklch(34.78% 0.0651 244.33)` | Poseidon | white, 11.3 to 1 |
| 8 | `#1b4462` | `oklch(37.36% 0.0685 243.16)` | Forest Blues | white, 10.2 to 1 |
| 9 | `#204b6a` | `oklch(39.82% 0.0706 242.08)` | Indigo Cloth | white, 9.1 to 1 |
| 10 | `#255270` | `oklch(42.08% 0.0708 241.13)` | Midnight Sonata | white, 8.3 to 1 |
| 11 | `#2c5875` | `oklch(44.12% 0.0687 240.61)` | Mountain Lake | white, 7.6 to 1 |
| 12 | `#365d79` | `oklch(46.11% 0.0640 241.33)` | China Pattern | white, 7 to 1 |
| 13 | `#40627c` | `oklch(48.07% 0.0575 242.89)` | Mallard Blue | white, 6.4 to 1 |
| 14 | `#4b677e` | `oklch(49.99% 0.0495 244.78)` | Gloomy Sea | white, 5.9 to 1 |
| 15 | `#566b7f` | `oklch(51.86% 0.0407 246.48)` | Fern Flower | white, 5.5 to 1 |
| 16 | `#5f7080` | `oklch(53.67% 0.0317 247.45)` | Glide Time | white, 5.1 to 1 |
| 17 | `#687480` | `oklch(55.41% 0.0230 247.20)` | Long Lake | white, 4.7 to 1 |
| 18 | `#707980` | `oklch(57.08% 0.0153 245.20)` | Iron Frost | black, 4.7 to 1 |
| 19 | `#787d81` | `oklch(58.65% 0.0090 240.92)` | Tarnished Silver | black, 5 to 1 |
| 20 | `#7e8183` | `oklch(60.13% 0.0048 233.83)` | Ironside | black, 5.3 to 1 |
| 21 | `#838585` | `oklch(61.46% 0.0021 222.77)` | Gryphon | black, 5.6 to 1 |
| 22 | `#888888` | `oklch(62.66% 0.0002 208.12)` | Argent | black, 5.9 to 1 |
| 23 | `#8b8b8b` | `oklch(63.76% 0.0000 89.88)` | City Storm | black, 6.1 to 1 |
| 24 | `#8e8e8e` | `oklch(64.79% 0.0000 89.88)` | Stieglitz Silver | black, 6.4 to 1 |
| 25 | `#919191` | `oklch(65.77% 0.0000 89.88)` | Tin | black, 6.6 to 1 |
| 26 | `#949494` | `oklch(66.73% 0.0001 134.47)` | Grey Shingle | black, 6.9 to 1 |
| 27 | `#979796` | `oklch(67.72% 0.0014 117.47)` | Shark Fin | black, 7.2 to 1 |
| 28 | `#9b9b98` | `oklch(68.74% 0.0031 103.08)` | Polished Pewter | black, 7.5 to 1 |
| 29 | `#9f9e9a` | `oklch(69.85% 0.0051 92.36)` | Bedrock | black, 7.8 to 1 |
| 30 | `#a4a19c` | `oklch(71.03% 0.0075 85.72)` | Missouri Mud | black, 8.1 to 1 |
| 31 | `#a9a59e` | `oklch(72.24% 0.0107 82.10)` | Foggy Grey | black, 8.5 to 1 |
| 32 | `#aea89f` | `oklch(73.47% 0.0147 80.88)` | Cloudy Desert | black, 8.9 to 1 |
| 33 | `#b3aca0` | `oklch(74.72% 0.0191 81.52)` | Greyhound | black, 9.3 to 1 |
| 34 | `#b8b0a0` | `oklch(75.99% 0.0238 83.45)` | Saturn Grey | black, 9.7 to 1 |
| 35 | `#bdb4a1` | `oklch(77.27% 0.0288 86.09)` | Oyster Shoal | black, 10.2 to 1 |
| 36 | `#c2b8a1` | `oklch(78.55% 0.0337 88.90)` | Helen of Troy | black, 10.7 to 1 |
| 37 | `#c6bda2` | `oklch(79.84% 0.0385 91.29)` | Chopped Almonds | black, 11.1 to 1 |
| 38 | `#cbc1a2` | `oklch(81.12% 0.0430 92.71)` | Moth | black, 11.6 to 1 |
| 39 | `#d0c5a3` | `oklch(82.41% 0.0471 92.72)` | Sand Trail | black, 12.2 to 1 |
| 40 | `#d6caa5` | `oklch(83.80% 0.0512 92.20)` | Spa Sangria | black, 12.7 to 1 |
| 41 | `#dccea6` | `oklch(85.27% 0.0555 91.46)` | Stonebread | black, 13.4 to 1 |
| 42 | `#e2d3a7` | `oklch(86.78% 0.0598 90.57)` | Gratin Dauphinois | black, 14 to 1 |
| 43 | `#e9d7a9` | `oklch(88.29% 0.0640 89.59)` | Beeswax | black, 14.7 to 1 |
| 44 | `#f0dcaa` | `oklch(89.74% 0.0680 88.58)` | Brilliant Gold | black, 15.4 to 1 |
| 45 | `#f6e0ab` | `oklch(91.09% 0.0717 87.60)` | Visionary | black, 16.1 to 1 |
| 46 | `#fbe3ac` | `oklch(92.30% 0.0750 86.71)` | Khaki Core | black, 16.7 to 1 |
| 47 | `#ffe6b1` | `oklch(93.31% 0.0737 85.99)` | Vanilla Ice Cream | black, 17.2 to 1 |
| 48 | `#ffe9bb` | `oklch(94.09% 0.0638 85.47)` | September Morning | black, 17.6 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #0b1c2d 0.0%, #0d1f31 2.1%, #0f2437 4.3%, #11293f 6.4%, #132f47 8.5%, #153650 10.6%, #183d59 12.8%, #1b4462 14.9%, #204b6a 17.0%, #255270 19.1%, #2c5875 21.3%, #365d79 23.4%, #40627c 25.5%, #4b677e 27.7%, #566b7f 29.8%, #5f7080 31.9%, #687480 34.0%, #707980 36.2%, #787d81 38.3%, #7e8183 40.4%, #838585 42.6%, #888888 44.7%, #8b8b8b 46.8%, #8e8e8e 48.9%, #919191 51.1%, #949494 53.2%, #979796 55.3%, #9b9b98 57.4%, #9f9e9a 59.6%, #a4a19c 61.7%, #a9a59e 63.8%, #aea89f 66.0%, #b3aca0 68.1%, #b8b0a0 70.2%, #bdb4a1 72.3%, #c2b8a1 74.5%, #c6bda2 76.6%, #cbc1a2 78.7%, #d0c5a3 80.9%, #d6caa5 83.0%, #dccea6 85.1%, #e2d3a7 87.2%, #e9d7a9 89.4%, #f0dcaa 91.5%, #f6e0ab 93.6%, #fbe3ac 95.7%, #ffe6b1 97.9%, #ffe9bb 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(22.05% 0.0400 250.31) 0.0%, oklch(23.40% 0.0424 249.68) 2.1%, oklch(25.18% 0.0461 248.84) 4.3%, oklch(27.30% 0.0507 247.83) 6.4%, oklch(29.67% 0.0557 246.71) 8.5%, oklch(32.19% 0.0606 245.53) 10.6%, oklch(34.78% 0.0651 244.33) 12.8%, oklch(37.36% 0.0685 243.16) 14.9%, oklch(39.82% 0.0706 242.08) 17.0%, oklch(42.08% 0.0708 241.13) 19.1%, oklch(44.12% 0.0687 240.61) 21.3%, oklch(46.11% 0.0640 241.33) 23.4%, oklch(48.07% 0.0575 242.89) 25.5%, oklch(49.99% 0.0495 244.78) 27.7%, oklch(51.86% 0.0407 246.48) 29.8%, oklch(53.67% 0.0317 247.45) 31.9%, oklch(55.41% 0.0230 247.20) 34.0%, oklch(57.08% 0.0153 245.20) 36.2%, oklch(58.65% 0.0090 240.92) 38.3%, oklch(60.13% 0.0048 233.83) 40.4%, oklch(61.46% 0.0021 222.77) 42.6%, oklch(62.66% 0.0002 208.12) 44.7%, oklch(63.76% 0.0000 89.88) 46.8%, oklch(64.79% 0.0000 89.88) 48.9%, oklch(65.77% 0.0000 89.88) 51.1%, oklch(66.73% 0.0001 134.47) 53.2%, oklch(67.72% 0.0014 117.47) 55.3%, oklch(68.74% 0.0031 103.08) 57.4%, oklch(69.85% 0.0051 92.36) 59.6%, oklch(71.03% 0.0075 85.72) 61.7%, oklch(72.24% 0.0107 82.10) 63.8%, oklch(73.47% 0.0147 80.88) 66.0%, oklch(74.72% 0.0191 81.52) 68.1%, oklch(75.99% 0.0238 83.45) 70.2%, oklch(77.27% 0.0288 86.09) 72.3%, oklch(78.55% 0.0337 88.90) 74.5%, oklch(79.84% 0.0385 91.29) 76.6%, oklch(81.12% 0.0430 92.71) 78.7%, oklch(82.41% 0.0471 92.72) 80.9%, oklch(83.80% 0.0512 92.20) 83.0%, oklch(85.27% 0.0555 91.46) 85.1%, oklch(86.78% 0.0598 90.57) 87.2%, oklch(88.29% 0.0640 89.59) 89.4%, oklch(89.74% 0.0680 88.58) 91.5%, oklch(91.09% 0.0717 87.60) 93.6%, oklch(92.30% 0.0750 86.71) 95.7%, oklch(93.31% 0.0737 85.99) 97.9%, oklch(94.09% 0.0638 85.47) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.04 | 250.3 |
| 2 | 0.429 | 0.07 | 240.8 |
| 3 | 0.598 | 0.006 | 235.5 |
| 4 | 0.701 | 0.006 | 90.7 |
| 5 | 0.819 | 0.045 | 92.9 |
| 6 | 0.941 | 0.08 | 85.5 |

## In these collections

- [Golden hour gradients](https://grabient.com/golden-hour-gradients)

## Other forms

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