# Blue and ochre navy and gold palette

The Blue and ochre navy and gold palette brings together blue, dark blue, orange, and gold. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is gold.

- Also called: Complementary blue, gray and tan angular gradient
- Seed: `kagi63NBk_6ebwIdED_OIpQtMsRDkrMDg`
- Page: https://grabient.com/kagi63NBk_6ebwIdED_OIpQtMsRDkrMDg?style=angularGradient&steps=32&angle=315
- Drawn as: angular gradient, 32 steps, 315 degrees
- Kinds: dark center
- Hues: complementary
- Contrast of its darkest and lightest colors: 8.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 | `#4f688b` | `oklch(51.18% 0.0634 257.34)` | Revel Blue | white, 5.7 to 1 |
| 2 | `#4b6487` | `oklch(49.84% 0.0641 257.26)` | French Mirage Blue | white, 6 to 1 |
| 3 | `#465f82` | `oklch(47.94% 0.0651 257.10)` | Climate Control | white, 6.5 to 1 |
| 4 | `#3f587c` | `oklch(45.73% 0.0662 256.97)` | Carter’s Scroll | white, 7.2 to 1 |
| 5 | `#385276` | `oklch(43.43% 0.0675 256.99)` | Aerostatics | white, 7.9 to 1 |
| 6 | `#324c70` | `oklch(41.27% 0.0687 257.26)` | Airforce | white, 8.7 to 1 |
| 7 | `#2d466b` | `oklch(39.32% 0.0704 257.97)` | Forlorn Cruise | white, 9.5 to 1 |
| 8 | `#284167` | `oklch(37.36% 0.0728 259.09)` | Elmer’s Echo | white, 10.3 to 1 |
| 9 | `#243b63` | `oklch(35.42% 0.0752 260.38)` | Midnight Sleigh | white, 11.1 to 1 |
| 10 | `#20365e` | `oklch(33.52% 0.0767 261.58)` | Navy Trim | white, 12 to 1 |
| 11 | `#1c3159` | `oklch(31.69% 0.0764 262.46)` | Ending Navy Blue | white, 12.9 to 1 |
| 12 | `#182c52` | `oklch(29.74% 0.0735 261.77)` | Pico Void | white, 13.8 to 1 |
| 13 | `#102748` | `oklch(27.26% 0.0679 257.73)` | Dark Eclipse | white, 14.9 to 1 |
| 14 | `#09223d` | `oklch(24.81% 0.0608 253.27)` | Rhapsody in Blue | white, 16.1 to 1 |
| 15 | `#071e35` | `oklch(23.00% 0.0533 251.64)` | Trapped Darkness | white, 16.8 to 1 |
| 16 | `#0c1c31` | `oklch(22.45% 0.0467 256.07)` | Trapped Darkness | white, 17.1 to 1 |
| 17 | `#171d32` | `oklch(23.75% 0.0414 270.09)` | Sombre Night | white, 16.6 to 1 |
| 18 | `#282336` | `oklch(26.96% 0.0349 295.41)` | Cold Steel | white, 15.2 to 1 |
| 19 | `#392c39` | `oklch(31.43% 0.0285 327.28)` | Valentino Nero | white, 13.1 to 1 |
| 20 | `#4a393e` | `oklch(36.51% 0.0242 0.29)` | Jube | white, 10.7 to 1 |
| 21 | `#584744` | `oklch(41.52% 0.0242 29.04)` | Shopping Bag | white, 8.7 to 1 |
| 22 | `#665349` | `oklch(45.87% 0.0307 48.53)` | Bargeboard Brown | white, 7.2 to 1 |
| 23 | `#775e49` | `oklch(50.10% 0.0462 60.63)` | Namakabe Brown | white, 6 to 1 |
| 24 | `#8a6844` | `oklch(54.36% 0.0676 68.11)` | Barrel Aged | white, 5 to 1 |
| 25 | `#9d733a` | `oklch(58.51% 0.0904 72.68)` | Heavy Ochre | black, 4.9 to 1 |
| 26 | `#ad7d2f` | `oklch(62.40% 0.1102 76.02)` | Release the Hounds | black, 5.7 to 1 |
| 27 | `#b98828` | `oklch(65.91% 0.1227 79.80)` | University of California Gold | black, 6.6 to 1 |
| 28 | `#c2942b` | `oklch(69.22% 0.1278 83.04)` | Leisure | black, 7.5 to 1 |
| 29 | `#ca9e36` | `oklch(72.34% 0.1284 85.02)` | Local Curry | black, 8.5 to 1 |
| 30 | `#d2a843` | `oklch(75.13% 0.1264 86.16)` | Brassed Off | black, 9.4 to 1 |
| 31 | `#d8b04f` | `oklch(77.44% 0.1239 86.87)` | Golden Rule | black, 10.2 to 1 |
| 32 | `#dcb656` | `oklch(79.13% 0.1226 87.56)` | High Honey | black, 10.8 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #4f688b 0.0%, #4b6487 3.2%, #465f82 6.5%, #3f587c 9.7%, #385276 12.9%, #324c70 16.1%, #2d466b 19.4%, #284167 22.6%, #243b63 25.8%, #20365e 29.0%, #1c3159 32.3%, #182c52 35.5%, #102748 38.7%, #09223d 41.9%, #071e35 45.2%, #0c1c31 48.4%, #171d32 51.6%, #282336 54.8%, #392c39 58.1%, #4a393e 61.3%, #584744 64.5%, #665349 67.7%, #775e49 71.0%, #8a6844 74.2%, #9d733a 77.4%, #ad7d2f 80.6%, #b98828 83.9%, #c2942b 87.1%, #ca9e36 90.3%, #d2a843 93.5%, #d8b04f 96.8%, #dcb656 100.0%);
background: conic-gradient(from 315deg in oklch, oklch(51.18% 0.0634 257.34) 0.0%, oklch(49.84% 0.0641 257.26) 3.2%, oklch(47.94% 0.0651 257.10) 6.5%, oklch(45.73% 0.0662 256.97) 9.7%, oklch(43.43% 0.0675 256.99) 12.9%, oklch(41.27% 0.0687 257.26) 16.1%, oklch(39.32% 0.0704 257.97) 19.4%, oklch(37.36% 0.0728 259.09) 22.6%, oklch(35.42% 0.0752 260.38) 25.8%, oklch(33.52% 0.0767 261.58) 29.0%, oklch(31.69% 0.0764 262.46) 32.3%, oklch(29.74% 0.0735 261.77) 35.5%, oklch(27.26% 0.0679 257.73) 38.7%, oklch(24.81% 0.0608 253.27) 41.9%, oklch(23.00% 0.0533 251.64) 45.2%, oklch(22.45% 0.0467 256.07) 48.4%, oklch(23.75% 0.0414 270.09) 51.6%, oklch(26.96% 0.0349 295.41) 54.8%, oklch(31.43% 0.0285 327.28) 58.1%, oklch(36.51% 0.0242 0.29) 61.3%, oklch(41.52% 0.0242 29.04) 64.5%, oklch(45.87% 0.0307 48.53) 67.7%, oklch(50.10% 0.0462 60.63) 71.0%, oklch(54.36% 0.0676 68.11) 74.2%, oklch(58.51% 0.0904 72.68) 77.4%, oklch(62.40% 0.1102 76.02) 80.6%, oklch(65.91% 0.1227 79.80) 83.9%, oklch(69.22% 0.1278 83.04) 87.1%, oklch(72.34% 0.1284 85.02) 90.3%, oklch(75.13% 0.1264 86.16) 93.5%, oklch(77.44% 0.1239 86.87) 96.8%, oklch(79.13% 0.1226 87.56) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.512 | 0.063 | 257.3 |
| 2 | 0.409 | 0.069 | 257.3 |
| 3 | 0.311 | 0.076 | 262.6 |
| 4 | 0.228 | 0.044 | 261.6 |
| 5 | 0.445 | 0.028 | 403.2 |
| 6 | 0.654 | 0.121 | 439.1 |
| 7 | 0.791 | 0.123 | 447.6 |

## In these collections

- [Navy and gold](https://grabient.com/navy-and-gold)

## Other forms

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