# Navy, orange and cream bold palette

The Navy, orange and cream bold palette brings together dark blue, blue, orange, and pale orange. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is pale orange.

- Also called: Navy, blue, orange and beige linear swatches
- Seed: `kWPCu8NKe_VXEUNjOMH9Q7B4`
- Page: https://grabient.com/kWPCu8NKe_VXEUNjOMH9Q7B4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark to light, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 13.1 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 | `#101d3a` | `oklch(23.62% 0.0593 264.37)` | Nightwalker | white, 16.7 to 1 |
| 2 | `#244a85` | `oklch(41.34% 0.1089 259.09)` | Florida Waters | white, 8.7 to 1 |
| 3 | `#f16424` | `oklch(67.32% 0.1874 41.75)` | Fuego Nuevo | black, 6.5 to 1 |
| 4 | `#ff9c43` | `oklch(77.95% 0.1550 58.66)` | Au Gratin | black, 10 to 1 |
| 5 | `#f5e2c8` | `oklch(92.13% 0.0400 75.57)` | Champagne Toast | black, 16.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #101d3a 0.000% 20.000%, #244a85 20.000% 40.000%, #f16424 40.000% 60.000%, #ff9c43 60.000% 80.000%, #f5e2c8 80.000% 100.000%);
background: linear-gradient(90deg, oklch(23.62% 0.0593 264.37) 0.000% 20.000%, oklch(41.34% 0.1089 259.09) 20.000% 40.000%, oklch(67.32% 0.1874 41.75) 40.000% 60.000%, oklch(77.95% 0.1550 58.66) 60.000% 80.000%, oklch(92.13% 0.0400 75.57) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.236 | 0.059 | 264.4 |
| 2 | 0.413 | 0.109 | 259.1 |
| 3 | 0.673 | 0.187 | 401.8 |
| 4 | 0.78 | 0.156 | 418.7 |
| 5 | 0.921 | 0.04 | 435.6 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)

## Other forms

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