# Cream and navy elegant palette

The Cream and navy elegant palette brings together pale orange, light gray, orange, and dark blue. The colors span a broad lightness range, combining restrained 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 pale orange.

- Also called: Off-white, gray and navy linear swatches
- Seed: `kU7xIzaAS_9KMv-imytA`
- Page: https://grabient.com/kU7xIzaAS_9KMv-imytA?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: light to dark, neutral, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 12.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 | `#f6e9da` | `oklch(94.09% 0.0248 71.72)` | Saltbox | black, 17.6 to 1 |
| 2 | `#c9c3bb` | `oklch(81.89% 0.0124 71.72)` | Pumice Stone | black, 11.9 to 1 |
| 3 | `#9d8c79` | `oklch(64.96% 0.0344 71.72)` | German Camouflage Beige | black, 6.4 to 1 |
| 4 | `#0c264a` | `oklch(27.17% 0.0744 257.35)` | Dark Eclipse | white, 15 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f6e9da 0.000% 25.000%, #c9c3bb 25.000% 50.000%, #9d8c79 50.000% 75.000%, #0c264a 75.000% 100.000%);
background: linear-gradient(90deg, oklch(94.09% 0.0248 71.72) 0.000% 25.000%, oklch(81.89% 0.0124 71.72) 25.000% 50.000%, oklch(64.96% 0.0344 71.72) 50.000% 75.000%, oklch(27.17% 0.0744 257.35) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.941 | 0.025 | 71.7 |
| 2 | 0.819 | 0.012 | 71.7 |
| 3 | 0.65 | 0.034 | 71.7 |
| 4 | 0.272 | 0.074 | -102.6 |

## In these collections

- [Elegant swatches](https://grabient.com/elegant-swatches)

## Other forms

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